/* Big Shoulders Display + Text (SIL Open Font License 1.1), served from the site itself. */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(/assets/fontes/big-shoulders-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(/assets/fontes/big-shoulders-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Big Shoulders Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fontes/big-shoulders-text-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Big Shoulders Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fontes/big-shoulders-text-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Nzah Store — site around the 3D locker room. The shirts bring the colour; the site is the locker room:
   matte black, chalk, one red for actions. Every product hangs from a hook, like on the rack. */

:root {
  --preto: #060607;
  --armario: #0e0e10;
  --banco: #18181b;
  --banco-2: #222226;
  --giz: #f3f1ec;
  --giz-2: #d6d4cf;
  --cinza: #a3a3a8;
  --linha: rgba(243, 241, 236, 0.14);
  --linha-forte: rgba(243, 241, 236, 0.32);
  --vermelho: #e30c0d;
  --vermelho-escuro: #c40b0c;
  --vermelho-claro: #ff4d4e;
  --tinta: #121212;
  --tinta-suave: #55534f;
  --vermelho-giz: #b3090a;
  --display: 'Big Shoulders Display', Impact, 'Arial Narrow', sans-serif;
  --texto: 'Big Shoulders Text', 'Arial Narrow', sans-serif;
  --margem: clamp(16px, 3vw, 44px);
  --margem-esq: max(var(--margem), env(safe-area-inset-left));
  --margem-dir: max(var(--margem), env(safe-area-inset-right));
  --largura: 1360px;
  --topo-h: 68px;
  --raio: 16px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-gaveta: cubic-bezier(0.32, 0.72, 0, 1);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topo-h) + 16px);
  /* the phone buy bar must never cover what has focus */
  scroll-padding-bottom: calc(var(--barra-h, 0px) + 12px);
  background: var(--preto);
}
body {
  margin: 0;
  padding-bottom: var(--barra-h, 0px);
  background: var(--preto);
  color: var(--giz);
  font: 400 17px/1.45 var(--texto);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
img {
  max-width: 100%;
}
a {
  color: inherit;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button {
  touch-action: manipulation;
}
:focus-visible {
  outline: 2px solid var(--vermelho);
  outline-offset: 3px;
}
::selection {
  background: var(--vermelho);
  color: #fff;
}
main:focus {
  outline: none;
}
.leitor {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pular {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 300;
  background: var(--giz);
  color: var(--tinta);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.pular:focus {
  top: 12px;
}
[hidden] {
  display: none !important;
}

/* ---------- layout ---------- */

.secao-in {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem-esq) var(--margem-dir);
}
.secao {
  padding-block: clamp(56px, 8vw, 112px);
}
.secao + .secao:not(.secao-giz):not(.secao-sobre) {
  padding-top: 0;
}
.secao-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(22px, 3vw, 40px);
}
.titulo {
  font: 800 clamp(38px, 4.8vw, 64px)/0.92 var(--display);
  letter-spacing: 0.004em;
  margin: 0;
  text-wrap: balance;
}
.titulo-pagina {
  font: 900 clamp(54px, 8.6vw, 116px)/0.86 var(--display);
  letter-spacing: 0.002em;
  margin: 14px 0 0;
  text-wrap: balance;
}
.nota {
  color: var(--cinza);
  font-size: 15px;
  line-height: 1.45;
  margin: 10px 0 0;
}
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--giz);
  font: 600 17px/1.2 var(--texto);
  text-decoration: underline;
  text-decoration-color: var(--linha-forte);
  text-underline-offset: 6px;
  transition: text-decoration-color 0.2s;
}
.link-seta svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease);
}
.link-seta:hover {
  text-decoration-color: var(--giz);
}
.link-seta:hover svg {
  transform: translateX(3px);
}
.link-sutil {
  color: var(--cinza);
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-sutil:hover {
  color: var(--giz);
}
.secao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

/* ---------- buttons ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 700 17px/1 var(--texto);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 160ms var(--ease);
}
.botao svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.botao:active {
  transform: scale(0.97);
}
.botao-cheio {
  background: var(--vermelho);
  color: #fff;
}
.botao-cheio:hover {
  background: var(--vermelho-escuro);
}
.botao-contorno {
  background: transparent;
  border-color: var(--linha-forte);
  color: var(--giz);
}
.botao-contorno:hover {
  border-color: var(--giz);
}
.botao-contorno-tinta {
  background: transparent;
  border-color: rgba(18, 18, 18, 0.35);
  color: var(--tinta);
}
.botao-contorno-tinta:hover {
  border-color: var(--tinta);
}
.botao-giz {
  background: var(--giz);
  color: var(--tinta);
}
.botao-giz:hover {
  background: #fff;
}
.botao-largo {
  width: 100%;
}
.botao-pequeno {
  min-height: 40px;
  padding: 0 16px;
  font-size: 15px;
}
.botao-pequeno svg {
  width: 18px;
  height: 18px;
}
.icone-botao {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--giz);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, transform 160ms var(--ease);
}
.icone-botao:hover {
  background: var(--banco);
}
.icone-botao:active {
  transform: scale(0.94);
}
.icone-botao svg {
  width: 22px;
  height: 22px;
}

/* ---------- header ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(6, 6, 7, 0.9);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--linha);
}
.topo-in {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--topo-h);
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem-esq) var(--margem-dir);
}
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--giz);
  text-decoration: none;
  flex: none;
}
.marca img {
  width: 44px;
  height: 44px;
  display: block;
}
.marca-nome {
  font: 900 25px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.nav {
  display: flex;
  gap: 2px;
  margin-inline: auto;
}
.nav a {
  padding: 10px 13px;
  border-radius: 999px;
  color: var(--cinza);
  font: 600 17px/1 var(--texto);
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}
.nav a:hover {
  color: var(--giz);
  background: var(--banco);
}
.nav a[aria-current='page'] {
  color: var(--giz);
  background: var(--banco);
}
.topo-acoes {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav + .topo-acoes {
  margin-left: 0;
}
.contador {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--vermelho);
  color: #fff;
  font: 700 12px/19px var(--texto);
  text-align: center;
}
.contador.pulo {
  animation: pulo 420ms var(--ease);
}
@keyframes pulo {
  40% {
    transform: scale(1.35);
  }
}
.menu-botao {
  display: none;
}
.menu {
  position: fixed;
  inset: var(--topo-h) 0 0;
  z-index: 59;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 28px var(--margem-dir) calc(28px + env(safe-area-inset-bottom)) var(--margem-esq);
  background: var(--preto);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s var(--ease), transform 0.32s var(--ease);
}
.menu.aberto {
  opacity: 1;
  transform: none;
}
.menu-grupo {
  display: grid;
}
.menu-titulo {
  margin: 0 0 4px;
  color: var(--cinza);
  font: 700 15px/1 var(--texto);
  letter-spacing: 0.02em;
}
.menu-links {
  display: grid;
}
.menu-links-ajuda .menu-link {
  padding: 10px 0;
  font: 700 21px/1.15 var(--texto);
}
.menu-link {
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
  color: var(--giz);
  font: 800 clamp(34px, 9vw, 52px)/1 var(--display);
  text-decoration: none;
}
.menu-link[aria-current='page'] {
  color: var(--vermelho-claro);
}
.menu-contato {
  display: grid;
  gap: 10px;
  margin-top: auto;
}
body.menu-aberto {
  overflow: hidden;
}

@media (max-width: 1180px) {
  .nav {
    display: none;
  }
  .menu-botao {
    display: grid;
  }
  .topo-acoes {
    margin-left: auto !important;
  }
}
@media (max-width: 640px) {
  :root {
    --topo-h: 60px;
  }
  .so-largo {
    display: none;
  }
  .marca img {
    width: 38px;
    height: 38px;
  }
  .marca-nome {
    font-size: 22px;
  }
}

/* ---------- product card ---------- */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr));
  gap: clamp(22px, 2.6vw, 36px) clamp(12px, 1.6vw, 24px);
}
.cartao {
  position: relative;
  min-width: 0;
}
.cartao-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--raio);
}
.cartao-link:focus-visible {
  outline-offset: 6px;
}
.cartao-foto {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background:
    radial-gradient(110% 80% at 50% 16%, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #17171a 0%, #0c0c0e 100%);
  overflow: hidden;
  transition: border-color 0.3s;
}
.cartao-foto::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 3%;
  height: 7%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.cartao-foto img {
  position: absolute;
  top: 12%;
  left: 9%;
  width: 82%;
  height: 80%;
  object-fit: contain;
  object-position: 50% 0;
  transform-origin: 50% -6%;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.45));
}
.gancho {
  position: absolute;
  top: -1px;
  left: 50%;
  z-index: 1;
  width: 22px;
  height: 13%;
  margin-left: -11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 40' preserveAspectRatio='xMidYMax meet'%3E%3Cpath d='M11 0V22a6 6 0 1 1-6 6' fill='none' stroke='%23c9c8c4' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat 50% 100% / contain;
  opacity: 0.85;
  pointer-events: none;
}
.cartao-link:hover .cartao-foto {
  border-color: var(--linha-forte);
}
@media (hover: hover) {
  .cartao-link:hover .cartao-foto img {
    animation: balanco 1.3s var(--ease);
  }
}
@keyframes balanco {
  0% {
    transform: rotate(0);
  }
  18% {
    transform: rotate(2.6deg);
  }
  42% {
    transform: rotate(-1.7deg);
  }
  64% {
    transform: rotate(0.9deg);
  }
  84% {
    transform: rotate(-0.35deg);
  }
  100% {
    transform: rotate(0);
  }
}
.cartao-esgotado .cartao-foto img {
  filter: grayscale(0.85) brightness(0.62);
}
.cartao-nome {
  margin: 0;
  font: 800 25px/1 var(--display);
  overflow-wrap: anywhere;
}
.cartao-edicao {
  margin: 3px 0 10px;
  color: var(--cinza);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selos {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.selo {
  padding: 6px 9px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: rgba(6, 6, 7, 0.78);
  color: var(--giz);
  font: 700 13px/1 var(--texto);
  white-space: nowrap;
}
.selo-promo {
  border-color: transparent;
  background: var(--vermelho);
  color: #fff;
}
.selo-esgotado {
  border-color: transparent;
  background: var(--giz);
  color: var(--tinta);
}
.selo-ultima {
  border-color: rgba(255, 77, 78, 0.55);
  color: #ffc9c9;
}
.selos-grandes {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
}
.selos-grandes .selo {
  padding: 8px 12px;
  font-size: 15px;
}

/* ---------- prices ---------- */

.preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
  font: 600 16px/1.1 var(--texto);
}
.preco strong {
  font: 800 23px/1 var(--display);
  letter-spacing: 0.01em;
}
.preco-antigo {
  color: var(--cinza);
  font-size: 15px;
  font-weight: 500;
}
.preco-consulta {
  color: var(--cinza);
}
.preco-pix {
  margin: 5px 0 0;
  color: var(--cinza);
  font-size: 14.5px;
}
.preco-grande strong {
  font: 900 clamp(46px, 4.4vw, 58px)/0.9 var(--display);
}
.preco-grande .preco-antigo {
  font-size: 19px;
}
.preco-grande + .preco-pix {
  margin-top: 8px;
  font-size: 17px;
}

/* ---------- home: locker room ---------- */

.inicio-vestiario {
  position: relative;
  background: var(--preto);
}
.inicio-vestiario .nzv,
.js .inicio-vestiario #vestiario {
  height: calc(100svh - var(--topo-h));
  min-height: 540px;
  max-height: 980px;
}
.sem-js {
  padding: 80px var(--margem);
  text-align: center;
  color: var(--cinza);
}

