/* =====================================================================
   LOJA — Mundo dos Aviamentos

   A direção veio do logo, não de referência de Pinterest: a marca é um
   sans geométrico pesado em caixa-alta, navy com degradê para o petróleo,
   e o laranja aparece UMA vez, como acento. O desenho abaixo obedece isso.

   Três decisões que sustentam o resto:

   1. TIPOGRAFIA FAZ O TRABALHO. Uma família só, variando peso, tamanho e
      entreletra. Título grande recebe tracking NEGATIVO (-0.03em) porque
      em corpo grande as letras parecem soltas; texto pequeno em caixa-alta
      recebe tracking POSITIVO pelo motivo inverso. É a diferença entre
      parecer desenhado e parecer digitado.

   2. O PRODUTO É O HERÓI, O RESTO SOME. Card sem borda, sem sombra, sem
      caixa: foto, nome, preço. Toda moldura que se desenha em volta de uma
      foto compete com ela. Loja cara não tem borda; tem espaço.

   3. LARANJA UMA VEZ POR TELA. É o botão de comprar, e nada mais. Quando
      tudo é destaque, nada é — e o olho deixa de saber onde clicar.

   Sobre a fonte: os .woff2 da Inter ainda não estão em /assets/fonts/, então
   isto roda na pilha do sistema (SF Pro, Segoe UI, Roboto). Foi desenhado
   para ficar bom ASSIM — o peso, o tamanho e o espaço carregam a hierarquia,
   não um desenho de letra específico. Com a Inter no lugar, melhora; sem ela,
   não quebra.
   ===================================================================== */

.corpo-loja {
    /* --- Escala tipográfica ------------------------------------------
       Fluida com clamp(): no celular encolhe sem virar ilegível, no
       desktop cresce sem virar cartaz. A razão entre os degraus é ~1,25
       (terça menor) — a mesma proporção do wordmark do logo.            */
    --t-display: clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem);
    --t-titulo:  clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
    --t-secao:   clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    --t-corpo:   1.0625rem;
    --t-apoio:   0.9375rem;
    --t-legenda: 0.8125rem;

    /* --- Ritmo vertical ----------------------------------------------
       Mais generoso que o do painel de propósito. Densidade é virtude
       em ferramenta e defeito em vitrine.                               */
    --ar-1: 0.5rem;
    --ar-2: 1rem;
    --ar-3: 1.5rem;
    --ar-4: 2.5rem;
    --ar-5: 4rem;
    --ar-6: 6rem;

    --largura-loja: 1240px;
    --gutter: clamp(1.25rem, 5vw, 3rem);

    /* Uma curva de easing só, para tudo. Movimento que muda de caráter
       entre um elemento e outro parece bug, não intenção. */
    --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
    --transicao-loja: 240ms var(--curva);

    /* O degradê do logo: navy → petróleo. Único uso decorativo de cor. */
    --fio: linear-gradient(90deg, var(--cor-tinta), var(--cor-petroleo));

    background: var(--cor-papel);
    color: var(--cor-cinza-80);
    font-size: var(--t-corpo);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    /* Nenhum texto da loja é preto puro nem cinza morto: o corpo herda o
       cinza quente da paleta, que combina com o papel do fundo. */
}

.corpo-loja h1,
.corpo-loja h2,
.corpo-loja h3 {
    color: var(--cor-tinta);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    /* Título quebrado em "viúva" de uma palavra é a marca do site que
       ninguém revisou. `balance` distribui as linhas sozinho. */
    text-wrap: balance;
}

.envelope {
    width: 100%;
    max-width: var(--largura-loja);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

/* =====================================================================
   TOPO
   Fino, sem peso, e ROLA JUNTO com a página.

   Já foi grudado, com fundo translúcido e desfoque. Grudado, ele come uma
   faixa da tela em toda página — no celular, onde a altura é o que falta,
   isso é uma linha de produto a menos o tempo inteiro. E como a busca e o
   menu de categorias vêm logo abaixo dele, a faixa presa era alta.

   O `z-index` fica: o menu da conta abre para baixo, sobre o conteúdo.
   ===================================================================== */

.topo-loja {
    position: relative;
    z-index: 30;
    background: var(--cor-papel);
    border-bottom: 1px solid var(--cor-cinza-20);
}

/* === O cabeçalho no celular ============================================
   No telefone são DUAS linhas: marca, conta e carrinho em cima; a busca
   inteira embaixo.

   Não é preferência de layout. Numa linha só, logo + busca + "Entrar" +
   "Carrinho" somam mais que a largura de um telefone, e como flex não
   quebra por conta própria, essa linha passa a definir a largura MÍNIMA da
   página: o site inteiro rolava de lado, com o texto do banner e dos cards
   cortado na direita. Uma linha que não quebra no topo estraga todas as
   telas abaixo dela.

   A partir de 700 px tudo cabe numa linha, e é o que a regra adiante faz.
   ====================================================================== */

/* Uma linha só: marca, busca, carrinho, conta.

   No celular a busca cai para a linha de baixo inteira — espremida entre a
   marca e dois controles ela fica com 80px e não serve para nada. */
.topo-loja__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--ar-2);
    row-gap: 0.75rem;
    padding-block: var(--ar-2);
    width: 100%;
    max-width: var(--largura-loja);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.topo-loja__marca {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    flex: 0 0 auto;
}

.topo-loja__logo {
    /* A ALTURA manda; a largura acompanha a proporção 3.98:1 do arquivo.
       Fixar a largura faria o logo esticar em qualquer ajuste futuro. */
    height: 34px;
    width: auto;
    display: block;
}


.busca {
    display: flex;
    align-items: center;
    gap: var(--ar-1);
    /* No celular ela ocupa a segunda linha inteira. `order: 3` a manda para
       depois do carrinho e da conta no visual, sem mexer na ordem do HTML —
       que é a ordem que o leitor de tela e o Tab seguem. No desktop o `order`
       volta a 0 e ela ocupa o meio, que é o lugar dela. */
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    background: var(--cor-branco);
    border: 1px solid var(--cor-cinza-20);
    border-radius: 999px;
    padding: 0.25rem 0.25rem 0.25rem 1.125rem;
    transition: border-color var(--transicao-loja), box-shadow var(--transicao-loja);
}

.busca:focus-within {
    border-color: var(--cor-petroleo);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-petroleo) 14%, transparent);
}

.busca input {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    font-size: var(--t-apoio);
    border: none;
    background: none;
    padding-block: 0.625rem;
    color: var(--cor-cinza-80);
}

.busca input:focus {
    outline: none;
}

.busca input::placeholder {
    color: var(--cor-cinza-40);
}

.busca button {
    flex: 0 0 auto;
    border: none;
    border-radius: 999px;
    background: var(--cor-tinta);
    color: var(--cor-branco);
    font: inherit;
    font-size: var(--t-legenda);
    font-weight: 600;
    padding: 0.625rem 1.125rem;
    min-height: 40px;
    cursor: pointer;
    transition: background var(--transicao-loja);
}

/*
 * O layout do topo em tela larga vem DEPOIS das regras de celular.
 *
 * Estava antes, e por isso não valia: CSS de mesma especificidade é o último
 * que ganha, e o `order: 3` do celular — que joga a busca para a linha de
 * baixo — sobrescrevia o `order: 0` do desktop. O resultado era carrinho e
 * conta antes da busca em qualquer largura, com a busca sempre no fim.
 *
 * Media query não aumenta especificidade. Ela precisa vir depois.
 */
@media (min-width: 700px) {
    .topo-loja__logo {
        height: 42px;
    }

    /* Tudo cabe: volta a ser uma linha só. */
    .topo-loja__linha {
        flex-wrap: nowrap;
        column-gap: var(--ar-3);
    }

    .topo-loja__marca {
        margin-inline-end: 0;
    }

    .busca {
        order: 0;
        /* Ocupa o espaço que sobra entre a marca e os controles: é o caminho
           mais curto para quem já sabe o que quer — e quem sabe o que quer é
           quem compra sem hesitar. */
        flex: 1 1 auto;
        max-width: 34rem;
        margin-inline: auto;
    }
}

.busca button:hover {
    background: var(--cor-tinta-clara);
}

/* --- Menu de categorias ------------------------------------------------ */

/* --- Menu de categorias ---------------------------------------------------
   Pílulas sólidas, e não links sublinhados.

   === Por que mudou ===
   Eram links de texto cinza com um fio embaixo do ativo. Numa loja, a
   categoria é o caminho principal — quem chega pela home não sabe o nome do
   produto, sabe que quer "fita". Texto cinza no meio de um cabeçalho branco não
   convida a clicar; pílula preenchida convida.

   === Por que MARINHO, e não laranja ===
   A referência usa coral porque coral é a marca dela. A nossa é o azul-marinho,
   e o laranja é a única cor quente do sistema — reservado para dizer "onde você
   está" e "isto exige ação". Pintar oito pílulas de laranja gastaria o único
   sinal forte que a loja tem, e aí nenhuma delas diria nada.

   Por isso: marinho para todas, LARANJA só para a categoria aberta.
   ------------------------------------------------------------------------- */

.menu-loja {
    border-top: 1px solid var(--cor-cinza-10);
}

/* A faixa QUEBRA em linhas no desktop e ROLA no celular.

   Os nomes desta loja são longos — "Costura Caseira / Doméstica", "Rendas e
   Passamanaria" —, e nove deles não cabem numa linha de 1200px. Rolando na
   horizontal, metade das categorias ficaria escondida atrás de um gesto que
   ninguém faz com o mouse: o caminho principal da loja passaria a depender de
   a pessoa descobrir que há mais para o lado.

   No celular é o contrário: quebrar nove pílulas empilharia quatro linhas
   antes do banner, e a pessoa rolaria a tela toda para chegar ao produto. Lá
   a faixa rola, que é o gesto natural do dedo. */
.menu-loja ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    max-width: var(--largura-loja);
    margin: 0 auto;
    padding-inline: var(--gutter);
    padding-block: 0.75rem;
}

@media (max-width: 760px) {
    .menu-loja ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        /* Sangra até a borda: uma pílula cortada na direita é o que avisa que
           há mais para o lado. */
        margin-inline: 0;
        padding-inline: var(--gutter);
    }
}

.menu-loja ul::-webkit-scrollbar {
    display: none;
}

.menu-loja__item {
    display: block;
    padding: 0.5rem 1.125rem;
    border-radius: 2rem;
    background: var(--cor-tinta);
    color: var(--cor-branco);
    text-decoration: none;
    font-size: var(--t-apoio);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background-color var(--transicao-loja), transform var(--transicao-loja);
}

.menu-loja__item:hover {
    background: var(--cor-petroleo);
    color: var(--cor-branco);
    transform: translateY(-1px);
}

/* A categoria aberta é a única laranja. É o mesmo laranja do "onde você está"
   do painel — um sinal só, com um significado só, nos dois lados do sistema. */
.menu-loja__item--ativo,
.menu-loja__item--ativo:hover {
    background: var(--cor-laranja);
    color: var(--cor-branco);
}

/* =====================================================================
   CONTEÚDO
   ===================================================================== */

.conteudo-loja {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--largura-loja);
    margin: 0 auto;
    padding: var(--ar-4) var(--gutter) var(--ar-6);
}

/* --- Chamada da home ----------------------------------------------------
   Uma frase grande e uma linha de apoio. Nada mais. A tentação é encher a
   home de banner; o que vende aviamento é o produto aparecer rápido.      */

.chamada {
    padding-block: var(--ar-4) var(--ar-5);
    max-width: 22ch;
}

.chamada h1 {
    font-size: var(--t-display);
    letter-spacing: -0.045em;
    margin-bottom: var(--ar-2);
}

/* A palavra em petróleo é o eco do degradê do logo dentro do texto. */
.chamada h1 em {
    font-style: normal;
    background: var(--fio);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.chamada p {
    font-size: var(--t-secao);
    line-height: 1.5;
    color: var(--cor-cinza-60);
    max-width: 34ch;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* O fio: a curva da linha do logo, reduzida a uma régua. Separa sem
   desenhar uma caixa. */
.fio {
    height: 2px;
    border: none;
    background: var(--fio);
    border-radius: 2px;
    width: 4rem;
    margin: var(--ar-3) 0 0;
}

/* --- Seções ------------------------------------------------------------ */

.secao-loja {
    margin-bottom: var(--ar-5);
}

.secao-loja__cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ar-2);
    margin-bottom: var(--ar-3);
}

