@layer components {

  /* Header */
  .cabecalho {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    padding: var(--e-3) var(--e-4);
    background: color-mix(in srgb, var(--cor-superficie) 85%, transparent);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--cor-borda);
  }

  .cabecalho-logo {
    font-weight: 700;
    font-size: var(--t-lg);
    color: var(--cor-texto);
    text-decoration: none;
  }

  .cabecalho-nav {
    display: flex;
    align-items: center;
    gap: var(--e-4);
  }

  .cabecalho-nav a {
    color: var(--cor-texto);
    text-decoration: none;
    font-size: var(--t-sm);
  }
  .cabecalho-nav a:hover { color: var(--cor-marca); }

  .cabecalho-busca-form {
    flex: 1;
    max-width: 24rem;
    display: flex;
  }

  .cabecalho-busca {
    flex: 1;
    max-width: 24rem;
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-p);
    background: var(--cor-superficie-2);
    color: var(--cor-texto);
  }

  .busca-hero { max-width: 28rem; width: 100%; }

  .caixa {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
  }

  .categoria-card {
    flex: 1 1 14rem;
    text-decoration: none;
    color: inherit;
  }
  .categoria-card svg { width: 2rem; height: 2rem; color: var(--cor-marca); }

  /* Toggle de tema — três estados */
  .toggle-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-p);
    background: var(--cor-superficie-2);
    color: var(--cor-texto);
    cursor: pointer;
    transition: border-color var(--transicao);
  }
  .toggle-tema:hover { border-color: var(--cor-marca); }

  /* Footer */
  .rodape {
    border-block-start: 1px solid var(--cor-borda);
    padding: var(--e-8) var(--e-4);
    margin-block-start: var(--e-16);
  }
  .rodape-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-4);
    font-size: var(--t-sm);
  }
  .rodape-nav a { color: var(--cor-texto-suave); text-decoration: none; }
  .rodape-nav a:hover { color: var(--cor-marca); }

  /* Botões */
  .botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 2.75rem;
    padding: var(--e-2) var(--e-4);
    border-radius: var(--raio-p);
    border: 1px solid transparent;
    font-size: var(--t-base);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transicao), border-color var(--transicao), transform var(--transicao);
  }
  .botao:active { transform: scale(0.98); }

  .botao-primaria {
    background: var(--cor-marca);
    color: var(--cor-marca-contraste);
  }
  .botao-primaria:hover { background: color-mix(in srgb, var(--cor-marca) 85%, black); }

  .botao-secundaria {
    background: var(--cor-superficie-2);
    border-color: var(--cor-borda);
    color: var(--cor-texto);
  }
  .botao-secundaria:hover { border-color: var(--cor-marca); }

  .botao-fantasma {
    background: transparent;
    color: var(--cor-texto);
  }
  .botao-fantasma:hover { background: var(--cor-superficie-2); }

  /* Badge de vendedor verificado */
  .selo-verificado {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    font-size: var(--t-sm);
    color: var(--cor-marca);
  }

  /* Card de produto — link "esticado": só o <a> do nome/imagem é clicável em
     toda a área do card; o botão Top fica fora dele (evita aninhar controle
     interativo dentro de outro, o que quebra teclado e leitor de tela). */
  .card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--e-2);
    padding: var(--e-3);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-superficie);
    box-shadow: var(--sombra);
    transition: border-color var(--transicao);
  }
  .card:hover { border-color: var(--cor-marca); }
  .card:has(.top[aria-pressed="true"]) { border-color: var(--cor-top-ativo); }

  .card-link {
    color: inherit;
    text-decoration: none;
  }
  .card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--raio);
  }

  .card .top {
    position: relative;
    z-index: 1;
  }

  .card-imagem {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    border-radius: var(--raio-p);
    background: var(--cor-superficie-2);
  }

  .card-nome {
    font-size: var(--t-sm);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-categoria {
    font-size: var(--t-sm);
    color: var(--cor-texto-suave);
  }

  .card-preco {
    font-weight: 700;
  }

  .card-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Trilha "Top ..." */
  .trilha {
    container-type: inline-size;
  }
  .trilha-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--e-3);
  }
  .trilha-titulo {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-lg);
    font-weight: 700;
  }
  .trilha-lista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 15rem;
    gap: var(--e-4);
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    padding-block-end: var(--e-2);
  }
  .trilha-lista .card {
    scroll-snap-align: start;
  }

  @container (min-width: 22rem) {
    .card { grid-template-columns: 7rem 1fr; grid-template-rows: auto; }
    .card-imagem { aspect-ratio: 1; height: 100%; }
  }

  @media (min-width: 1024px) {
    .trilha-lista {
      grid-auto-flow: unset;
      grid-template-columns: repeat(4, 1fr);
      overflow-x: visible;
    }
  }

  /* Botão Top */
  .top {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: var(--e-1) var(--e-3);
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    background: var(--cor-superficie-2);
    color: var(--cor-texto);
    cursor: pointer;
    transition: border-color var(--transicao), background-color var(--transicao);
  }
  .top:hover { border-color: var(--cor-top-ativo); }
  .top[aria-pressed="true"] {
    background: var(--cor-top-ativo);
    border-color: var(--cor-top-ativo);
    color: var(--cor-marca-contraste);
  }
  .top-seta {
    transition: transform var(--transicao);
  }
  .top[aria-pressed="true"] .top-seta {
    transform: translateY(-2px);
  }
  .top[aria-busy="true"] { opacity: 0.6; cursor: wait; }

  @media (prefers-reduced-motion: no-preference) {
    .top[aria-pressed="true"] .top-seta { animation: top-pulo 320ms ease; }
  }
  @keyframes top-pulo {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-5px); }
    100% { transform: translateY(-2px); }
  }

  /* Página do produto */
  .produto-layout {
    display: grid;
    gap: var(--e-8);
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) {
    .produto-layout { grid-template-columns: 1.1fr 1fr; }
  }

  .produto-imagem-principal {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--raio);
    border: 1px solid var(--cor-borda);
  }

  .produto-miniaturas {
    display: flex;
    gap: var(--e-2);
    margin-block-start: var(--e-3);
    overflow-x: auto;
  }
  .produto-miniatura-link {
    flex: 0 0 auto;
    border-radius: var(--raio-p);
    overflow: hidden;
    border: 2px solid transparent;
  }
  .produto-miniatura-link:focus-visible,
  .produto-miniatura-link:hover {
    border-color: var(--cor-marca);
  }
  .produto-miniatura {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
  }

  .btn-marketplace {
    display: inline-flex;
    width: 100%;
  }
  @media (min-width: 640px) {
    .btn-marketplace { width: auto; }
  }

  /* Avaliações importadas (F06) */
  .avaliacoes-lista {
    display: grid;
    gap: var(--e-4);
  }
  @media (min-width: 768px) {
    .avaliacoes-lista { grid-template-columns: repeat(2, 1fr); }
  }

  .avaliacao-estrelas {
    color: var(--cor-marca);
    letter-spacing: 0.1em;
  }

  .avaliacao-origem {
    display: inline-block;
    color: var(--cor-texto-suave);
  }

  /* Banner de consentimento (F07) */
  .banner-consentimento {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 200;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: none;
    border-block-start: 1px solid var(--cor-borda);
    border-radius: 0;
    padding: var(--e-4);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    box-shadow: var(--sombra);
  }
  .banner-consentimento::backdrop { background: transparent; }

  .banner-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    margin-block-start: var(--e-3);
    align-items: flex-start;
  }
  .banner-acoes > .botao {
    flex: 1 1 12rem;
  }

  .banner-preferencias {
    flex: 1 1 12rem;
  }
  .banner-preferencias summary {
    list-style: none;
    cursor: pointer;
  }
  .banner-preferencias summary::-webkit-details-marker { display: none; }
  .banner-preferencias[open] summary {
    margin-block-end: var(--e-2);
  }

  /* Seções abaixo da dobra (F11): o navegador pula o layout/paint até
     rolar até perto delas. contain-intrinsic-size é obrigatório — sem
     ele a barra de rolagem pula quando o conteúdo real é medido. */
  .abaixo-da-dobra {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
  }
}