/* collections: three shirts hanging from a rail */
.colecoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.colecao {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 312px;
  padding: 0 22px 22px;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background:
    radial-gradient(80% 50% at 50% 26%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #18181b 0%, #0b0b0d 100%);
  color: var(--giz);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.3s;
}
/* the rail */
.colecao::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 16px;
  right: 16px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #e2e1de, #77767a);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}
.colecao:hover {
  border-color: var(--linha-forte);
}
.colecao-varal {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 230px;
}
.colecao-cabide {
  position: absolute;
  top: 0;
  left: 50%;
  width: 39%;
  transform-origin: 50% 0;
  transform: translateX(calc(-50% + var(--o) * 66%)) rotate(calc(var(--o) * -2.5deg));
  transition: transform 0.6s var(--ease);
}
.colecao-cabide::before {
  content: '';
  display: block;
  width: 16px;
  height: 22px;
  margin: 0 auto -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cpath d='M8 1.5a3.2 3.2 0 1 1-3.2 3.2M8 7.9V21' fill='none' stroke='%23c9c8c4' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
.colecao-cabide img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.55));
}
.colecao-cabide:nth-child(2) {
  z-index: 1;
}
@media (hover: hover) {
  .colecao:hover .colecao-cabide {
    transform: translateX(calc(-50% + var(--o) * 86%)) rotate(calc(var(--o) * 1.2deg));
  }
}
.colecao-nome {
  position: relative;
  z-index: 2;
  font: 900 40px/0.9 var(--display);
}
.colecao-n {
  position: relative;
  z-index: 2;
  margin-top: 6px;
  color: var(--cinza);
  font-size: 16px;
}