.secao-loja__titulo {
    font-size: var(--t-secao);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.secao-loja__nota {
    font-size: var(--t-legenda);
    color: var(--cor-cinza-40);
}

.titulo-loja {
    font-size: var(--t-titulo);
    margin-bottom: var(--ar-1);
}

.descricao-categoria {
    color: var(--cor-cinza-60);
    max-width: 60ch;
    margin-bottom: var(--ar-3);
}

.contagem-loja {
    font-size: var(--t-legenda);
    color: var(--cor-cinza-40);
    margin-bottom: var(--ar-3);
    font-variant-numeric: tabular-nums;
}

.migalhas-loja {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: var(--t-legenda);
    color: var(--cor-cinza-40);
    margin-bottom: var(--ar-3);
}

.migalhas-loja a {
    color: var(--cor-cinza-60);
    text-decoration: none;
}

.migalhas-loja a:hover {
    color: var(--cor-tinta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vazio-loja {
    padding: var(--ar-5) var(--ar-3);
    text-align: center;
    color: var(--cor-cinza-60);
    background: var(--cor-branco);
    border-radius: 1rem;
    max-width: 46ch;
    margin-inline: auto;
}

/* --- Atalhos de categoria ---------------------------------------------- */

.atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.atalho {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    border: 1px solid var(--cor-cinza-20);
    border-radius: 999px;
    background: var(--cor-branco);
    text-decoration: none;
    color: var(--cor-tinta);
    font-size: var(--t-apoio);
    font-weight: 500;
    min-height: 44px;
    transition: border-color var(--transicao-loja), transform var(--transicao-loja);
}

.atalho:hover {
    border-color: var(--cor-tinta);
    transform: translateY(-1px);
}

.atalho__total {
    color: var(--cor-cinza-40);
    font-size: var(--t-legenda);
    font-variant-numeric: tabular-nums;
}

/* --- Atalho COM foto ------------------------------------------------------
   A pílula vira coluna: foto redonda em cima, nome embaixo. É o desenho que
   toda loja de moda usa, e usa porque funciona — em aviamento a categoria é
   visual, e ninguém procura "fitas" pelo nome.

   A pílula de texto continua existindo para quem não tem foto: um retângulo
   cinza no lugar da imagem que falta é pior que não ter coluna nenhuma.
   ------------------------------------------------------------------------- */

.atalho--com-foto {
    flex-direction: column;
    gap: 0.5rem;
    width: 7.5rem;
    padding: 0.875rem 0.5rem 1rem;
    border-radius: 1rem;
    text-align: center;
}

.atalho__foto {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cor-cinza-05);
    /* O anel cresce no hover em vez de a foto pular: movimento pequeno num
       item pequeno, e o alinhamento da fileira não muda. */
    box-shadow: 0 0 0 2px var(--cor-cinza-10);
    transition: box-shadow var(--transicao-loja);
}

.atalho--com-foto:hover .atalho__foto {
    box-shadow: 0 0 0 3px var(--cor-petroleo);
}

.atalho__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.atalho--com-foto .atalho__nome {
    font-weight: 600;
    line-height: 1.25;
    /* Duas linhas no máximo: "Costura Caseira / Doméstica" em três linhas
       desalinharia a fileira inteira. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.atalho--com-foto .atalho__total {
    display: none;
}

/* =====================================================================
   GRADE DE PRODUTOS
   Card sem borda, sem sombra, sem caixa. Foto, nome, preço.
   ===================================================================== */

.grade-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: var(--ar-3) var(--ar-2);
}

@media (min-width: 640px) {
    .grade-produtos {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: var(--ar-4) var(--ar-3);
    }
}

.card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.card__foto {
    position: relative;
    aspect-ratio: 1;
    background: var(--cor-branco);
    border-radius: 0.875rem;
    overflow: hidden;
    margin-bottom: 0.875rem;
}

.card__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* O zoom lento na foto é o que dá sensação de material. 1.04 é o
       limite: acima disso vira efeito, e efeito parece barato. */
    transition: transform 500ms var(--curva);
}

.card__link:hover .card__foto img {
    transform: scale(1.04);
}

.card__sem-foto {
    display: block;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 30%, var(--cor-petroleo-fraca), transparent 60%),
        var(--cor-cinza-05);
}

.card--esgotado .card__foto img {
    opacity: 0.4;
    filter: grayscale(0.6);
}

.card__etiqueta {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    background: color-mix(in srgb, var(--cor-cinza-80) 92%, transparent);
    color: var(--cor-branco);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
}

.card__nome {
    font-size: var(--t-apoio);
    font-weight: 600;
    color: var(--cor-tinta);
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.card__resumo {
    font-size: var(--t-legenda);
    color: var(--cor-cinza-60);
    line-height: 1.4;
    margin-bottom: 0.5rem;
    /* Duas linhas no máximo: resumo de tamanho variável desalinha a grade
       inteira, e grade desalinhada é a coisa que mais denuncia template. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__preco {
    font-size: var(--t-apoio);
    font-weight: 700;
    color: var(--cor-tinta);
    /* Numeral tabular: os preços de uma coluna alinham na vírgula
       sozinhos. É invisível e é o que faz a grade parecer assentada. */
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.card__a-partir,
.produto__a-partir {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cor-cinza-40);
    margin-bottom: 0.125rem;
}

/* =====================================================================
   PÁGINA DO PRODUTO
   ===================================================================== */

.produto {
    display: grid;
    gap: var(--ar-4);
}

@media (min-width: 900px) {
    .produto {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: var(--ar-5);
        align-items: start;
    }

    /* O painel de compra acompanha a rolagem: numa página com descrição
       longa, o botão sumir da tela é perder a venda que já estava ganha. */
    .produto__compra {
        position: sticky;
        top: var(--ar-3);
    }
}

.produto__foto-principal {
    aspect-ratio: 1;
    background: var(--cor-branco);
    border-radius: 1.25rem;
    overflow: hidden;
    margin: 0;
}

.produto__foto-principal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.produto__sem-foto {
    aspect-ratio: 1;
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 30% 30%, var(--cor-petroleo-fraca), transparent 60%),
        var(--cor-cinza-05);
}

.produto__miniaturas {
    display: flex;
    gap: 0.625rem;
    margin-top: 0.875rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.produto__miniaturas::-webkit-scrollbar {
    display: none;
}

/* A miniatura é um LINK, e a moldura mora nele — não na imagem.

   Antes o `cursor: pointer` estava na `<img>`, prometendo um clique que não
   existia: a cliente clicava, a foto não mudava, e ela concluía que a loja
   estava quebrada. Cursor de mão sem ação é uma mentira que a folha de estilo
   conta. */
.produto__miniatura {
    display: block;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 0.75rem;
    background: var(--cor-branco);
    transition: border-color var(--transicao-loja), opacity var(--transicao-loja);
}

.produto__miniatura:hover {
    border-color: var(--cor-cinza-20);
}

/* Qual foto está sendo vista. Sem isto, quem clicou em três miniaturas não
   sabe mais em qual está — e volta a clicar na mesma. */
.produto__miniatura--ativa {
    border-color: var(--cor-tinta);
}

.produto__miniaturas img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 0.5rem;
    background: var(--cor-branco);
}

/* --- Ampliar a foto -------------------------------------------------------
   A imagem grande tem 1280px e aparece em torno de 560: o dobro já estava no
   servidor e não era alcançável. Quem compra aviamento compra pela cor e pela
   textura, e fita de cetim e de gorgurão são a mesma silhueta em miniatura.
   ------------------------------------------------------------------------- */

.produto__ampliar {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    position: relative;
}

/* O selo "Ampliar" só aparece com o cursor em cima — no toque não há hover, e
   por isso a foto inteira é o alvo, não o selo. */
.produto__lupa {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.3125rem 0.75rem;
    border-radius: 2rem;
    background: rgb(11 58 99 / 0.82);
    color: var(--cor-branco);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity var(--transicao-loja);
    pointer-events: none;
}

.produto__ampliar:hover .produto__lupa,
.produto__ampliar:focus-visible .produto__lupa {
    opacity: 1;
}

.lupa {
    max-width: min(96vw, 1280px);
    max-height: 94dvh;
    padding: 0;
    border: 0;
    border-radius: 1rem;
    background: var(--cor-branco);
    overflow: visible;
}

.lupa::backdrop {
    background: rgb(11 58 99 / 0.72);
}

.lupa__foto {
    display: block;
    max-width: 100%;
    max-height: 94dvh;
    width: auto;
    height: auto;
    border-radius: 1rem;
}

.lupa__fechar {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cor-branco);
    box-shadow: 0 4px 14px rgb(11 58 99 / 0.3);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--cor-tinta);
    cursor: pointer;
}

.lupa__fechar:hover {
    background: var(--cor-cinza-05);
}

.produto__nome {
    font-size: var(--t-titulo);
    letter-spacing: -0.035em;
    margin-bottom: 0.75rem;
}

.produto__resumo {
    color: var(--cor-cinza-60);
    max-width: 46ch;
    margin-bottom: var(--ar-3);
}

.produto__preco {
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    font-weight: 700;
    color: var(--cor-tinta);
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: var(--ar-3);
}

/* --- Seleção de opção ---------------------------------------------------
   Não são "botões de rádio numa lista": são placas que a pessoa toca. A
   selecionada ganha um anel navy, não um preenchimento — preencher joga o
   texto para cima de um fundo escuro e piora a leitura.                   */

.produto__opcoes {
    border: none;
    padding: 0;
    margin: 0 0 var(--ar-3);
}

.produto__opcoes legend {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-cinza-40);
    margin-bottom: 0.75rem;
    padding: 0;
}

.opcao {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--cor-branco);
    border: 1px solid var(--cor-cinza-20);
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    min-height: 52px;
    transition: border-color var(--transicao-loja), box-shadow var(--transicao-loja);
}

.opcao:hover {
    border-color: var(--cor-cinza-40);
}

.opcao:has(input:checked) {
    border-color: var(--cor-tinta);
    box-shadow: inset 0 0 0 1px var(--cor-tinta);
}

.opcao:has(input:focus-visible) {
    outline: 2px solid var(--cor-petroleo);
    outline-offset: 2px;
}

.opcao--esgotada {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--cor-cinza-05);
}

.opcao input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--cor-tinta);
}

.opcao__texto {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
    font-size: var(--t-apoio);
    color: var(--cor-cinza-80);
}

.opcao__preco {
    margin-left: auto;
    font-weight: 700;
    color: var(--cor-tinta);
    font-variant-numeric: tabular-nums;
}

.amostra-cor {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* A borda interna é o que impede uma amostra branca de sumir no fundo
       branco — e uma preta de virar um buraco. */
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
    flex: 0 0 auto;
}

/* Escassez REAL: é o saldo publicável, não truque de marketing. */
.opcao__aviso,
.produto__escassez {
    font-size: var(--t-legenda);
    color: var(--cor-laranja);
    font-weight: 600;
}

.produto__escassez {
    margin-bottom: var(--ar-2);
}

/* --- Ação de compra ----------------------------------------------------- */

.produto__acoes {
    display: flex;
    gap: 0.625rem;
    align-items: stretch;
    margin-top: var(--ar-3);
}

.produto__quantidade {
    width: 5.5rem;
    font: inherit;
    font-size: var(--t-corpo);
    font-weight: 600;
    text-align: center;
    padding: 0.875rem;
    min-height: 56px;
    border: 1px solid var(--cor-cinza-20);
    border-radius: 0.75rem;
    background: var(--cor-branco);
    color: var(--cor-tinta);
    font-variant-numeric: tabular-nums;
}

.produto__quantidade:focus {
    outline: none;
    border-color: var(--cor-petroleo);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-petroleo) 14%, transparent);
}

/* O ÚNICO laranja da tela. */
.botao--comprar {
    flex: 1 1 auto;
    min-height: 56px;
    border: none;
    border-radius: 0.75rem;
    background: var(--cor-laranja);
    color: var(--cor-branco);
    font: inherit;
    font-size: var(--t-corpo);
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background var(--transicao-loja), transform 120ms var(--curva);
}

.botao--comprar:hover {
    background: #d75f08;
}

/* O afundar de 1px no clique é a confirmação física de que o toque
   aconteceu — no celular, onde não há cursor, é o que evita o duplo toque. */
.botao--comprar:active {
    transform: translateY(1px);
}

.produto__garantias {
    display: grid;
    gap: 0.625rem;
    margin-top: var(--ar-3);
    padding-top: var(--ar-3);
    border-top: 1px solid var(--cor-cinza-20);
    font-size: var(--t-legenda);
    color: var(--cor-cinza-60);
}

