@layer layout {
  header,
  .topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
    margin-bottom: var(--espaco-4);
  }

  nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    list-style: none;
    margin: 0 0 var(--espaco-4);
    padding: 0;
  }

  nav li {
    min-width: 0;
  }

  #atalhos button,
  #categorias button,
  .faixa-atalhos button,
  .faixa-categorias button {
    min-height: var(--alvo);
  }

  #grade,
  .grade-moldes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--gap);
    align-items: stretch;
  }

  #grade > *,
  .grade-moldes > * {
    min-width: 0;
  }

  @media (min-width: 720px) {
    #grade,
    .grade-moldes {
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
  }

  @media (min-width: 1100px) {
    #grade,
    .grade-moldes {
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
  }

  @media (min-width: 1440px) {
    body {
      padding: var(--espaco-pad-largo);
    }

    #grade,
    .grade-moldes {
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }
  }

  @media (max-width: 699px) {
    body {
      padding: var(--espaco-pad-estreito);
    }

    header,
    .topo {
      margin-bottom: var(--espaco-2-2);
      gap: var(--espaco-gap-estreito);
    }

    #atalhos,
    #categorias,
    .faixa-atalhos,
    .faixa-categorias {
      position: relative;
      max-width: 100%;
      min-width: 0;
    }

    #atalhos::after,
    #categorias::after,
    .faixa-atalhos::after,
    .faixa-categorias::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 2.4rem;
      height: calc(100% - var(--espaco-2-2));
      pointer-events: none;
      background: linear-gradient(to left, var(--cor-esmaecer), transparent);
      z-index: var(--camada-esmaecer);
    }

    #atalhos ul,
    #categorias ul,
    .faixa-atalhos ul,
    .faixa-categorias ul {
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      /* respiro do anel por dentro (padding) devolvido por margem negativa em cima e à esquerda:
         os botões ficam onde estavam (alinhados à margem da página) e a borda direita não muda */
      max-width: calc(100% + var(--foco-respiro));
      margin: calc(-1 * var(--foco-respiro)) 0 calc(var(--espaco-2-2) - var(--sombra-deslocamento)) calc(-1 * var(--foco-respiro));
      padding: var(--foco-respiro);
      scroll-snap-type: x mandatory;
      scroll-padding: var(--foco-respiro);
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    #atalhos ul::-webkit-scrollbar,
    #categorias ul::-webkit-scrollbar,
    .faixa-atalhos ul::-webkit-scrollbar,
    .faixa-categorias ul::-webkit-scrollbar {
      display: none;
      height: 0;
    }

    #atalhos li,
    #categorias li,
    .faixa-atalhos li,
    .faixa-categorias li {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }

    /* margem de item flex sempre entra na área rolável; o padding final do contêiner nem sempre.
       O último item encaixa pelo fim: o "start" dele fica além da rolagem máxima e o encaixe
       obrigatório voltava para o item anterior, deixando o botão focado (e o anel) para fora. */
    #atalhos li:last-child,
    #categorias li:last-child,
    .faixa-atalhos li:last-child,
    .faixa-categorias li:last-child {
      margin-inline-end: var(--foco-respiro);
      scroll-snap-align: end;
    }
  }
}