/* sideways rail of cards (promotions) */
.trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(214px, 252px);
  gap: 20px;
  margin-inline: calc(var(--margem-esq) * -1) calc(var(--margem-dir) * -1);
  padding: 4px var(--margem-dir) 16px var(--margem-esq);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem-esq) var(--margem-dir);
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
}
.trilho > * {
  scroll-snap-align: start;
}

/* how to buy: chalk "away kit" section, steps as kit numbers */
.secao-giz {
  background: var(--giz);
  color: var(--tinta);
}
.secao-giz .link-seta,
.secao-giz .nota {
  color: var(--tinta-suave);
}
.passos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.passo-n {
  display: block;
  margin-bottom: 18px;
  font: 900 clamp(112px, 12vw, 170px)/0.78 var(--display);
  color: transparent;
  -webkit-text-stroke: 2px var(--tinta);
  text-shadow: 7px 7px 0 var(--vermelho);
}
.passo h3 {
  margin: 0 0 10px;
  font: 800 clamp(26px, 2.4vw, 32px)/1 var(--display);
}
.passo p {
  max-width: 36ch;
  margin: 0;
  color: var(--tinta-suave);
  font-size: 18px;
  line-height: 1.45;
}
.passos-nota {
  max-width: 70ch;
  margin: 36px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(18, 18, 18, 0.16);
  color: var(--tinta-suave);
  font-size: 17px;
}

/* size guide */
.medidas {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.medidas-figura {
  margin: 0;
}
.desenho {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}
.desenho-camisa {
  fill: #141417;
  stroke: var(--giz);
  stroke-width: 2;
  stroke-linejoin: round;
}
.desenho-gola {
  fill: none;
  stroke: var(--giz);
  stroke-width: 1.5;
}
.desenho-costura {
  fill: none;
  stroke: var(--linha-forte);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
}
.desenho-cota path {
  fill: none;
  stroke: var(--vermelho-claro);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.desenho-cota .desenho-guia {
  stroke: var(--linha-forte);
  stroke-width: 1.2;
  stroke-dasharray: 3 5;
}
.desenho text {
  fill: var(--giz);
  font: 700 15px var(--texto);
  letter-spacing: 0.03em;
}
.desenho .desenho-valor {
  fill: var(--vermelho-claro);
  font: 800 21px var(--display);
}
.medidas-texto > p:first-of-type {
  max-width: 52ch;
  color: var(--giz-2);
  font-size: 18px;
  line-height: 1.5;
}
.tamanhos-medida {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 22px 0 0;
}
.tabela {
  width: 100%;
  margin: 18px 0 6px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tabela caption {
  padding-bottom: 8px;
  color: var(--cinza);
  font-size: 15px;
  text-align: left;
}
.tabela th,
.tabela td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--linha);
  font-size: 17px;
  text-align: left;
}
.tabela thead th {
  color: var(--cinza);
  font-size: 15px;
  font-weight: 600;
}
.tabela tbody th {
  font: 800 21px/1 var(--display);
}
.tabela tbody tr {
  transition: background-color 0.2s;
}
.tabela tbody tr[data-ativo] {
  background: rgba(227, 12, 13, 0.14);
  box-shadow: inset 3px 0 0 var(--vermelho);
}
.versoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.painel-medidas[data-oculto] {
  display: none;
}

/* about + the shop's motto */
.secao-sobre {
  overflow: hidden;
}
.sobre {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
}
.sobre-logo {
  justify-self: center;
  width: 100%;
  max-width: 380px;
  height: auto;
  filter: drop-shadow(0 30px 70px rgba(227, 12, 13, 0.2));
}
.sobre-texto p {
  max-width: 52ch;
  margin: 18px 0 0;
  color: var(--giz-2);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
}
.sobre-texto .botao {
  margin-top: 26px;
}
.bordao {
  margin: clamp(56px, 8vw, 120px) 0 0;
  padding-inline: var(--margem-esq) var(--margem-dir);
  color: transparent;
  font: 900 clamp(60px, 11.5vw, 196px)/0.84 var(--display);
  letter-spacing: -0.003em;
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px rgba(243, 241, 236, 0.5);
  text-wrap: balance;
}

/* "didn't find it?" band */
.faixa-whats {
  background: var(--vermelho);
  color: #fff;
}
.faixa-whats-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 40px;
  align-items: center;
  max-width: var(--largura);
  margin-inline: auto;
  padding: clamp(40px, 6vw, 76px) var(--margem-dir) clamp(40px, 6vw, 76px) var(--margem-esq);
}
.faixa-whats h2 {
  margin: 0;
  font: 900 clamp(34px, 4.4vw, 58px)/0.92 var(--display);
  text-wrap: balance;
}
.faixa-whats p {
  margin: 0;
  font-size: 19px;
}
.faixa-whats :focus-visible {
  outline-color: #fff;
}
.faixa-whats-botoes {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  gap: 10px;
}
.faixa-whats .botao {
  min-height: 56px;
  padding-inline: 26px;
  font-size: 18px;
}
.botao-contorno-branco {
  border-color: rgba(255, 255, 255, 0.65);
  background: transparent;
  color: #fff;
}
.botao-contorno-branco:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- footer ---------- */