.produto__garantias li {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.produto__garantias strong {
    color: var(--cor-tinta);
    font-weight: 600;
}

/* A descrição usa a página inteira — ela saiu da coluna de compra, onde vinha
   espremida em quarenta caracteres por linha com metade da tela vazia ao lado.

   O CARTÃO é o mesmo desenho das páginas institucionais, e pela mesma razão:
   um texto longo solto sobre o fundo da loja parece sobra da página, e não
   conteúdo. A coluna de leitura fica centrada dentro dele. */
.produto__descricao {
    margin-top: var(--ar-4);
    padding: var(--ar-4) var(--ar-3) var(--ar-5);
    background: var(--cor-branco);
    border: 1px solid var(--cor-cinza-10);
    border-radius: 1.25rem;
}

/* A coluna de leitura é do CONTAINER, não de cada filho: com a largura em
   cada um, o `<h3>` curto e o `<p>` longo centralizam pelas próprias larguras
   e começam em pontos diferentes. A medida vai em `rem` e não em `ch` porque
   `ch` é a largura do "0" NA FONTE DO ELEMENTO — 46ch de um título seria quase
   o dobro de 46ch de um parágrafo. */
.produto__descricao-texto {
    max-width: 46rem;
    margin-inline: auto;
}

.produto__descricao h2 {
    font-size: var(--t-subtitulo, 1.375rem);
    font-weight: 700;
    color: var(--cor-tinta);
    margin-bottom: var(--ar-2);
}

.produto__descricao p {
    margin-bottom: 1rem;
    line-height: 1.75;
    color: var(--cor-cinza-80);
}

/* O respiro ANTES do subtítulo é maior que o depois: é ele que separa um
   assunto do anterior. Espaço igual dos dois lados deixa o título solto entre
   os dois, pertencendo a nenhum. */
.produto__descricao h3,
.produto__descricao h4 {
    margin: 2rem 0 0.625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cor-tinta);
}

.produto__descricao h3 { font-size: 1.1875rem; }
.produto__descricao h4 { font-size: 1.0625rem; }

.produto__descricao ul,
.produto__descricao ol {
    margin: 0 0 1rem 1.25rem;
    line-height: 1.75;
    color: var(--cor-cinza-80);
}

.produto__descricao li {
    margin-bottom: 0.375rem;
}

.produto__descricao h2 {
    font-size: var(--t-secao);
    margin-bottom: 0.75rem;
}

/* O TEXTO FORMATADO que veio do editor do painel.

   A descrição deixou de ser um parágrafo só e passou a ter título, lista e
   destaque. Estas regras são o par das que desenham a área do editor no
   `admin.css`: o que a pessoa formata lá é o que a cliente lê aqui. Se as
   duas divergirem, quem cadastra escreve às cegas.

   `max-width` em ch, e não em px: a medida que importa numa linha de texto é
   quantos caracteres cabem nela, e 62 é a faixa em que o olho volta para o
   começo da linha seguinte sem se perder. */
.produto__descricao p,
.produto__descricao li,
.produto__descricao blockquote {
    max-width: 62ch;
    line-height: 1.65;
    color: var(--cor-cinza-60);
}

.produto__descricao p {
    margin-bottom: 0.75rem;
}

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

.produto__descricao h3,
.produto__descricao h4 {
    color: var(--cor-tinta);
    line-height: 1.35;
    margin: 1.5rem 0 0.5rem;
}

.produto__descricao h3 {
    font-size: 1.0625rem;
    font-weight: 600;
}

.produto__descricao h4 {
    font-size: 1rem;
    font-weight: 600;
}

/* O primeiro título não empurra: ele já vem depois do "Sobre este produto". */
.produto__descricao > h3:first-child,
.produto__descricao > h4:first-child {
    margin-top: 0;
}

.produto__descricao ul,
.produto__descricao ol {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

/* A loja zera `list-style` em `ul` no `base.css`, para o menu e a grade de
   produtos. Aqui a lista é texto e precisa do marcador de volta — sem ele,
   "3 mm / 5 mm / 10 mm" vira três linhas soltas sem relação visível. */
.produto__descricao ul { list-style: disc; }
.produto__descricao ol { list-style: decimal; }

.produto__descricao li {
    margin-bottom: 0.25rem;
}

.produto__descricao strong {
    color: var(--cor-tinta);
    font-weight: 600;
}

.produto__descricao blockquote {
    margin: 0 0 0.75rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--cor-cinza-20);
}

/* =====================================================================
   RODAPÉ
   ===================================================================== */

.rodape-loja {
    border-top: 1px solid var(--cor-cinza-20);
    background: var(--cor-branco);
    margin-top: auto;
}

.rodape-loja__linha {
    width: 100%;
    max-width: var(--largura-loja);
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-3);
    align-items: baseline;
    justify-content: space-between;
}

.rodape-loja__logo {
    height: 38px;
    width: auto;
    display: block;
    /* Discreto no rodapé: a marca já foi apresentada no topo, e aqui ela
       assina em vez de anunciar. */
    /* opacity: 0.75; */
}

.rodape-loja p {
    font-size: var(--t-legenda);
    color: var(--cor-cinza-40);
    /* max-width: 44ch; */
}

/* =====================================================================
   Foco visível — desenhado, não herdado.
   ===================================================================== */

.corpo-loja a:focus-visible,
.corpo-loja button:focus-visible,
.corpo-loja input:focus-visible {
    outline: 2px solid var(--cor-petroleo);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Quem pediu menos movimento não recebe movimento nenhum — nem o zoom da
   foto, que é o único efeito do site. */
@media (prefers-reduced-motion: reduce) {
    .card__link:hover .card__foto img,
    .atalho:hover,
    .botao--comprar:active {
        transform: none;
    }
}


/* =====================================================================
   TRATAMENTO EDITORIAL
   Barra de anúncio, banner de capa e seções com estrutura de revista.

   O que "editorial" quer dizer aqui, concretamente:
     - hierarquia que se LÊ EM ORDEM: etiqueta → título → deck → ação;
     - régua que separa de fato, não que decora;
     - coluna de texto estreita (~20ch no título, ~46ch no deck), porque
       título grande sobre linha larga é ilegível: o olho perde o começo
       da linha seguinte;
     - o painel ao lado do banner mostra DADO, não foto de banco de
       imagens — as categorias que têm estoque, com a contagem.
   ===================================================================== */

/* --- Barra de anúncio ---------------------------------------------------
   Rola com a página, não gruda. Uma faixa fixa somada ao cabeçalho fixo
   come 100px do celular — que é metade do que a pessoa vê de cara.       */

.anuncio {
    background: var(--cor-tinta);
    color: color-mix(in srgb, var(--cor-branco) 92%, transparent);
}

.anuncio__linha {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: var(--largura-loja);
    margin: 0 auto;
    padding: 0.625rem var(--gutter);
    font-size: var(--t-legenda);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

a.anuncio__linha:hover {
    color: var(--cor-branco);
}

.anuncio__seta {
    transition: transform var(--transicao-loja);
}

a.anuncio__linha:hover .anuncio__seta {
    transform: translateX(3px);
}

/* --- Banner de capa ------------------------------------------------------
   Assimétrico: o texto ocupa a coluna maior, o painel de dados a menor. A
   simetria é o que faz um banner parecer template — duas metades iguais
   não têm hierarquia, e sem hierarquia o olho não sabe por onde começar. */

.banner {
    display: grid;
    gap: var(--ar-4);
    padding: var(--ar-4) 0 var(--ar-5);
    border-bottom: 1px solid var(--cor-cinza-20);
    margin-bottom: var(--ar-5);
}

@media (min-width: 860px) {
    .banner {
        grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.9fr);
        gap: var(--ar-5);
        align-items: end;
        padding-block: var(--ar-5) var(--ar-5);
    }
}

.banner__etiqueta {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cor-petroleo);
    margin-bottom: var(--ar-2);
    /* A régua curta antes da etiqueta é o gesto do fio do logo reduzido a
       um sinal de "começa aqui". */
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.banner__etiqueta::before {
    content: '';
    width: 2rem;
    height: 2px;
    background: var(--fio);
    border-radius: 2px;
    flex: 0 0 auto;
}

.banner__titulo {
    font-size: var(--t-display);
    letter-spacing: -0.045em;
    line-height: 0.98;
    margin-bottom: var(--ar-2);
    max-width: 14ch;
}

/* A ÚLTIMA palavra do título recebe o degradê da marca. Uma palavra, uma
   vez — o degradê espalhado pelo título inteiro vira efeito de banner de
   loja barata. */
.banner__titulo em {
    font-style: normal;
    background: var(--fio);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.banner__deck {
    font-size: var(--t-secao);
    line-height: 1.5;
    color: var(--cor-cinza-60);
    max-width: 46ch;
    letter-spacing: -0.01em;
}

.banner__acao {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: var(--ar-3);
    padding: 0.875rem 1.5rem;
    background: var(--cor-tinta);
    color: var(--cor-branco);
    border-radius: 999px;
    text-decoration: none;
    font-size: var(--t-apoio);
    font-weight: 600;
    letter-spacing: -0.01em;
    min-height: 48px;
    transition: background var(--transicao-loja);
}

.banner__acao:hover {
    background: var(--cor-tinta-clara);
    color: var(--cor-branco);
}

.banner__acao span {
    transition: transform var(--transicao-loja);
}

.banner__acao:hover span {
    transform: translateX(3px);
}

/* --- Painel de dados do banner ------------------------------------------
   Não é ilustração: são as categorias que têm produto vendável, com a
   contagem real. Uma lista do que existe em estoque diz mais sobre a loja
   que qualquer foto de banco de imagens.                                  */

.banner__painel {
    background: var(--cor-branco);
    border-radius: 1rem;
    padding: var(--ar-3);
}

.banner__painel-titulo {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cor-cinza-40);
    margin-bottom: 0.75rem;
}

.banner__lista {
    display: flex;
    flex-direction: column;
}

.banner__lista li + li {
    border-top: 1px solid var(--cor-cinza-10);
}

.banner__lista a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ar-2);
    padding: 0.75rem 0;
    text-decoration: none;
    color: var(--cor-tinta);
    font-size: var(--t-apoio);
    font-weight: 500;
    transition: padding-inline-start var(--transicao-loja);
}

.banner__lista a:hover {
    padding-inline-start: 0.375rem;
}

.banner__conta {
    font-size: var(--t-legenda);
    font-weight: 600;
    color: var(--cor-cinza-40);
    font-variant-numeric: tabular-nums;
}

/* --- Cabeçalho de seção editorial ----------------------------------------
   Etiqueta em caixa-alta, título grande, nota alinhada à direita, e uma
   régua fina sob tudo. É a estrutura de abertura de matéria — e ela
   funciona porque cada linha carrega informação diferente, não porque
   três linhas de texto ficam bonitas empilhadas.                          */

.secao-loja__cabecalho {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.25rem var(--ar-2);
    margin-bottom: var(--ar-3);
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--cor-cinza-20);
}

.secao-loja__etiqueta {
    grid-column: 1 / -1;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cor-petroleo);
}

.secao-loja__titulo {
    grid-column: 1;
    font-size: var(--t-titulo);
    letter-spacing: -0.03em;
}