.rodape {
  border-top: 1px solid var(--linha);
  background: var(--preto);
  color: var(--cinza);
}
.rodape-in {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 36px;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 60px var(--margem-dir) 36px var(--margem-esq);
}
.rodape-marca img {
  display: block;
  width: 76px;
  height: 76px;
}
.rodape-nome {
  margin: 14px 0 4px;
  color: var(--giz);
  font: 900 30px/1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.rodape-marca p:last-child {
  margin: 0;
}
.rodape-col h2 {
  margin: 0 0 16px;
  color: var(--giz);
  font: 700 16px/1 var(--texto);
  letter-spacing: 0.02em;
}
.rodape-col ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rodape-col a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cinza);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.rodape-col a:hover {
  color: var(--giz);
}
.rodape-col svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.rodape-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 20px var(--margem-dir) calc(28px + env(safe-area-inset-bottom)) var(--margem-esq);
  border-top: 1px solid var(--linha);
  font-size: 14.5px;
}
.rodape-base p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
}
.rodape-base svg {
  width: 16px;
  height: 16px;
  margin-right: 7px;
  vertical-align: -3px;
}

/* ---------- list pages ---------- */

.lista-cabeca {
  padding: clamp(26px, 4vw, 52px) 0 clamp(18px, 2.4vw, 28px);
}
.trilha ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--cinza);
  font-size: 15px;
}
.trilha li + li::before {
  content: '/';
  margin-right: 6px;
  color: rgba(243, 241, 236, 0.3);
}
.trilha a {
  color: var(--cinza);
  text-decoration: none;
}
.trilha a:hover {
  color: var(--giz);
  text-decoration: underline;
}
.lista-sub {
  margin: 12px 0 0;
  color: var(--cinza);
  font-size: 18px;
}
.filtros {
  position: sticky;
  top: var(--topo-h);
  z-index: 30;
  border-block: 1px solid var(--linha);
  background: rgba(6, 6, 7, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.filtros-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 12px var(--margem-dir) 12px var(--margem-esq);
}
.chips {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar {
  display: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: transparent;
  color: var(--giz);
  font: 600 16px/1 var(--texto);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover {
  border-color: var(--giz);
}
.chip[aria-pressed='true'],
.chip[aria-current='true'],
.chip[aria-selected='true'] {
  border-color: var(--giz);
  background: var(--giz);
  color: var(--tinta);
}
.chip-n {
  font-size: 13px;
  opacity: 0.62;
}
.filtros-campos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.campo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cinza);
  font-size: 15px;
}
select {
  min-height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
  background: var(--banco)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23f3f1ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 10px center / 16px;
  color: var(--giz);
  font: 600 16px var(--texto);
  appearance: none;
  cursor: pointer;
}
.campo-busca {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.campo-busca svg {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 18px;
  color: var(--cinza);
  pointer-events: none;
}
.campo-busca input {
  width: 230px;
  min-height: 40px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--banco);
  color: var(--giz);
  font: 500 16px var(--texto);
}
.campo-busca input::placeholder {
  color: #85858b;
}
.js .filtros-aplicar {
  display: none;
}
.secao-lista {
  padding-top: clamp(26px, 3vw, 40px);
}
.vazio {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 0;
  text-align: center;
}
.vazio-titulo {
  margin: 0;
  font: 800 38px/1 var(--display);
}
.vazio p {
  color: var(--cinza);
}
.vazio .secao-acoes {
  justify-content: center;
}

/* ---------- product page ---------- */

.produto {
  padding: clamp(18px, 2.4vw, 30px) 0 clamp(40px, 6vw, 80px);
}
.produto-in {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 18px var(--margem-dir) 0 var(--margem-esq);
}
.produto-galeria {
  position: sticky;
  top: calc(var(--topo-h) + 20px);
}
.palco-foto {
  position: relative;
  aspect-ratio: 1 / 1.04;
  border: 1px solid var(--linha);
  border-radius: 24px;
  background:
    radial-gradient(60% 55% at 50% 36%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #19191c 0%, #0a0a0b 100%);
  overflow: hidden;
}
.palco-foto::after {
  content: '';
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 4%;
  height: 6%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.palco-img {
  position: absolute;
  top: 11%;
  left: 10%;
  width: 80%;
  height: 82%;
  object-fit: contain;
  object-position: 50% 0;
  transform-origin: 50% -5%;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.5));
  animation: pendurar 1.5s var(--ease) both;
}
@keyframes pendurar {
  0% {
    transform: translateY(-3%) rotate(1.8deg);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  45% {
    transform: rotate(-1.1deg);
  }
  70% {
    transform: rotate(0.5deg);
  }
  100% {
    transform: none;
  }
}
.gancho-grande {
  width: 34px;
  height: 12%;
  margin-left: -17px;
}
.galeria-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.lados,
.galeria-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.galeria-botoes {
  margin-left: auto;
}
.produto-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.tag {
  padding: 8px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  color: var(--giz);
  font: 600 15px/1 var(--texto);
  text-decoration: none;
}
.tag:hover {
  border-color: var(--giz);
}
.produto-nome {
  margin: 0;
  font: 900 clamp(58px, 6.6vw, 100px)/0.84 var(--display);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.produto-edicao {
  display: block;
  margin-top: 10px;
  color: var(--cinza);
  font: 700 clamp(25px, 2.4vw, 34px)/1.02 var(--display);
}
.produto-preco {
  margin: 26px 0 0;
}
.produto-desc {
  max-width: 46ch;
  margin: 22px 0 0;
  color: var(--giz-2);
  font-size: 18px;
  line-height: 1.5;
}
.compra {
  margin-top: 26px;
}
.tamanhos {
  margin: 0;
  padding: 0;
  border: 0;
}
.tamanhos legend {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
  font: 700 17px var(--texto);
}
.tamanhos-op {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tamanho {
  position: relative;
}
.tamanho input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.tamanho span {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 58px;
  height: 50px;
  padding: 0 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
  font: 800 20px/1 var(--display);
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 160ms var(--ease);
}
.tamanho span:hover {
  border-color: var(--giz);
}
.tamanho span:active {
  transform: scale(0.95);
}
.tamanho input:checked + span {
  border-color: var(--giz);
  background: var(--giz);
  color: var(--tinta);
}
.tamanho input:focus-visible + span {
  outline: 2px solid var(--vermelho);
  outline-offset: 2px;
}
.tamanho-esgotado span {
  border-style: dashed;
  color: #6f6f75;
  text-decoration: line-through;
  cursor: not-allowed;
}
.tamanho-ultima span::after,
.ponto {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vermelho);
}
.ponto {
  position: static;
  display: inline-block;
  margin-right: 8px;
  vertical-align: 1px;
}
.compra.erro .tamanhos-op {
  animation: tremer 360ms var(--ease);
}
@keyframes tremer {
  20%,
  60% {
    transform: translateX(-5px);
  }
  40%,
  80% {
    transform: translateX(5px);
  }
}
.erro-campo:empty {
  display: none;
}
.erro-campo {
  margin: 10px 0 0;
  color: #ff8a8a;
  font-size: 15px;
  font-weight: 600;
}
.compra-botoes {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.compra-botoes .botao {
  min-height: 56px;
  font-size: 18px;
}
.compra-checkout {
  display: inline-block;
  margin-top: 14px;
}
.fichas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 30px 0 0;
  border-top: 1px solid var(--linha);
}
.fichas div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}
.fichas dt {
  color: var(--cinza);
}
.fichas dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.garantias {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.garantias li,
.lista-icones li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--cinza);
  font-size: 16px;
  line-height: 1.45;
}
.garantias svg,
.lista-icones svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--giz);
}
.garantias strong {
  color: var(--giz);
}
.garantias a {
  color: var(--giz);
}
.medidas-produto {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
}
.medidas-produto summary {
  font-weight: 700;
  cursor: pointer;
}
.medidas-produto[open] summary {
  margin-bottom: 4px;
}
.barra-compra {
  display: none;
}

/* ---------- bag ---------- */

.sacola {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.sacola-fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.sacola-painel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  border-left: 1px solid var(--linha);
  background: var(--armario);
  transform: translateX(100%);
  transition: transform 0.42s var(--ease-gaveta);
}
.sacola.aberta .sacola-fundo {
  opacity: 1;
}
.sacola.aberta .sacola-painel {
  transform: none;
}
.sacola-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 14px 22px;
  border-bottom: 1px solid var(--linha);
}
.sacola-topo h2 {
  margin: 0;
  font: 900 34px/1 var(--display);
}
.sacola-topo h2 span {
  color: var(--cinza);
  font-size: 0.7em;
}
.sacola-corpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 22px;
}
.sacola-itens {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sacola-item {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
}
.sacola-item-foto {
  display: block;
  width: 78px;
  height: 96px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1b1b1f, #0d0d0f);
  overflow: hidden;
}
.sacola-item-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px 6px 4px;
}
.sacola-item-nome {
  margin: 0;
  font: 800 21px/1 var(--display);
}
.sacola-item-nome a {
  text-decoration: none;
}
.sacola-item-info {
  margin: 4px 0 10px;
  color: var(--cinza);
  font-size: 15px;
}
.sacola-item-alerta {
  margin: -4px 0 10px;
  color: #ff9a9a;
  font-size: 14px;
}
.qtd {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
}
.qtd button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
.qtd button:disabled {
  opacity: 0.35;
  cursor: default;
}
.qtd svg {
  width: 16px;
  height: 16px;
}
.qtd-n {
  min-width: 22px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sacola-item-lado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
.sacola-item-preco {
  font: 800 21px/1 var(--display);
  white-space: nowrap;
}
.sacola-remover {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--cinza);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sacola-remover:hover {
  color: var(--giz);
}
.sacola-pe {
  display: grid;
  gap: 10px;
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha);
  background: var(--armario);
}
.sacola-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  font: 900 30px/1 var(--display);
}
.sacola-total span:first-child {
  font: 700 18px var(--texto);
  color: var(--cinza);
}
.sacola-pix,
.sacola-nota {
  margin: 0;
  color: var(--cinza);
  font-size: 15px;
}
.sacola-pix strong {
  color: var(--giz);
}
.sacola-limpar {
  justify-self: center;
}
.sacola-vazia {
  padding: 56px 8px;
  text-align: center;
}
.sacola-vazia .cabide-vazio {
  width: 72px;
  height: 72px;
  color: var(--linha-forte);
}
.sacola-vazia p {
  color: var(--cinza);
}
.sacola-vazia .sacola-vazia-acoes {
  justify-content: center;
}
html.sacola-aberta,
html.sacola-aberta body {
  overflow: hidden;
}
.sacola-vazia .titulo-vazio {
  margin: 12px 0 6px;
  color: var(--giz);
  font: 800 30px/1 var(--display);
}