.secao-loja__nota {
    grid-column: 2;
    font-size: var(--t-legenda);
    color: var(--cor-cinza-40);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* =====================================================================
   CARRINHO
   ===================================================================== */

.topo-loja__carrinho {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.625rem 1.125rem;
    border: 1px solid var(--cor-cinza-20);
    border-radius: 999px;
    background: var(--cor-branco);
    color: var(--cor-tinta);
    text-decoration: none;
    font-size: var(--t-legenda);
    font-weight: 600;
    min-height: 44px;
    white-space: nowrap;
    transition: border-color var(--transicao-loja);
}

.topo-loja__carrinho:hover {
    border-color: var(--cor-tinta);
    color: var(--cor-tinta);
}

/* Laranja, como o botão de comprar: os dois são o mesmo assunto — o que a
   pessoa está levando. */
.topo-loja__conta {
    display: inline-grid;
    place-items: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding-inline: 0.375rem;
    border-radius: 999px;
    background: var(--cor-laranja);
    color: var(--cor-branco);
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.carrinho {
    display: grid;
    gap: var(--ar-4);
    align-items: start;
}

@media (min-width: 880px) {
    .carrinho {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 22rem);
        gap: var(--ar-5);
    }

    /* O resumo acompanha a rolagem: numa lista longa, o total e o botão
       saírem da tela é perder a compra que já estava montada. */
    .carrinho__resumo {
        position: sticky;
        top: var(--ar-3);
    }
}

.carrinho__itens {
    display: flex;
    flex-direction: column;
}

/* Grade nomeada: no celular vira uma coluna, no desktop o total encosta na
   direita. Sem áreas nomeadas, a ordem do HTML — que é a ordem que o leitor
   de tela segue — teria que ser sacrificada pelo layout. */
/* A linha é um CARTÃO com foto. A miniatura carrega o reconhecimento — em
   aviamento, o nome ("Fita nº 3") não distingue nada e a cor é tudo.

   Grade nomeada: no celular vira duas colunas com a foto à esquerda, no
   desktop tudo numa faixa só. Sem áreas nomeadas, a ordem do HTML — que é a
   ordem que o leitor de tela segue — teria que ser sacrificada pelo layout. */
.linha-carrinho {
    display: grid;
    grid-template-areas:
        'foto texto'
        'controles controles';
    grid-template-columns: auto 1fr;
    gap: var(--ar-2);
    align-items: start;
    padding: var(--ar-3);
    margin-bottom: var(--ar-2);
    background: var(--cor-branco);
    border: 1px solid var(--cor-cinza-10);
    border-radius: 1rem;
    transition: box-shadow var(--transicao-loja), border-color var(--transicao-loja);
}

.linha-carrinho:hover {
    border-color: var(--cor-cinza-20);
    box-shadow: var(--sombra-1, 0 1px 3px rgba(16, 24, 40, 0.06));
}

@media (min-width: 720px) {
    .linha-carrinho {
        grid-template-areas: 'foto texto controles';
        grid-template-columns: auto 1fr auto;
        gap: var(--ar-3);
        align-items: center;
    }
}

.linha-carrinho--alerta {
    border-color: var(--cor-laranja);
    background: color-mix(in srgb, var(--cor-laranja) 5%, var(--cor-branco));
}

.linha-carrinho__foto { grid-area: foto; }
.linha-carrinho__texto { grid-area: texto; min-width: 0; }
.linha-carrinho__controles { grid-area: controles; }

.linha-carrinho__foto {
    display: block;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--cor-cinza-05);
    flex: none;
}

.linha-carrinho__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sem foto cadastrada não entra um ícone de "imagem quebrada": entra um
   retângulo calmo, do tamanho certo, que não chama atenção para a falta. */
.linha-carrinho__sem-foto {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--cor-cinza-05), var(--cor-cinza-10));
}

.linha-carrinho__nome {
    font-size: var(--t-apoio);
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 0.125rem;
}

.linha-carrinho__nome a {
    color: var(--cor-tinta);
    text-decoration: none;
}

.linha-carrinho__nome a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.linha-carrinho__variacao {
    font-size: var(--t-legenda);
    color: var(--cor-cinza-60);
}

/* A escolha da cliente (a cor, a metragem) é o que distingue duas linhas do
   mesmo SKU — por isso ela ganha peso, e não o cinza do resto do apoio. */
.linha-carrinho__escolhas {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--raio-pilula, 999px);
    background: var(--cor-cinza-05);
    font-size: var(--t-legenda);
    font-weight: 600;
    color: var(--cor-petroleo);
}

.linha-carrinho__unitario {
    font-size: var(--t-legenda);
    color: var(--cor-cinza-40);
    font-variant-numeric: tabular-nums;
    margin-top: 0.25rem;
}

.linha-carrinho__aviso {
    font-size: var(--t-legenda);
    font-weight: 600;
    color: var(--cor-laranja);
    margin-top: 0.375rem;
}

/* Quantidade, total e remover formam um bloco só, alinhado à direita: são as
   três coisas que se faz COM a linha, e espalhá-las pela largura obrigava o
   olho a atravessar a tela para cada uma. */
.linha-carrinho__controles {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--ar-2);
}

.linha-carrinho__quantidade {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.linha-carrinho__quantidade input {
    width: 4.25rem;
    font: inherit;
    font-size: var(--t-apoio);
    text-align: center;
    padding: 0.5rem;
    min-height: 44px;
    border: 1px solid var(--cor-cinza-20);
    border-radius: 0.5rem;
    background: var(--cor-branco);
    color: var(--cor-tinta);
    font-variant-numeric: tabular-nums;
}

.linha-carrinho__atualizar {
    min-height: 44px;
    padding: 0 0.875rem;
    border: 1px solid var(--cor-cinza-20);
    border-radius: 0.5rem;
    background: var(--cor-branco);
    color: var(--cor-petroleo);
    font: inherit;
    font-size: var(--t-legenda);
    font-weight: 600;
    cursor: pointer;
}

.linha-carrinho__atualizar:hover {
    border-color: var(--cor-petroleo);
    background: var(--cor-petroleo-fraca);
}

.linha-carrinho__total {
    font-size: var(--t-apoio);
    font-weight: 700;
    color: var(--cor-tinta);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 5rem;
}

/* Cinza até o hover, e vermelho no hover: remover é ação destrutiva e não
   pode competir com "Fechar pedido" — mas também não pode ficar tão apagada
   que a pessoa não a ache. */
.linha-carrinho__remover button {
    border: 0;
    background: none;
    padding: 0.5rem;
    font: inherit;
    font-size: var(--t-legenda);
    color: var(--cor-cinza-40);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.linha-carrinho__remover button:hover {
    color: var(--cor-erro);
}

/* --- Frete grátis: o quanto falta --------------------------------------- */

.carrinho__gratis {
    margin: var(--ar-2) 0;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: var(--cor-cinza-05);
}

.carrinho__gratis--alcancado {
    background: var(--cor-ok-fraca);
}

.carrinho__gratis-texto {
    font-size: var(--t-legenda);
    color: var(--cor-cinza-80);
    margin-bottom: 0.5rem;
}

.carrinho__gratis-barra {
    height: 6px;
    border-radius: 999px;
    background: var(--cor-cinza-20);
    overflow: hidden;
}

.carrinho__gratis-cheio {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--cor-laranja);
    transition: width var(--transicao-loja);
}

.carrinho__gratis--alcancado .carrinho__gratis-cheio {
    background: var(--cor-ok);
}

/* A largura vem em classe, e não em `style="width:…"`: a CSP não tem
   `unsafe-inline`, e atributo de estilo é exatamente o que ela recusa. Vinte
   e uma faixas de 5% dão resolução de sobra para uma barra de 6px. */
.barra-0 { width: 0%; }
.barra-5 { width: 5%; }
.barra-10 { width: 10%; }
.barra-15 { width: 15%; }
.barra-20 { width: 20%; }
.barra-25 { width: 25%; }
.barra-30 { width: 30%; }
.barra-35 { width: 35%; }
.barra-40 { width: 40%; }
.barra-45 { width: 45%; }
.barra-50 { width: 50%; }
.barra-55 { width: 55%; }
.barra-60 { width: 60%; }
.barra-65 { width: 65%; }
.barra-70 { width: 70%; }
.barra-75 { width: 75%; }
.barra-80 { width: 80%; }
.barra-85 { width: 85%; }
.barra-90 { width: 90%; }
.barra-95 { width: 95%; }
.barra-100 { width: 100%; }

/* --- Carrinho vazio -----------------------------------------------------
   Uma tela vazia é uma tela de VENDA: quem chegou aqui queria comprar e não
   achou o caminho. Antes era uma frase solta num cartão branco, sem nada para
   clicar além de um link cinza. Agora tem um desenho que diz onde a pessoa
   está, um convite claro e as três garantias que fazem a diferença entre
   fechar a aba e voltar ao catálogo.
   ------------------------------------------------------------------------- */

.carrinho-vazio {
    max-width: 34rem;
    margin: var(--ar-4) auto var(--ar-5);
    padding: var(--ar-4) var(--ar-3);
    text-align: center;
}

.carrinho-vazio__desenho {
    /* `svg` é `display: block` no reset da loja, então o `text-align: center`
       do bloco não o alcança — a margem automática é o que o centraliza. */
    display: block;
    margin-inline: auto;
    width: 6.5rem;
    height: auto;
    color: var(--cor-cinza-20);
    margin-bottom: var(--ar-2);
}

.carrinho-vazio__titulo {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cor-tinta);
    margin-bottom: 0.5rem;
}

.carrinho-vazio__texto {
    font-size: var(--t-apoio);
    line-height: 1.6;
    color: var(--cor-cinza-60);
    margin-bottom: var(--ar-3);
}

.carrinho-vazio__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ar-2);
    margin-bottom: var(--ar-4);
}

/* `.botao--comprar` nasce esticado, porque no carrinho e na página de produto
   ele ocupa a coluna inteira. Aqui ele é um convite no meio de uma tela vazia:
   esticado vira uma barra laranja, e o sublinhado herdado de `<a>` o faz
   parecer um link pintado. */
.carrinho-vazio__acoes .botao--comprar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--ar-3);
    text-decoration: none;
}

.carrinho-vazio__link {
    color: var(--cor-petroleo);
    font-weight: 600;
    font-size: var(--t-apoio);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* As garantias ficam em linha no desktop e empilhadas no celular. São as
   mesmas três da faixa do rodapé — dito duas vezes de propósito: aqui é onde
   a decisão de continuar acontece. */
.carrinho-vazio__garantias {
    display: grid;
    gap: 0.75rem;
    padding-top: var(--ar-3);
    border-top: 1px solid var(--cor-cinza-10);
    list-style: none;
    font-size: var(--t-legenda);
    color: var(--cor-cinza-60);
    text-align: left;
}

@media (min-width: 640px) {
    .carrinho-vazio__garantias {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--ar-2);
    }
}

.carrinho-vazio__garantias strong {
    display: block;
    color: var(--cor-tinta);
    font-weight: 600;
}

/* --- Resumo ------------------------------------------------------------- */

.carrinho__resumo {
    background: var(--cor-branco);
    border-radius: 1rem;
    padding: var(--ar-3);
}

.carrinho__resumo-titulo {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cor-cinza-40);
    margin-bottom: var(--ar-2);
}

.carrinho__conta {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-bottom: var(--ar-2);
    border-bottom: 1px solid var(--cor-cinza-10);
}

.carrinho__conta > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ar-2);
}

.carrinho__conta dt {
    font-size: var(--t-apoio);
    color: var(--cor-cinza-60);
}

.carrinho__conta dd {
    font-size: var(--t-secao);
    font-weight: 700;
    color: var(--cor-tinta);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.carrinho__frete {
    font-size: var(--t-legenda);
    color: var(--cor-cinza-40);
    margin-top: var(--ar-2);
    line-height: 1.45;
}

.carrinho__fechar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: var(--ar-3);
    text-decoration: none;
    text-align: center;
    padding: 1rem;
}

.carrinho__bloqueio {
    margin-top: var(--ar-3);
    padding: 0.875rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--cor-laranja) 10%, transparent);
    color: var(--cor-atencao);
    font-size: var(--t-legenda);
    font-weight: 500;
    text-align: center;
}

.carrinho__continuar {
    display: block;
    margin-top: var(--ar-2);
    text-align: center;
    font-size: var(--t-legenda);
    color: var(--cor-cinza-60);
    text-decoration: none;
}