/* toast */
.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(22px + var(--barra-h, 0px) + env(safe-area-inset-bottom));
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 32px);
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  background: var(--giz);
  color: var(--tinta);
  font-weight: 600;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.36s var(--ease);
}
.aviso.aviso-simples {
  padding-right: 18px;
}
.aviso.visivel {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.aviso button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--giz);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

/* ---------- help pages ---------- */

.texto-pagina > .secao-in:first-child {
  padding-top: clamp(26px, 4vw, 52px);
}
.texto-intro {
  max-width: 52ch;
  margin: 20px 0 0;
  color: var(--giz-2);
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.45;
}
.texto-pagina > .secao-in + .secao {
  margin-top: clamp(28px, 4vw, 56px);
}
.texto-pagina > .secao-in + .secao:not(.secao-giz) {
  padding-top: 0;
}
.texto-pagina .secao + .secao:not(.secao-giz) {
  padding-top: clamp(56px, 8vw, 112px);
  border-top: 1px solid var(--linha);
}
.texto-colunas {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(20px, 4vw, 72px);
  align-items: start;
}
.prosa {
  max-width: 62ch;
  color: var(--giz-2);
  font-size: 18px;
  line-height: 1.55;
}
.prosa > p:first-child {
  margin-top: 0;
}
.prosa a {
  color: var(--giz);
}
.prosa h2,
.prosa h3 {
  margin: 34px 0 8px;
  color: var(--giz);
  font: 800 30px/1 var(--display);
}
.lista-icones {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lista-icones li {
  color: var(--giz-2);
  font-size: 18px;
}
.lista-icones strong {
  color: var(--giz);
}
.lista-numerada {
  margin: 0;
  padding-left: 1.3em;
}
.lista-numerada li {
  margin-bottom: 12px;
  padding-left: 4px;
}
.lista-numerada li::marker {
  color: var(--vermelho-claro);
  font: 800 20px var(--display);
}
.perguntas {
  border-top: 1px solid var(--linha);
}
.pergunta {
  border-bottom: 1px solid var(--linha);
}
.pergunta summary {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  font: 700 20px/1.3 var(--texto);
  list-style: none;
  cursor: pointer;
}
.pergunta summary::-webkit-details-marker {
  display: none;
}
.pergunta summary::after {
  content: '+';
  flex: none;
  color: var(--cinza);
  font: 700 28px/0.8 var(--display);
  transition: transform 0.25s var(--ease);
}
.pergunta[open] summary::after {
  transform: rotate(45deg);
}
.pergunta p {
  max-width: 62ch;
  margin: 0 0 22px;
  color: var(--giz-2);
  font-size: 18px;
  line-height: 1.5;
}
.pergunta a {
  color: var(--giz);
}
.nao-achou {
  padding: clamp(56px, 10vw, 140px) 0;
}
.nao-achou-n {
  margin: 0;
  color: transparent;
  font: 900 clamp(120px, 24vw, 320px)/0.78 var(--display);
  -webkit-text-stroke: 2px var(--linha-forte);
}
.nao-achou p:not(.nao-achou-n) {
  max-width: 48ch;
  color: var(--giz-2);
  font-size: 19px;
}

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .medidas,
  .sobre,
  .texto-colunas,
  .produto-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .produto-galeria {
    position: static;
  }
  .palco-foto {
    aspect-ratio: 1 / 1;
    max-height: min(64svh, 620px);
    width: 100%;
  }
  .sobre-logo {
    max-width: 260px;
  }
  .passos {
    grid-template-columns: minmax(0, 1fr);
  }
  .passo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 22px;
    align-items: start;
  }
  .passo-n {
    grid-row: span 2;
    margin: 0;
    font-size: 104px;
  }
  .rodape-in {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rodape-marca {
    grid-column: 1 / -1;
  }
  .barra-compra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px var(--margem-dir) calc(10px + env(safe-area-inset-bottom)) var(--margem-esq);
    border-top: 1px solid var(--linha);
    background: rgba(14, 14, 16, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transform: translateY(110%);
    transition: transform 0.34s var(--ease);
  }
  .barra-compra[data-visivel] {
    transform: none;
  }
  .barra-nome {
    margin: 0;
    font: 800 20px/1 var(--display);
  }
  .barra-preco {
    margin: 2px 0 0;
    color: var(--cinza);
    font-size: 15px;
  }
}
@media (max-width: 700px) {
  .faixa-whats-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .faixa-whats-botoes {
    grid-column: auto;
    grid-row: auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: 14px;
  }
  .filtros-in {
    gap: 10px;
  }
  .chips {
    width: calc(100% + var(--margem-esq) + var(--margem-dir));
    margin-inline: calc(var(--margem-esq) * -1) calc(var(--margem-dir) * -1);
    padding-inline: var(--margem-esq) var(--margem-dir);
  }
  .filtros-campos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
  }
  .campo-busca {
    grid-column: 1 / -1;
  }
  .campo-busca input {
    width: 100%;
  }
  .campo {
    justify-content: space-between;
  }
  .campo select {
    flex: 1;
  }
  .grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cartao-nome {
    font-size: 22px;
  }
  .colecao {
    min-height: 290px;
  }
  .fichas {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .sacola-painel {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 90svh;
    border-left: 0;
    border-top: 1px solid var(--linha);
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
  }
  .secao-cabeca .link-seta {
    font-size: 16px;
  }
}