.carrinho__continuar:hover {
    color: var(--cor-tinta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =====================================================================
   CONTA DO CLIENTE
   Coluna estreita e centrada: formulário largo é formulário que cansa,
   e a linha longa faz o olho perder o campo seguinte.
   ===================================================================== */

.topo-loja__conta-link {
    flex: 0 0 auto;
    color: var(--cor-cinza-60);
    text-decoration: none;
    font-size: var(--t-legenda);
    font-weight: 500;
    padding: 0.625rem 0.25rem;
    white-space: nowrap;
    transition: color var(--transicao-loja);
}

.topo-loja__conta-link:hover {
    color: var(--cor-tinta);
}

.conta {
    max-width: 32rem;
    margin-inline: auto;
}

.conta--larga {
    max-width: 48rem;
}

/* "Meus dados" e "Endereços" acompanham "Seus pedidos": mesma faixa, mesmas
   margens. O estreito de `.conta` é para entrar e cadastrar, onde a coluna
   curta É o desenho — um formulário de login de 1200px de largura não existe. */
.conta--painel {
    max-width: none;
    margin-inline: 0;
}

/* Campo de formulário não acompanha a faixa larga: um campo de e-mail de
   1100px pede um e-mail de 1100px. */
.conta--painel .conta__form {
    max-width: 44rem;
}

.conta__nota {
    color: var(--cor-cinza-60);
    font-size: var(--t-apoio);
    margin-bottom: var(--ar-3);
    max-width: 52ch;
}

.conta__subtitulo {
    font-size: var(--t-apoio);
    font-weight: 700;
    color: var(--cor-tinta);
    letter-spacing: -0.01em;
    margin-bottom: var(--ar-2);
}

.conta__form {
    display: flex;
    flex-direction: column;
    gap: var(--ar-2);
    background: var(--cor-branco);
    border-radius: 1rem;
    padding: var(--ar-3);
    margin-top: var(--ar-3);
}

.conta__dupla,
.conta__endereco-linha {
    display: grid;
    gap: var(--ar-2);
}

@media (min-width: 560px) {
    .conta__dupla {
        grid-template-columns: 1fr 1fr;
    }

    /* Rua e número: a rua fica com o espaço, o número com o que precisa.
       Dois campos de largura igual desperdiçam metade da linha num campo
       que recebe três dígitos. */
    .conta__endereco-linha {
        grid-template-columns: 1fr 8rem;
    }
}

.campo-loja {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.campo-loja label {
    font-size: var(--t-legenda);
    font-weight: 600;
    color: var(--cor-tinta);
}

.campo-loja input,
.campo-loja select {
    font: inherit;
    font-size: var(--t-apoio);
    color: var(--cor-cinza-80);
    background: var(--cor-papel);
    border: 1px solid var(--cor-cinza-20);
    border-radius: 0.625rem;
    padding: 0.75rem 0.875rem;
    min-height: 48px;
    width: 100%;
    transition: border-color var(--transicao-loja), box-shadow var(--transicao-loja);
}

.campo-loja input:focus,
.campo-loja select:focus {
    outline: none;
    border-color: var(--cor-petroleo);
    background: var(--cor-branco);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-petroleo) 14%, transparent);
}

.campo-loja input[aria-invalid='true'] {
    border-color: var(--cor-erro);
}

.campo-loja__ajuda {
    font-size: var(--t-legenda);
    color: var(--cor-cinza-40);
    line-height: 1.4;
}

.campo-loja__erro {
    font-size: var(--t-legenda);
    font-weight: 600;
    color: var(--cor-erro);
}

.conta__enviar {
    margin-top: var(--ar-2);
    width: 100%;
    text-align: center;
}

.conta__alternativa {
    margin-top: var(--ar-3);
    text-align: center;
    font-size: var(--t-apoio);
    color: var(--cor-cinza-60);
}

.conta__dados {
    display: grid;
    gap: var(--ar-2);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    background: var(--cor-branco);
    border-radius: 1rem;
    padding: var(--ar-3);
}

.conta__dados dt {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cor-cinza-40);
    margin-bottom: 0.25rem;
}

.conta__dados dd {
    font-size: var(--t-apoio);
    font-weight: 500;
    color: var(--cor-tinta);
}

/* --- Endereços ---------------------------------------------------------- */

.enderecos {
    display: flex;
    flex-direction: column;
    gap: var(--ar-2);
}

.endereco {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ar-2);
    background: var(--cor-branco);
    border: 1px solid transparent;
    border-radius: 0.875rem;
    padding: var(--ar-2) var(--ar-3);
}

.endereco--principal {
    border-color: var(--cor-tinta);
}

.endereco__topo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.endereco__topo strong {
    font-size: var(--t-apoio);
    color: var(--cor-tinta);
}

.endereco__marca {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cor-petroleo);
}

.endereco__linha {
    font-size: var(--t-apoio);
    color: var(--cor-cinza-80);
    line-height: 1.45;
}

.endereco__linha--apoio {
    font-size: var(--t-legenda);
    color: var(--cor-cinza-60);
}

.conta__sair {
    margin-top: var(--ar-4);
    padding-top: var(--ar-3);
    border-top: 1px solid var(--cor-cinza-20);
    text-align: center;
}

/* =====================================================================
   CHECKOUT E PEDIDO

   A última tela antes do dinheiro. Duas regras a governam:

   1. NADA COMPETE COM O BOTÃO. Fora as placas de escolha, a tela é papel
      e texto. O laranja aparece uma vez, em "Confirmar pedido" — como no
      resto da loja.

   2. O RESUMO NUNCA SAI DA TELA. No desktop ele acompanha a rolagem: a
      pessoa escolhe frete e pagamento vendo o total mudar de posição
      nenhuma. Perder o total de vista é perder a confiança de que a conta
      continua a mesma.
   ===================================================================== */

.checkout {
    display: grid;
    gap: var(--ar-4);
    align-items: start;
}

@media (min-width: 880px) {
    .checkout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 23rem);
        gap: var(--ar-5);
    }

    .checkout__resumo {
        position: sticky;
        top: var(--ar-3);
    }
}

.checkout__escolhas {
    display: flex;
    flex-direction: column;
    gap: var(--ar-4);
    min-width: 0;
}

.checkout__bloco {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.checkout__titulo {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cor-cinza-40);
    margin-bottom: var(--ar-1);
    /* Herda `letter-spacing: -0.03em` do h2 da loja, que é para corpo
       grande. Aqui o rótulo é minúsculo e em caixa-alta, onde o espaço
       tem de crescer em vez de encolher — daí o valor positivo acima. */
}

/* --- Placa de escolha ---------------------------------------------------
   Parente próxima da `.opcao` da página de produto: mesma placa branca,
   mesmo anel navy quando marcada. Não é a mesma classe porque o conteúdo
   é outro — ali cabe uma linha, aqui o endereço ocupa três e o valor
   encosta na direita. Forçar as duas na mesma regra faria uma delas
   depender de `align-items` que a outra não quer.                       */

.escolha {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--cor-branco);
    border: 1px solid var(--cor-cinza-20);
    border-radius: 0.75rem;
    cursor: pointer;
    min-height: 56px;
    transition: border-color var(--transicao-loja), box-shadow var(--transicao-loja);
}

.escolha:hover {
    border-color: var(--cor-cinza-40);
}

.escolha:has(input:checked) {
    border-color: var(--cor-tinta);
    box-shadow: inset 0 0 0 1px var(--cor-tinta);
}

.escolha:has(input:focus-visible) {
    outline: 2px solid var(--cor-petroleo);
    outline-offset: 2px;
}

.escolha input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    /* Alinha o radio com a PRIMEIRA linha do texto, não com o centro do
       bloco: num endereço de três linhas, o centro deixa a bolinha
       flutuando no meio da rua. */
    margin-top: 0.2rem;
    accent-color: var(--cor-tinta);
}

.escolha__texto {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--t-apoio);
    color: var(--cor-cinza-80);
    line-height: 1.45;
}

.escolha__texto strong {
    color: var(--cor-tinta);
    font-weight: 600;
}

.escolha__apoio {
    font-size: var(--t-legenda);
    color: var(--cor-cinza-60);
}

.escolha__valor {
    flex: 0 0 auto;
    align-self: center;
    font-size: var(--t-apoio);
    font-weight: 700;
    color: var(--cor-tinta);
    font-variant-numeric: tabular-nums;
}

.checkout__nota {
    font-size: var(--t-legenda);
    color: var(--cor-cinza-60);
    line-height: 1.5;
    margin-top: var(--ar-1);
}

.checkout__nota a {
    color: var(--cor-petroleo);
    text-underline-offset: 3px;
}

/* --- Resumo ------------------------------------------------------------- */

.checkout__resumo {
    background: var(--cor-branco);
    border-radius: 1rem;
    padding: var(--ar-3);
}

.checkout__itens {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    list-style: none;
    margin: 0 0 var(--ar-3);
    padding: 0;
}

.checkout__itens li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ar-2);
}

.checkout__item-nome {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    font-size: var(--t-apoio);
    color: var(--cor-cinza-80);
    line-height: 1.35;
}

.checkout__item-valor {
    flex: 0 0 auto;
    font-size: var(--t-apoio);
    font-weight: 600;
    color: var(--cor-tinta);
    font-variant-numeric: tabular-nums;
}

.checkout__conta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: var(--ar-2);
    border-top: 1px solid var(--cor-cinza-10);
}

.checkout__conta > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ar-2);
}

.checkout__conta dt {
    font-size: var(--t-apoio);
    color: var(--cor-cinza-60);
}

.checkout__conta dd {
    font-size: var(--t-apoio);
    font-weight: 600;
    color: var(--cor-cinza-80);
    font-variant-numeric: tabular-nums;
}

/* O total é o único número grande da coluna. Se subtotal, frete e total
   tiverem o mesmo peso, o olho tem de ler os três para achar o que
   importa. */
.checkout__conta-total {
    padding-top: 0.5rem;
    border-top: 1px solid var(--cor-cinza-10);
}

.checkout__conta-total dt {
    font-weight: 600;
    color: var(--cor-tinta);
}

.checkout__conta-total dd {
    font-size: var(--t-secao);
    font-weight: 700;
    color: var(--cor-tinta);
    letter-spacing: -0.02em;
}

.checkout__confirmar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: var(--ar-3);
    padding: 1rem;
    text-align: center;
}

.checkout__confirmar[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* =====================================================================
   PEDIDO
   ===================================================================== */

.pedido {
    display: grid;
    gap: var(--ar-4);
    align-items: start;
    margin-top: var(--ar-4);
}

@media (min-width: 720px) {
    .pedido {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: var(--ar-5);
    }
}

.pedido .checkout__bloco {
    background: var(--cor-branco);
    border-radius: 1rem;
    padding: var(--ar-3);
}

/* O estado é etiqueta, não parágrafo: `inline-flex` para a pílula caber
   no texto em vez de atravessar a largura da tela. */
.pedido__estado {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: var(--t-legenda);
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--cor-cinza-10);
    color: var(--cor-cinza-80);
}

.pedido__estado--ok {
    background: var(--cor-ok-fraca);
    color: var(--cor-ok);
}

.pedido__estado--atencao {
    background: var(--cor-atencao-fraca);
    color: var(--cor-atencao);
}

.pedido__estado--erro {
    background: var(--cor-erro-fraca);
    color: var(--cor-erro);
}

.pedido__pagamento {
    margin-top: var(--ar-3);
    padding: var(--ar-3);
    border-radius: 1rem;
    background: var(--cor-petroleo-fraca);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    font-size: var(--t-apoio);
    color: var(--cor-cinza-80);
    line-height: 1.5;
}

.pedido__pagamento strong {
    color: var(--cor-tinta);
}

.pedido__prazo {
    font-size: var(--t-apoio);
    line-height: 1.5;
}

/* --- O código de pagamento ----------------------------------------------
   O QR fica sobre BRANCO e com margem, sempre. Um QR sobre fundo colorido
   ou colado na borda é um QR que a câmera não lê — e a pessoa culpa o
   próprio celular, não a nossa tela. A moldura vem de `.qr-code` no
   base.css; aqui só o alinhamento dentro do bloco de pagamento.
   ----------------------------------------------------------------------- */

.pagamento__qr {
    display: flex;
    justify-content: center;
    margin: var(--ar-2) 0;
}

.pagamento__qr svg {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    padding: 0.75rem;
    border-radius: var(--raio-controle);
    border: 1px solid var(--cor-cinza-20);
    background: var(--cor-branco);
}

.pagamento__rotulo {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--cor-tinta);
}

/*
 * O código inteiro visível, quebrando onde precisar.
 *
 * `word-break: break-all` porque um payload de PIX é uma palavra só de 200
 * caracteres: sem isso ele estoura a caixa e some para fora da tela no
 * celular. E ele PRECISA estar visível — o botão de copiar é conveniência, e
 * quem não tiver área de transferência disponível seleciona com o dedo.
 */
/* --- Página institucional ------------------------------------------------
   Sobre nós, termos, trocas, privacidade, LGPD.

   São as páginas mais LIDAS de fio a pavio da loja: quem abre "trocas e
   devoluções" está decidindo se compra. Tudo aqui serve à leitura corrida —
   medida estreita, ar entre os assuntos, e o texto sobre superfície branca em
   vez de solto no papel.
   ------------------------------------------------------------------------- */

/* A página institucional é um CARTÃO na faixa das outras telas internas —
   "Seus pedidos" é a referência da largura.

   Foram duas tentativas antes desta. Um cartão estreito de 46rem centralizado
   no meio da página parecia um recado colado por cima da loja, com margens
   que não batiam com nenhuma outra tela. Sem cartão nenhum, o texto ficava
   encostado na esquerda com metade da tela vazia à direita — o pior dos dois.

   Agora o cartão ocupa a faixa inteira e a COLUNA DE TEXTO fica centrada
   dentro dele: o branco preenche a tela, e a linha continua na medida em que
   o olho não se perde na volta. */
.pagina {
    max-width: none;
    margin: 0;
    padding: var(--ar-4) var(--ar-3) var(--ar-5);
    background: var(--cor-branco);
    border: 1px solid var(--cor-cinza-10);
    border-radius: 1.25rem;
}

/* Título, resumo, texto e data dividem a MESMA coluna.

   A medida é em `rem`, e não em `ch`: `ch` é a largura do "0" NA FONTE DO
   ELEMENTO, então 68ch de um título de 2,25rem é quase o dobro de 68ch de um
   parágrafo — o título começava bem à esquerda do texto e a página inteira
   parecia desalinhada por dentro. */
.pagina > * {
    max-width: 42rem;
    margin-inline: auto;
}

@media (max-width: 560px) {
    .pagina {
        padding: var(--ar-2) var(--ar-2) var(--ar-3);
        border-radius: 1rem;
    }
}

.pagina__titulo {
    margin-bottom: var(--ar-1);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--cor-tinta);
}

/* O resumo é a promessa da página em uma linha: quem só lê isto já sabe se
   precisa continuar. */
.pagina__resumo {
    margin-top: 0.625rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--cor-cinza-10);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--cor-cinza-60);
}

.pagina__conteudo {
    margin-top: 1.5rem;
    /* Sem medida própria: a coluna do cartão já é a medida, e uma segunda
       largura aqui recriaria o desalinhamento que ela existe para evitar. */
    font-size: 1rem;
    line-height: 1.75;
    color: var(--cor-cinza-80);
}

.pagina__conteudo p {
    margin-bottom: 1rem;
}

/* O respiro ANTES do título é maior que o depois: é ele que separa um assunto
   do anterior. Espaço igual dos dois lados faz o título parecer solto entre os
   dois, pertencendo a nenhum. */
.pagina__conteudo h3 {
    margin: 2rem 0 0.625rem;
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--cor-tinta);
}

.pagina__conteudo h4 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cor-tinta);
}

.pagina__conteudo > :first-child {
    margin-top: 0;
}

.pagina__conteudo ul,
.pagina__conteudo ol {
    margin: 0 0 1rem;
    padding-left: 1.375rem;
}

/* O `base.css` zera o marcador em `ul` por causa dos menus e das grades de
   produto. Aqui a lista é texto e precisa dele de volta. */
.pagina__conteudo ul { list-style: disc; }
.pagina__conteudo ol { list-style: decimal; }

.pagina__conteudo li {
    margin-bottom: 0.4375rem;
}

.pagina__conteudo strong {
    color: var(--cor-tinta);
    font-weight: 600;
}

.pagina__conteudo a {
    color: var(--cor-petroleo);
    text-underline-offset: 3px;
}

.pagina__conteudo blockquote {
    margin: 0 0 1rem;
    padding: 0.125rem 0 0.125rem 1rem;
    border-left: 3px solid var(--cor-petroleo-fraca);
    color: var(--cor-cinza-60);
}

/* A data importa nestas páginas e em nenhuma outra: uma política sem data não
   diz se é a que vale. */
.pagina__data {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cor-cinza-10);
    font-size: 0.8125rem;
    color: var(--cor-cinza-40);
}

/* --- Navegação da conta --------------------------------------------------
   A conta era UMA página com cadastro, endereços e pedidos empilhados. Quem
   queria conferir um endereço rolava por cima dos próprios dados. Separados,
   esta faixa diz onde se está — e o "onde estou" não depende de rolar.
   ------------------------------------------------------------------------- */

.conta-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: var(--ar-3);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cor-cinza-20);
}

.conta-nav__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.conta-nav__item {
    display: inline-block;
    padding: 0.5rem 0.875rem;
    border: 0;
    border-radius: 2rem;
    background: none;
    font: inherit;
    font-size: var(--t-apoio);
    font-weight: 500;
    color: var(--cor-cinza-60);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transicao-loja), color var(--transicao-loja);
}

.conta-nav__item:hover {
    background: var(--cor-cinza-05);
    color: var(--cor-tinta);
}

/* A tela em que se está: preenchida, e não só sublinhada. Numa faixa de três
   pílulas, sublinhado some de relance. */
.conta-nav__item--ativo,
.conta-nav__item--ativo:hover {
    background: var(--cor-tinta);
    color: var(--cor-branco);
    font-weight: 600;
}

.conta-nav__sair {
    margin: 0;
}

/* Sair não compete com a navegação: quem procura sabe onde fica, e vermelho
   só quando o cursor chega. */
.conta-nav__item--sair:hover {
    background: var(--cor-erro-fraca);
    color: var(--cor-erro);
}

/* --- Blog ----------------------------------------------------------------
   Traz gente do buscador sem pagar por anúncio: quem procura "como escolher a
   linha para tricô" não está procurando a loja, mas chega nela — e chega já
   sabendo o que a gente vende.

   A lista é de TEXTO, e por isso ela é uma coluna e não uma grade: matéria
   sem foto num card de grade vira um retângulo vazio com um título dentro.
   ------------------------------------------------------------------------- */

.blog__topo {
    max-width: 46rem;
    margin: 0 auto var(--ar-3);
    text-align: center;
}

.blog__chamada {
    margin-top: 0.625rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--cor-cinza-60);
}


/* A capa da matéria aberta sangra para além da medida do texto: ela é a
   abertura, e texto e imagem competindo pela mesma largura fazem a página
   parecer um documento, não uma leitura. */
.post__capa {
    margin: var(--ar-2) 0 var(--ar-2);
    border-radius: 1rem;
    overflow: hidden;
    background: var(--cor-cinza-05);
}

.post__capa img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* --- A grade do blog ------------------------------------------------------
   Uma coluna de cartões largos empilhados obriga a rolar a página inteira para
   descobrir o que é novo — e piora a cada matéria publicada. Em grade, a
   página inteira cabe no olho, e a primeira matéria ganha o cartão largo, que
   é o ponto de entrada.
   ------------------------------------------------------------------------- */

.blog-grade {
    list-style: none;
    display: grid;
    gap: var(--ar-3);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .blog-grade { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
    .blog-grade { grid-template-columns: repeat(3, 1fr); }
}

.post-card {
    display: flex;
}

/* O cartão inteiro é a área de clique — o link do título cobre o cartão pelo
   pseudo-elemento. Sem isso, a pessoa toca no cartão no celular e não acontece
   nada, o que lê como página quebrada. */
.post-card__corpo {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: var(--cor-branco);
    border: 1px solid var(--cor-cinza-10);
    border-radius: 1.25rem;
    transition: border-color var(--transicao-loja), transform var(--transicao-loja),
                box-shadow var(--transicao-loja);
}

.post-card__corpo:hover {
    border-color: var(--cor-cinza-20);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
}

.post-card__capa {
    display: block;
    background: var(--cor-cinza-05);
}

.post-card__capa img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform var(--transicao-loja);
}

.post-card__corpo:hover .post-card__capa img {
    transform: scale(1.03);
}

/* Sem capa cadastrada não entra um ícone de imagem quebrada: entra um bloco
   calmo, do tamanho certo, que mantém o alinhamento da grade. */
.post-card__sem-capa {
    display: block;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--cor-cinza-05), var(--cor-cinza-10));
}

.post-card__texto {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.5rem;
    padding: var(--ar-2);
}

.post-card__data {
    font-size: var(--t-legenda);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cor-petroleo);
}

.post-card__titulo {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.post-card__titulo a {
    color: var(--cor-tinta);
    text-decoration: none;
}

/* O link do título cobre o cartão: uma área de clique só, e o foco de teclado
   continua no link de verdade. */
.post-card__titulo a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.post-card__corpo:hover .post-card__titulo a {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.post-card__resumo {
    font-size: var(--t-legenda);
    line-height: 1.6;
    color: var(--cor-cinza-60);
}

/* "Ler a matéria" encosta no fim do cartão, e não logo abaixo do resumo:
   resumos de tamanhos diferentes deixariam a linha dançando de cartão para
   cartão. */
.post-card__ler {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: var(--t-legenda);
    font-weight: 600;
    color: var(--cor-petroleo);
}

/* O destaque ocupa a linha inteira e vira duas colunas: a capa de um lado, o
   texto do outro. */
@media (min-width: 640px) {
    .post-card--destaque {
        grid-column: 1 / -1;
    }

    .post-card--destaque .post-card__corpo {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .post-card--destaque .post-card__capa img,
    .post-card--destaque .post-card__sem-capa {
        height: 100%;
        aspect-ratio: auto;
        min-height: 15rem;
    }

    .post-card--destaque .post-card__texto {
        justify-content: center;
        padding: var(--ar-3);
        gap: 0.75rem;
    }

    .post-card--destaque .post-card__titulo {
        font-size: clamp(1.375rem, 2.5vw, 1.75rem);
    }

    .post-card--destaque .post-card__resumo {
        font-size: var(--t-apoio);
    }
}

.blog__paginas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 46rem;
    margin: var(--ar-3) auto 0;
}

.blog__contagem {
    font-size: var(--t-apoio);
    color: var(--cor-cinza-60);
}

/* A assinatura da matéria: data e autor. Numa página de blog isso é sinal de
   procedência — texto sem data nem autor lê como panfleto. */
.pagina__meta {
    margin-top: 0.625rem;
    font-size: var(--t-apoio);
    color: var(--cor-cinza-60);
}

/* --- Carrossel da vitrine -------------------------------------------------
   Uma faixa que rola com `scroll-snap`. Funciona no dedo e no trackpad SEM
   JavaScript; o script só acrescenta setas, pontos e a troca automática.

   Rolagem, e não `transform`: o teclado, o leitor de tela e o gesto de
   arrastar já sabem o que fazer com uma área que rola. Um trilho movido por
   `transform` precisa reimplementar os três, e erra em pelo menos um.
   ------------------------------------------------------------------------- */

.carrossel {
    position: relative;
    margin-bottom: var(--ar-4);
    border-radius: 1.5rem;
    overflow: hidden;
    background: var(--cor-cinza-05);
}

@media (max-width: 560px) {
    .carrossel { border-radius: 1rem; }
}

.carrossel__trilho {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.carrossel__trilho::-webkit-scrollbar {
    display: none;
}

.carrossel__quadro {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-height: clamp(19rem, 38vw, 30rem);
    display: flex;
    align-items: flex-end;
}

.carrossel__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* O texto fica sobre a foto, e por isso ele traz o próprio contraste.

   O degradê sobe da base e escurece só onde há letra: escurecer a imagem
   inteira apagaria o produto, que é o que a foto está ali para mostrar. */
/* O degradê cobre a LARGURA INTEIRA do quadro; quem tem medida é o texto
   dentro dele.

   Estava no mesmo elemento do texto, com `max-width: 34rem` — e o degradê
   terminava numa borda vertical dura no meio da foto, como se alguém tivesse
   colado um retângulo escuro por cima. */
.carrossel__texto {
    position: relative;
    z-index: 1;
    width: 100%;
    /* O recuo à esquerda abre espaço para a seta, que fica sobre a foto e
       cobria a etiqueta. */
    padding: var(--ar-3) var(--ar-2) var(--ar-3) calc(var(--ar-2) + 3.25rem);
    color: var(--cor-branco);
    background: linear-gradient(to top,
        rgb(11 58 99 / 0.88) 0%,
        rgb(11 58 99 / 0.66) 50%,
        rgb(11 58 99 / 0) 100%);
}

@media (max-width: 620px) {
    /* Sem setas no celular, o recuo extra não tem razão de existir. */
    .carrossel__texto {
        padding-left: var(--ar-2);
    }
}

/* Sem foto o texto não pode ser branco sobre nada: o quadro vira o azul da
   marca e o degradê some. Um banner sem imagem continua legível. */
.carrossel__quadro:not(:has(.carrossel__foto)) {
    background: linear-gradient(140deg, var(--cor-tinta), var(--cor-petroleo));
}

.carrossel__quadro:not(:has(.carrossel__foto)) .carrossel__texto {
    background: none;
}

.carrossel__etiqueta {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
}

.carrossel__titulo {
    /* Branco EXPLÍCITO: o `h2` da loja tem cor própria, e ela vencia a herança
       do bloco — o título saía azul-marinho por cima da foto, ilegível. */
    color: var(--cor-branco);
    max-width: 20ch;
    margin-top: 0.5rem;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.carrossel__deck {
    margin-top: 0.625rem;
    max-width: 44ch;
    font-size: 1.0625rem;
    line-height: 1.55;
    opacity: 0.92;
}

.carrossel__acao {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.8125rem 1.5rem;
    border-radius: 2rem;
    background: var(--cor-branco);
    color: var(--cor-tinta);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
    transition: transform var(--transicao-loja), box-shadow var(--transicao-loja);
}

.carrossel__acao:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.24);
}

/* --- Controles (só existem com JS) --------------------------------------- */

.carrossel__seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.9);
    color: var(--cor-tinta);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
    transition: background-color var(--transicao-loja);
}