/* ---------- header: "Ajuda" menu ---------- */

.nav {
  align-items: center;
}
.nav a {
  padding: 10px 11px;
}
.nav-mais {
  position: relative;
}
.nav-mais summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 999px;
  color: var(--cinza);
  font: 600 17px/1 var(--texto);
  list-style: none;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.nav-mais summary::-webkit-details-marker {
  display: none;
}
.nav-mais summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.nav-mais[open] summary::after {
  transform: translateY(1px) rotate(-135deg);
}
.nav-mais summary:hover,
.nav-mais[open] summary,
.nav-mais[data-atual] summary {
  background: var(--banco);
  color: var(--giz);
}
.nav-mais-lista {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2;
  display: grid;
  min-width: 250px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--linha-forte);
  border-radius: 16px;
  background: var(--armario);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
  list-style: none;
}
.nav .nav-mais-lista a {
  display: block;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--giz-2);
}
.nav .nav-mais-lista a:hover,
.nav .nav-mais-lista a[aria-current='page'] {
  background: var(--banco);
  color: var(--giz);
}

/* ---------- hearts ---------- */

.favoritar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: rgba(6, 6, 7, 0.72);
  color: var(--giz);
  cursor: pointer;
  transition: transform 160ms var(--ease), background-color 0.2s;
}
.favoritar svg {
  width: 20px;
  height: 20px;
}
.favoritar:active,
.favoritar-grande:active svg {
  transform: scale(0.88);
}
.favoritar[aria-pressed='true'] {
  border-color: var(--giz);
  background: var(--giz);
}
.favoritar[aria-pressed='true'] svg path,
.favoritar-grande[aria-pressed='true'] svg path {
  fill: var(--vermelho);
  stroke: var(--vermelho);
}
.favoritar-grande svg {
  transition: transform 160ms var(--ease);
}

/* ---------- search ---------- */

.busca {
  position: fixed;
  inset: 0;
  z-index: 110;
}
.busca-fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}
.busca-painel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100% - 32px));
  max-height: calc(100svh - 2 * clamp(16px, 9vh, 100px));
  margin: clamp(16px, 9vh, 100px) auto 0;
  border: 1px solid var(--linha-forte);
  border-radius: 20px;
  background: var(--armario);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  transition: opacity 0.2s var(--ease), transform 0.3s var(--ease);
}
.busca.aberta .busca-painel {
  opacity: 1;
  transform: none;
}
html.busca-aberta {
  overflow: hidden;
}
.busca-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 18px;
  border-bottom: 1px solid var(--linha);
}
.busca-form:focus-within {
  box-shadow: inset 0 -2px 0 var(--vermelho);
}
.busca-form > svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--cinza);
}
.busca-form input {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  border: 0;
  background: none;
  color: var(--giz);
  font: 600 20px var(--texto);
  outline: none;
}
.busca-form input::placeholder {
  color: #85858b;
}
.busca-fechar {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: none;
  color: var(--giz);
  font-weight: 600;
  cursor: pointer;
}
.busca-lista {
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.busca-lista:empty {
  display: none;
}
.busca-lista a {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--giz);
  text-decoration: none;
}
.busca-lista [aria-selected='true'] a,
.busca-lista a:hover {
  background: var(--banco);
}
.busca-foto {
  display: grid;
  place-items: center;
  width: 56px;
  height: 64px;
  border-radius: 10px;
  background: linear-gradient(180deg, #1b1b1f, #0d0d0f);
}
.busca-foto img {
  width: 48px;
  height: 56px;
  object-fit: contain;
}
.busca-nome {
  font: 800 20px/1.05 var(--display);
}
.busca-nome small {
  display: block;
  margin-top: 3px;
  color: var(--cinza);
  font: 500 14px/1.2 var(--texto);
}
.busca-preco {
  font: 800 18px var(--display);
  white-space: nowrap;
}
.busca-status {
  margin: 0;
  padding: 12px 18px 0;
  color: var(--cinza);
  font-size: 15px;
}
.busca-status:empty {
  display: none;
}
.busca-status a {
  color: var(--giz);
}
.busca-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px 18px;
}
@media (max-width: 640px) {
  .busca-painel {
    width: 100%;
    height: 100svh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
}

/* ---------- favourites, recently viewed ---------- */

.favoritos-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 28px;
}
.favoritos-acoes .lista-sub,
.favoritos-acoes .secao-acoes {
  margin: 0;
}
.vazio-icone svg {
  width: 56px;
  height: 56px;
  color: var(--linha-forte);
}
button.link-sutil {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.secao-vistos .secao-cabeca {
  align-items: center;
}
.cartao-visto .cartao-edicao {
  margin-bottom: 0;
}

/* ---------- teams ---------- */

.times-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.time {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 0 18px 16px;
  border: 1px solid var(--linha);
  border-radius: 18px;
  background:
    radial-gradient(80% 50% at 50% 24%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #17171a 0%, #0c0c0e 100%);
  color: var(--giz);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.3s;
}
.time::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #d6d5d2, #6f6e72);
}
.time:hover {
  border-color: var(--linha-forte);
}
.time-fotos {
  position: relative;
  display: block;
  height: 118px;
  margin: 0 -18px;
}
.time-fotos img {
  position: absolute;
  top: 22px;
  left: 50%;
  width: 38%;
  height: auto;
  transform-origin: 50% 0;
  transform: translateX(calc(-50% + var(--o) * 62%)) rotate(calc(var(--o) * -3deg));
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55));
  transition: transform 0.5s var(--ease);
}
.time-fotos img:nth-child(2) {
  z-index: 1;
}
@media (hover: hover) {
  .time:hover .time-fotos img {
    transform: translateX(calc(-50% + var(--o) * 84%)) rotate(calc(var(--o) * 1deg));
  }
}
.time-nome {
  position: relative;
  margin-top: auto;
  font: 900 28px/0.95 var(--display);
  overflow-wrap: anywhere;
}
.time-n {
  margin-top: 5px;
  color: var(--cinza);
  font-size: 14.5px;
}
.times-grupo {
  scroll-margin-top: calc(var(--topo-h) + 12px);
}