.carrossel__seta:hover {
    background: var(--cor-branco);
}

.carrossel__seta--anterior { left: 0.75rem; }
.carrossel__seta--proxima { right: 0.75rem; }

/* No celular as setas saem: o gesto de arrastar é melhor que dois alvos de
   44px cobrindo a foto. */
@media (max-width: 620px) {
    .carrossel__seta { display: none; }
}

.carrossel__pontos {
    position: absolute;
    right: var(--ar-2);
    bottom: 1rem;
    z-index: 2;
    display: flex;
    gap: 0.375rem;
}

.carrossel__ponto {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.45);
    cursor: pointer;
    transition: background-color var(--transicao-loja), width var(--transicao-loja);
}

/* O ponto aceso é mais LARGO, e não só mais claro: quem não distingue a
   diferença de opacidade ainda vê qual é. */
.carrossel__ponto--ativo {
    width: 22px;
    border-radius: 999px;
    background: var(--cor-branco);
}

/* --- Faixa de confiança ---------------------------------------------------
   Antes do rodapé e na largura inteira. Ela morava dentro de uma coluna do
   rodapé, espremida em um quarto da tela e quebrando em três linhas —
   justamente o bloco que mais precisa ser visto.

   Cada item responde, em uma linha, uma pergunta que a cliente não faz em voz
   alta: quem fica com meu cartão, como eu pago, quando chega, quem conferiu.
   ------------------------------------------------------------------------- */

/* A faixa é MARINHA, e é ela que separa a página do rodapé.

   Em branco sobre o off-white ela desaparecia: a página terminava sem nada
   dizer que terminou, e o rodapé parecia continuação do conteúdo. Uma faixa de
   cor é o que dá fim à página — e é o único bloco escuro da loja, o que faz
   dela um marco em vez de mais uma seção. */
.selos-loja {
    background: var(--cor-tinta);
    color: var(--cor-branco);
}

.selos-loja__lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ar-2);
    max-width: var(--largura-loja);
    margin: 0 auto;
    padding: var(--ar-2) var(--gutter);
}

@media (max-width: 900px) {
    .selos-loja__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .selos-loja__lista { grid-template-columns: 1fr; }
}

.selo-loja {
    padding-left: 0.875rem;
    border-left: 3px solid var(--cor-laranja);
}

.selo-loja__titulo {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cor-branco);
}

.selo-loja__apoio {
    display: block;
    margin-top: 0.1875rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgb(255 255 255 / 0.78);
}

.selo-loja__apoio strong {
    color: var(--cor-branco);
    font-weight: 600;
}

/* --- Rodapé --------------------------------------------------------------
   Onde a pessoa olha antes de digitar o cartão. Três colunas, e não quatro:
   eram quatro, duas ficavam quase vazias e a dos selos corria o dobro da
   altura das outras — colunas de alturas muito diferentes leem como coisa
   inacabada.
   ------------------------------------------------------------------------- */

.rodape-loja {
    background: var(--cor-branco);
    margin-top: auto;
}

.rodape-loja__grade {
    display: grid;
    /* A marca ocupa quase metade: é ela que ancora o bloco, e é onde estão a
       descrição e o contato. As duas colunas de links repartem o resto. */
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: var(--ar-3);
    max-width: var(--largura-loja);
    margin: 0 auto;
    padding: var(--ar-4) var(--gutter) var(--ar-3);
}

@media (max-width: 780px) {
    .rodape-loja__grade {
        grid-template-columns: 1fr 1fr;
        gap: var(--ar-2);
    }

    /* A marca passa a ocupar a linha inteira: espremida em metade, a descrição
       quebra em cinco linhas ao lado de uma coluna de links curtos. */
    .rodape-loja__marca {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .rodape-loja__grade { grid-template-columns: 1fr; }
}

.rodape-loja__logo {
    max-width: 170px;
    height: auto;
}

.rodape-loja__sobre {
    margin-top: 0.875rem;
    max-width: 42ch;
    font-size: var(--t-apoio);
    line-height: 1.65;
    color: var(--cor-cinza-60);
}

.rodape-loja__contato {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
    margin-top: 0.875rem;
    font-size: var(--t-apoio);
    font-weight: 500;
    color: var(--cor-tinta);
}

.rodape-loja__contato a {
    color: var(--cor-tinta);
    text-decoration: none;
    border-bottom: 1px solid var(--cor-cinza-20);
}

.rodape-loja__contato a:hover {
    border-bottom-color: var(--cor-tinta);
}

/* O título da coluna leva um traço laranja: é o mesmo laranja que marca "onde
   você está" no painel, e aqui ele dá o ponto de cor que faltava — sem
   competir com nada, porque não há outra cor quente na tela. */
.rodape-loja__titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-tinta);
}

.rodape-loja__titulo::before {
    content: '';
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--cor-laranja);
}

.rodape-loja__links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: var(--t-apoio);
}

.rodape-loja__links a {
    display: inline-block;
    color: var(--cor-cinza-60);
    text-decoration: none;
    transition: color var(--transicao-loja), transform var(--transicao-loja);
}

/* O deslocamento de 3px é o que faz a lista responder ao cursor. Sem ele, uma
   coluna de links cinza é uma coluna de texto que por acaso é clicável. */
.rodape-loja__links a:hover {
    color: var(--cor-tinta);
    transform: translateX(3px);
}

/* O convite para perguntar. Cartão de cor suave: em aviamento a dúvida é a
   regra — medida, cor e quantidade não se resolvem por foto —, e uma pergunta
   antes da compra evita a troca depois. */
.rodape-loja__convite {
    margin-top: 1.25rem;
    padding: 1rem 1.125rem;
    border-radius: 1rem;
    background: var(--cor-petroleo-fraca);
}

.rodape-loja__convite-titulo {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cor-tinta);
}

.rodape-loja__convite-texto {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--cor-cinza-60);
}

.rodape-loja__contato {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin-top: 0.625rem;
    font-size: var(--t-apoio);
    font-weight: 600;
    color: var(--cor-tinta);
}

.rodape-loja__contato a {
    color: var(--cor-tinta);
    text-decoration: none;
    border-bottom: 1px solid rgb(31 143 176 / 0.4);
}

.rodape-loja__contato a:hover {
    border-bottom-color: var(--cor-tinta);
}

/* --- Formas de pagamento ------------------------------------------------- */

.rodape-loja__pagamento {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    max-width: var(--largura-loja);
    margin: 0 auto;
    padding: 0 var(--gutter) var(--ar-2);
}

.rodape-loja__pagamento .rodape-loja__titulo {
    margin-bottom: 0;
}

.rodape-loja__meios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Selo com contorno, e não bandeirinha colorida: são dois meios, e eles são o
   que a loja aceita DE VERDADE. Desenhar bandeira de cartão "para dar
   credibilidade" faria a cliente escolher a loja por causa delas e descobrir
   no checkout que não existem. */
.meio-pagamento {
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--cor-cinza-20);
    border-radius: 0.5rem;
    background: var(--cor-branco);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cor-cinza-60);
}

.meio-pagamento--pix {
    border-color: var(--cor-petroleo);
    color: var(--cor-petroleo);
}

.rodape-loja__selo-seguro {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--cor-cinza-60);
}

/* O selo da marca desenhado em CSS — sem arquivo, e nítido em qualquer tela. */
.rodape-loja__selo-seguro .marca-selo {
    width: 18px;
    height: 18px;
}

/* A faixa cinza vai de ponta a ponta; o TEXTO é que se alinha ao conteúdo.
   Com o fundo dentro do container, a barra terminava onde o conteúdo termina
   e sobrava papel branco nas laterais — o rodapé parecia recortado. */
.rodape-loja__faixa-base {
    background: var(--cor-cinza-05);
    border-top: 1px solid var(--cor-cinza-20);
}

.rodape-loja__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    max-width: var(--largura-loja);
    margin: 0 auto;
    padding: 1rem var(--gutter);
}

.rodape-loja__legal {
    margin: 0;
    font-size: 0.75rem;
    color: var(--cor-cinza-40);
}

/* --- Menu da conta -------------------------------------------------------
   `<details>` nativo: abre e fecha sozinho, é alcançável por teclado e é
   anunciado pelo leitor de tela sem uma linha de script. Importa porque a CSP
   não aceita `onclick` — e um menu de conta que depende de JS é um menu que
   some quando o JS falha, levando junto o caminho para "Sair".
   ------------------------------------------------------------------------- */

.conta-menu {
    position: relative;
}

.conta-menu__gatilho {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.75rem;
    border-radius: 2rem;
    font-size: var(--t-apoio);
    color: var(--cor-tinta);
    cursor: pointer;
    white-space: nowrap;
    list-style: none;
    transition: background-color 120ms ease;
}

/* O triângulo que o navegador desenha sozinho sai: já há uma seta desenhada,
   e as duas juntas viram duas setas discordando uma da outra. */
.conta-menu__gatilho::-webkit-details-marker {
    display: none;
}

.conta-menu__gatilho:hover {
    background: var(--cor-cinza-05);
}

.conta-menu[open] .conta-menu__gatilho {
    background: var(--cor-cinza-05);
}

.conta-menu[open] .conta-menu__seta {
    transform: rotate(180deg);
}

.conta-menu__ola {
    color: var(--cor-cinza-60);
}

.conta-menu__nome {
    font-weight: 600;
}

.conta-menu__seta {
    font-size: 0.7em;
    color: var(--cor-cinza-40);
    transition: transform 120ms ease;
}

.conta-menu__caixa {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 40;
    min-width: 15rem;
    padding: 0.375rem;
    border: 1px solid var(--cor-cinza-20);
    border-radius: 0.875rem;
    background: var(--cor-branco);
    box-shadow: 0 8px 28px rgb(11 58 99 / 0.16);
}

/* O nome inteiro no alto: o gatilho mostra só o primeiro, e numa casa em que
   duas pessoas usam o mesmo computador isso não basta para saber quem está
   logada antes de finalizar uma compra. */
.conta-menu__quem {
    margin: 0;
    padding: 0.5rem 0.75rem 0.625rem;
    border-bottom: 1px solid var(--cor-cinza-10);
    font-size: var(--t-apoio);
    font-weight: 600;
    color: var(--cor-tinta);
    word-break: break-word;
}

.conta-menu__item {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 0;
    border-radius: 0.625rem;
    background: none;
    font: inherit;
    font-size: var(--t-apoio);
    font-weight: 500;
    text-align: left;
    color: var(--cor-tinta);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.conta-menu__item:hover,
.conta-menu__item:focus-visible {
    background: var(--cor-petroleo-fraca);
}

/* Uma linha de apoio por item: "Meus pedidos" e "Meus dados" são parecidos o
   bastante para alguém abrir o errado e desistir no meio. */
.conta-menu__apoio {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--cor-cinza-60);
}

.conta-menu__sair {
    margin: 0.25rem 0 0;
    padding-top: 0.25rem;
    border-top: 1px solid var(--cor-cinza-10);
}

/* Sair não é destaque: é a saída, e quem procura sabe onde fica. Vermelho só
   quando o cursor chega. */
.conta-menu__item--sair {
    color: var(--cor-cinza-60);
}

.conta-menu__item--sair:hover,
.conta-menu__item--sair:focus-visible {
    background: var(--cor-erro-fraca);
    color: var(--cor-erro);
}

/* --- A ação de pagar ------------------------------------------------------
   "Abrir o boleto em PDF" é o que a cliente veio fazer nesta tela: ela
   escolheu boleto e precisa do boleto. Saía como um `.botao` sem variante —
   que no sistema é transparente e sem contorno, ou seja, texto azul solto no
   meio de um bloco que já é todo texto azul.

   Vira o botão principal, centrado e largo. Largo porque no celular o alvo
   tem de ser o dedo inteiro, e centrado porque não há nada ao lado dele para
   alinhar: é uma ação só, e o eixo dela é o do bloco.
   ------------------------------------------------------------------------- */

.pagamento__acao {
    display: flex;
    justify-content: center;
    margin-top: 0.25rem;
}

/* O botão de COPIAR encolhe para o próprio texto.

   O bloco de pagamento é uma coluna flex, e coluna flex estica os filhos por
   padrão: "Copiar linha digitável" saía de ponta a ponta, mais largo que o
   botão principal logo abaixo. Ação secundária maior que a principal inverte
   a hierarquia — o olho vai na maior. */
.pedido__pagamento > .botao {
    align-self: flex-start;
}

.pagamento__acao .botao {
    /* Uma medida, não a largura toda: esticado de ponta a ponta num bloco de
       600px, o botão deixa de parecer botão e vira uma faixa. */
    min-width: min(20rem, 100%);
    justify-content: center;
    text-align: center;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 2px 6px rgb(11 58 99 / 0.18);
}

.pagamento__acao .botao:hover {
    box-shadow: 0 4px 12px rgb(11 58 99 / 0.24);
}

.pagamento__codigo {
    display: block;
    padding: 0.625rem 0.75rem;
    border-radius: var(--raio-controle);
    border: 1px solid var(--cor-cinza-20);
    background: var(--cor-branco);
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--cor-tinta);
    word-break: break-all;
    user-select: all;
}

/* --- Lista de pedidos --------------------------------------------------- */

.lista-pedidos {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Grade e não flex: assim número, data, estado e total ficam na mesma
   coluna de uma linha para outra. Numa lista de pedidos, coluna que
   dança a cada linha é o que impede a leitura vertical. */
.pedido-linha {
    display: grid;
    grid-template-areas:
        'numero total'
        'data   estado';
    grid-template-columns: 1fr auto;
    gap: 0.35rem var(--ar-2);
    align-items: center;
    padding: var(--ar-2) var(--ar-3);
    background: var(--cor-branco);
    border: 1px solid transparent;
    border-radius: 0.875rem;
    text-decoration: none;
    transition: border-color var(--transicao-loja);
}

@media (min-width: 640px) {
    .pedido-linha {
        grid-template-areas: 'numero data estado total';
        grid-template-columns: minmax(0, 1fr) auto auto minmax(5rem, auto);
        gap: var(--ar-3);
    }
}

.pedido-linha:hover {
    border-color: var(--cor-tinta);
}

.pedido-linha:focus-visible {
    outline: 2px solid var(--cor-petroleo);
    outline-offset: 2px;
}

.pedido-linha__numero {
    grid-area: numero;
    font-size: var(--t-apoio);
    font-weight: 700;
    color: var(--cor-tinta);
    font-variant-numeric: tabular-nums;
}

.pedido-linha__data {
    grid-area: data;
    font-size: var(--t-legenda);
    color: var(--cor-cinza-60);
    font-variant-numeric: tabular-nums;
}

.pedido-linha .pedido__estado {
    grid-area: estado;
    justify-self: start;
}

.pedido-linha__total {
    grid-area: total;
    justify-self: end;
    font-size: var(--t-apoio);
    font-weight: 700;
    color: var(--cor-tinta);
    font-variant-numeric: tabular-nums;
}


/* --- Escolha de atributo: cor, metragem, o que o SKU tiver ---------------
   Vem DEPOIS da escolha do SKU, e mostra só os valores daquele SKU. Antes,
   as amostras de todas as cores eram desenhadas dentro da opção do SKU:
   pareciam selecionáveis e não eram.

   O nome vem sempre ao lado da amostra. Dois tons de verde no celular são
   o mesmo verde; quem usa leitor de tela não vê nenhum dos dois; e quem for
   conferir o pedido depois precisa da palavra escrita.
   ------------------------------------------------------------------------- */

.produto__atributos {
    display: flex;
    flex-direction: column;
    gap: var(--ar-2);
    margin-top: var(--ar-2);
}

.produto__atributo {
    border: 0;
    margin: 0;
    padding: 0;
}

.produto__atributo legend {
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: var(--t-apoio);
    font-weight: 600;
    color: var(--cor-tinta);
}

.atributo__valores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.atributo__opcao {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--cor-cinza-20);
    border-radius: 2rem;
    background: var(--cor-branco);
    cursor: pointer;
    font-size: var(--t-apoio);
    line-height: 1.2;
}

/* O radio some, mas continua no DOM: é ele que o teclado e o leitor de tela
   usam para navegar. Esconder com `display:none` tiraria os dois. */
.atributo__opcao input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.atributo__opcao:hover {
    border-color: var(--cor-tinta);
}

/* O foco do teclado precisa aparecer na ETIQUETA, já que o radio está
   escondido — senão quem navega por Tab não sabe onde está. */
.atributo__opcao:has(input:focus-visible) {
    outline: 2px solid var(--cor-tinta);
    outline-offset: 2px;
}

.atributo__opcao:has(input:checked) {
    border-color: var(--cor-tinta);
    box-shadow: inset 0 0 0 1px var(--cor-tinta);
    font-weight: 600;
}

.linha-carrinho__escolhas {
    margin: 0.125rem 0 0;
    font-size: var(--t-apoio);
    color: var(--cor-cinza-80);
}

/* Os selos fecham o resumo, logo abaixo do "Continuar comprando". É o último
   lugar em que a pessoa hesita antes de ir para o pagamento — e as três
   frases respondem exatamente às três dúvidas dela. */
.carrinho__selos {
    margin-top: var(--ar-2);
    padding-top: var(--ar-2);
    border-top: 1px solid var(--cor-cinza-10);
    list-style: none;
    display: grid;
    gap: 0.375rem;
    font-size: var(--t-legenda);
    color: var(--cor-cinza-60);
}

.carrinho__selos li {
    padding-left: 1.125rem;
    position: relative;
}

/* O tique é desenhado com borda, não com um caractere: emoji de tique muda de
   forma em cada sistema, e alguns leitores de tela leem o nome dele. */
.carrinho__selos li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 0.5rem;
    height: 0.28rem;
    border-left: 2px solid var(--cor-ok);
    border-bottom: 2px solid var(--cor-ok);
    transform: rotate(-45deg);
}

.carrinho__conta-subtotal dd {
    font-size: var(--t-apoio);
    font-weight: 700;
}

/* --- Cupom no checkout ---------------------------------------------------
   Discreto, e não uma faixa chamativa: o cupom serve a quem TEM um. Um campo
   grande de "insira seu cupom" faz quem não tem sair da compra para procurar
   um na internet — e boa parte não volta.
   ------------------------------------------------------------------------- */

.checkout__cupom {
    margin: var(--ar-2) 0;
    padding-top: var(--ar-2);
    border-top: 1px solid var(--cor-cinza-10);
}

.checkout__cupom label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: var(--t-legenda);
    font-weight: 600;
    color: var(--cor-cinza-60);
}

.checkout__cupom-linha {
    display: flex;
    gap: 0.5rem;
}

.checkout__cupom-linha input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font: inherit;
    text-transform: uppercase;
    border: 1px solid var(--cor-cinza-20);
    border-radius: 0.5rem;
    background: var(--cor-branco);
    color: var(--cor-tinta);
}

.checkout__cupom-linha input:focus {
    border-color: var(--cor-petroleo);
    outline: none;
    box-shadow: 0 0 0 3px var(--cor-petroleo-fraca);
}

.checkout__cupom-botao {
    flex: none;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--cor-petroleo);
    border-radius: 0.5rem;
    background: var(--cor-branco);
    color: var(--cor-petroleo);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.checkout__cupom-botao:hover {
    background: var(--cor-petroleo-fraca);
}

.checkout__cupom-ativo {
    font-size: var(--t-legenda);
    color: var(--cor-ok);
}

.checkout__cupom-ativo strong {
    font-family: var(--fonte-mono);
    letter-spacing: 0.04em;
}

/* "Remover" é um botão de formulário, mas lê como link: ele desfaz uma
   escolha, não conduz a compra. */
.checkout__cupom-tirar {
    border: 0;
    background: none;
    padding: 0 0 0 0.25rem;
    font: inherit;
    font-size: var(--t-legenda);
    color: var(--cor-cinza-40);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.checkout__cupom-tirar:hover {
    color: var(--cor-erro);
}

.checkout__cupom-erro {
    margin-top: 0.5rem;
    font-size: var(--t-legenda);
    color: var(--cor-erro);
}

/* O desconto é a única linha verde da conta: ela é a boa notícia. */
.checkout__conta-desconto dd {
    color: var(--cor-ok);
    font-weight: 600;
}

/* --- Conversa sobre o pedido --------------------------------------------
   Fica abaixo do resumo: quem abre a página do pedido quase sempre quer o
   pagamento ou o rastreio. Quem vem falar com a loja está com um problema, e
   problema tem paciência para rolar a tela.
   ------------------------------------------------------------------------- */

.conversa {
    margin-top: var(--ar-4);
    padding: var(--ar-3);
    background: var(--cor-branco);
    border: 1px solid var(--cor-cinza-10);
    border-radius: 1rem;
}

.conversa__titulo {
    font-size: var(--t-subtitulo, 1.25rem);
    font-weight: 700;
    color: var(--cor-tinta);
    margin-bottom: var(--ar-2);
}

.conversa__vazia {
    font-size: var(--t-apoio);
    line-height: 1.6;
    color: var(--cor-cinza-60);
    margin-bottom: var(--ar-3);
}

.conversa__lista {
    list-style: none;
    display: grid;
    gap: var(--ar-2);
    margin-bottom: var(--ar-3);
}

/* A mensagem da LOJA é recuada e tem a barra colorida: numa conversa de duas
   pontas, o olho precisa de meio segundo para saber quem falou — e meio
   segundo por mensagem é o que separa ler de reler. */
.conversa__item {
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    background: var(--cor-cinza-05);
    border-left: 3px solid var(--cor-cinza-20);
}

.conversa__item--loja {
    background: var(--cor-petroleo-fraca);
    border-left-color: var(--cor-petroleo);
    margin-left: var(--ar-3);
}

.conversa__autor {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--t-legenda);
    color: var(--cor-cinza-60);
    margin-bottom: 0.375rem;
}

.conversa__autor strong {
    color: var(--cor-tinta);
}

.conversa__quem {
    font-style: italic;
}

.conversa__texto {
    font-size: var(--t-apoio);
    line-height: 1.6;
    color: var(--cor-cinza-80);
    overflow-wrap: anywhere;
}

.conversa__anexos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.conversa__anexos img {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid var(--cor-cinza-20);
    display: block;
}

.conversa__bloqueio {
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    background: var(--cor-atencao-fraca);
    font-size: var(--t-legenda);
    color: var(--cor-cinza-80);
}

.conversa__form {
    display: grid;
    gap: 0.375rem;
}

.conversa__form label {
    font-size: var(--t-legenda);
    font-weight: 600;
    color: var(--cor-cinza-60);
}

.conversa__opcional {
    font-weight: 400;
    color: var(--cor-cinza-40);
}

.conversa__form textarea {
    width: 100%;
    padding: 0.75rem;
    font: inherit;
    line-height: 1.5;
    color: var(--cor-tinta);
    background: var(--cor-branco);
    border: 1px solid var(--cor-cinza-20);
    border-radius: 0.5rem;
    resize: vertical;
}

.conversa__form textarea:focus {
    border-color: var(--cor-petroleo);
    outline: none;
    box-shadow: 0 0 0 3px var(--cor-petroleo-fraca);
}

.conversa__form input[type="file"] {
    font-size: var(--t-legenda);
    color: var(--cor-cinza-60);
}

.conversa__enviar {
    margin-top: 0.5rem;
    justify-self: start;
    flex: 0 0 auto;
    padding-inline: var(--ar-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Levaram junto -------------------------------------------------------
   Fecha a página do produto. Vem depois da descrição porque quem chegou até
   aqui já decidiu sobre ESTA peça — a pergunta passou a ser "o que mais eu
   preciso?", e é aí que a sugestão ajuda em vez de disputar com o botão.
   ------------------------------------------------------------------------- */

.relacionados {
    margin-top: var(--ar-5);
    padding-top: var(--ar-4);
    border-top: 1px solid var(--cor-cinza-10);
}

.relacionados__titulo {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--cor-tinta);
    margin-bottom: var(--ar-3);
}

/* --- Continue lendo ------------------------------------------------------
   Fecha a matéria. Quem chegou ao fim está com a atenção onde a loja mais
   quer — e a alternativa a oferecer o próximo texto é o botão "voltar" do
   navegador, que raramente volta para dentro.
   ------------------------------------------------------------------------- */

.continue-lendo {
    margin-top: var(--ar-5);
    padding-top: var(--ar-4);
    border-top: 1px solid var(--cor-cinza-10);
}

.continue-lendo__titulo {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--cor-tinta);
    margin-bottom: var(--ar-3);
}