/* ---------- forms (size finder, special order, contact) ---------- */

.formulario {
  display: grid;
  gap: 18px;
  align-content: start;
}
.formulario fieldset {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.formulario legend {
  margin-bottom: 8px;
  padding: 0;
  font: 800 26px/1 var(--display);
}
.campo-form {
  display: grid;
  gap: 8px;
  color: var(--giz);
  font-size: 16px;
  font-weight: 600;
}
.campo-form small {
  color: var(--cinza);
  font-weight: 400;
}
.formulario input:not([type='radio']):not([type='checkbox']),
.formulario select,
.formulario textarea {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
  background-color: var(--banco);
  color: var(--giz);
  font: 500 17px var(--texto);
}
.formulario select {
  padding-right: 38px;
}
.formulario textarea {
  min-height: 104px;
  resize: vertical;
}
.formulario :is(input, select, textarea)::placeholder {
  color: #85858b;
}
.formulario :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--vermelho);
  outline-offset: 1px;
}
.formulario [aria-invalid='true'] {
  border-color: #ff8a8a;
}
.campos-dupla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.campo-cm {
  position: relative;
  display: block;
}
.formulario .campo-cm input {
  padding-right: 48px;
}
.campo-cm > span {
  position: absolute;
  top: 50%;
  right: 16px;
  color: var(--cinza);
  transform: translateY(-50%);
  pointer-events: none;
}
.formulario .opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.opcoes legend {
  width: 100%;
}
.opcoes label {
  position: relative;
}
.opcoes input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.opcoes span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.opcoes input:checked + span {
  border-color: var(--giz);
  background: var(--giz);
  color: var(--tinta);
}
.opcoes input:focus-visible + span {
  outline: 2px solid var(--vermelho);
  outline-offset: 2px;
}

/* size finder */
.provador {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
.provador-figura {
  position: sticky;
  top: calc(var(--topo-h) + 24px);
}
.provador-resultado {
  margin-top: 32px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--linha-forte);
  border-radius: 22px;
  background: linear-gradient(180deg, #19191c, #0c0c0e);
}
.provador-resultado:focus {
  outline: none;
}
.resultado-versoes {
  display: grid;
  margin: 14px 0 6px;
  padding: 0;
  list-style: none;
}
.resultado-versao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'nome tam' 'info tam';
  align-items: center;
  gap: 4px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
}
.resultado-nome {
  grid-area: nome;
  font: 700 19px var(--texto);
}
.resultado-info {
  grid-area: info;
  color: var(--cinza);
  font-size: 15px;
}
/* the size as a kit number */
.resultado-tamanho {
  grid-area: tam;
  color: transparent;
  font: 900 64px/0.85 var(--display);
  -webkit-text-stroke: 1.6px var(--giz);
  text-shadow: 4px 4px 0 var(--vermelho);
}
.resultado-fora .resultado-tamanho {
  -webkit-text-stroke-color: var(--cinza);
  text-shadow: none;
}
.tamanhos-op {
  row-gap: 14px;
}
.tamanho-seu span {
  border-color: var(--vermelho-claro);
}
.tamanho-seu span::before {
  content: 'seu';
  position: absolute;
  bottom: -9px;
  left: 50%;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--vermelho);
  color: #fff;
  font: 700 11px/1.3 var(--texto);
  transform: translateX(-50%);
}
.seu-tamanho a {
  color: var(--giz);
}

/* contact */
.canais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.canal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'icone nome' 'icone valor' 'texto texto';
  gap: 4px 16px;
  height: 100%;
  padding: 22px;
  border: 1px solid var(--linha);
  border-radius: 20px;
  background: linear-gradient(180deg, #17171a, #0c0c0e);
  color: var(--giz);
  text-decoration: none;
  transition: border-color 0.3s;
}
.canal:hover {
  border-color: var(--linha-forte);
}
.canal-icone {
  grid-area: icone;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--banco);
}
.canal-icone svg {
  width: 25px;
  height: 25px;
}
.canal-nome {
  grid-area: nome;
  align-self: end;
  color: var(--cinza);
  font-size: 15px;
  font-weight: 600;
}
.canal-valor {
  grid-area: valor;
  font: 800 24px/1.1 var(--display);
  overflow-wrap: anywhere;
}
.canal-longo .canal-valor {
  font-size: 19px;
  overflow-wrap: anywhere;
}
.canal-texto {
  grid-area: texto;
  margin-top: 12px;
  color: var(--cinza);
  font-size: 15px;
}

.chip-remover {
  gap: 10px;
  border-color: var(--giz);
  background: var(--giz);
  color: var(--tinta);
}
.chip-remover span {
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 960px) {
  .provador {
    grid-template-columns: minmax(0, 1fr);
  }
  .provador-figura {
    position: static;
    max-width: 380px;
    margin-inline: auto;
  }
}
@media (max-width: 560px) {
  .campos-dupla {
    grid-template-columns: minmax(0, 1fr);
  }
  .times {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .time {
    min-height: 190px;
    padding-inline: 14px;
  }
  .time-nome {
    font-size: 24px;
  }
}

/* ---------- page transitions: the card's shirt flies into its product page ---------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
}
::view-transition-group(foto-produto) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.palco-img[data-lado='frente'] {
  view-transition-name: foto-produto;
}
.cartao-clicado .palco-img[data-lado='frente'] {
  view-transition-name: none;
}
.chegou-com-transicao .palco-img {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}