/*
 * Tema Estilo Social (da plataforma Checkout Rapido): o visual do site da
 * Estilo Social (as medidas, as cores, os raios e os pontos de quebra do
 * store.css, do updates.css e do CSS das paginas dele: celular ate 767 px,
 * o menu do centro a partir de 1101 px), reescrito sobre as variaveis do
 * tema (snippets/variaveis). As classes do tema comecam por eso-; as da
 * plataforma (a faixa legal, o banner de cookies) sao vt-.
 *
 * O padrao de celular da plataforma (10A.18): nada mais largo que a tela a
 * 360 px, o toque de 44 px em todo controle, as fotos com a proporcao
 * reservada, as listas com duas colunas, as tabelas que rolam na propria
 * caixa e o espaco da barra fixa livre no fim da pagina.
 */

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.eso-sem-rolagem {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--eso-fundo);
  color: var(--eso-texto);
  font-family: var(--eso-fonte-texto);
  font-weight: var(--eso-peso-texto);
  font-size: var(--eso-tamanho);
  line-height: calc(var(--eso-entrelinha) / 100);
  overflow-wrap: break-word;
}

/* O espaco da barra fixa fica livre no fim da pagina (padrao 10A.18, item 4): a faixa legal e o rodape nunca ficam por baixo dela */
body:has(.eso-barra-fixa) {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

img,
svg,
video {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  touch-action: manipulation;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--eso-fonte-titulo);
  font-weight: var(--eso-peso-titulo);
  overflow-wrap: anywhere;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--eso-destaque);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.eso-so-leitor {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.eso-sem-js .eso-so-com-js,
.eso-com-js .eso-so-sem-js {
  display: none !important;
}

/* O botao da tabela (so com JS) guarda o lugar antes do JS rodar: a compra embaixo dele nao pula quando ele aparece */
.eso-sem-js .eso-compra__medidas.eso-so-com-js {
  display: flex !important;
  visibility: hidden;
}

.eso-pular {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 16px;
  padding: 12px;
  background: #111111;
  color: #ffffff;
  transform: translateY(-200%);
}

.eso-pular:focus {
  transform: translateY(0);
}

.eso-conteudo:focus {
  outline: 0;
}

[id] {
  scroll-margin-top: calc(var(--eso-altura-cabecalho, 0px) + 24px);
}

/* Os trilhos que rolam de lado sao o bloco de posicao do que esta dentro (o texto so do leitor nao escapa para a pagina) */
.eso-banner__trilho,
.eso-packs__trilho,
.eso-packs__trilho > li,
.eso-galeria__trilho,
.eso-galeria__foto,
.eso-galeria__miniaturas a,
.eso-colecao-fotos__trilho,
.eso-colecao-fotos__cartao,
.eso-avaliacao,
.eso-videos__lista,
.eso-video {
  position: relative;
}

.eso-icone {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eso-icone--cheio {
  fill: currentColor;
  stroke: none;
}

.eso-ilustracao {
  display: block;
  width: 100%;
  height: 100%;
  background: #f0eee9;
  fill: #c9c6bd;
}

.eso-largura {
  width: 100%;
  max-width: calc(var(--eso-largura) + 60px);
  margin: 0 auto;
  padding: 0 30px;
}

.eso-largura--larga {
  max-width: calc(var(--eso-largura) + 120px);
}

.eso-largura--estreita {
  padding: 0 25px;
}

.eso-largura--produto {
  max-width: calc(var(--eso-largura) + 100px);
}

.eso-secao {
  padding-top: var(--eso-pt, 0px);
  padding-bottom: var(--eso-pb, 0px);
  background: var(--eso-fundo-secao, transparent);
}

.eso-sobretitulo {
  display: block;
  color: #777777;
  font-size: 12px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

.eso-sobretitulo--esquerda {
  text-align: left;
}

.eso-sobretitulo--escuro {
  color: var(--eso-texto);
  font-size: 11px;
}

.eso-cabecalho-de-secao {
  margin-bottom: 35px;
  text-align: center;
}

.eso-titulo-de-secao {
  margin: 12px 0 14px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -1.4px;
}

.eso-titulo-de-secao--menor {
  font-size: 28px;
  letter-spacing: -0.8px;
}

.eso-cabecalho-de-secao p {
  color: #666666;
  font-size: 16px;
}

.eso-titulo-grande {
  margin: 18px 0 0;
  font-family: var(--eso-fonte-titulo);
  font-size: clamp(36px, 5vw, 62px);
  font-weight: var(--eso-peso-titulo);
  line-height: 1.05;
  letter-spacing: -2px;
}

.eso-texto-rico p + p {
  margin-top: 12px;
}

.eso-texto-rico a {
  text-decoration: underline;
}

.eso-texto-rico ul,
.eso-texto-rico ol {
  margin: 10px 0;
  padding-left: 20px;
}

.eso-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--eso-altura-botao);
  padding: 13px 22px;
  border: 0;
  border-radius: var(--eso-raio-botao);
  background: var(--eso-botao);
  color: var(--eso-botao-texto);
  font-size: var(--eso-texto-botao);
  font-weight: 600;
  letter-spacing: var(--eso-letras-botao);
  text-transform: var(--eso-caixa-botao);
  text-align: center;
  cursor: pointer;
}

.eso-botao:hover {
  background: var(--eso-botao-passar);
}

.eso-botao--largo {
  width: 100%;
  gap: 0.28em;
}

.eso-botao[aria-busy='true'],
.eso-compra__botao[aria-busy='true'] {
  opacity: 0.6;
  pointer-events: none;
}

.eso-link-sublinhado {
  position: relative;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid #aaaaaa;
  background: transparent;
  color: #555555;
  font-size: 13px;
  cursor: pointer;
}

/* O toque de 44 px no link sublinhado, sem mudar o desenho */
.eso-link-sublinhado::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: 44px;
  transform: translate(-50%, -50%);
}

.eso-link-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: #333333;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.eso-campo {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d6d6cf;
  border-radius: 4px;
  background: #ffffff;
  color: #111111;
  font-size: 14px;
}

.eso-rotulo {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.eso-rotulo span {
  color: #777777;
  font-weight: 400;
}

.eso-rotulo--fio {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eso-rotulo--fio::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--eso-borda);
}

.eso-aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 5px;
  background: var(--eso-superficie);
  color: #333333;
  font-size: 13px;
  line-height: 1.5;
}

.eso-aviso .eso-icone {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.eso-aviso a {
  text-decoration: underline;
}

.eso-aviso--erro {
  background: transparent;
  padding: 0;
  color: var(--eso-erro);
}

.eso-aviso--ok {
  color: var(--eso-sucesso);
}

.eso-vazio {
  max-width: 550px;
  margin: 30px auto;
  text-align: center;
}

.eso-vazio__titulo {
  margin-bottom: 10px;
  font-family: var(--eso-fonte-titulo);
  font-size: 22px;
  font-weight: var(--eso-peso-titulo);
}

.eso-vazio p {
  color: #777777;
  font-size: 14px;
}

.eso-vazio .eso-botao {
  margin-top: 20px;
}

.eso-vazio-do-editor {
  padding: 30px;
  border: 1px dashed #bbbbbb;
  color: #777777;
  font-size: 14px;
  text-align: center;
}

.eso-faixa-legal {
  clear: both;
}

.eso-redondo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eeeeee;
  color: #111111;
  cursor: pointer;
}

.eso-redondo--escuro {
  border: 1px solid #dddddd;
  background: #111111;
  color: #ffffff;
}

.eso-redondo:disabled {
  opacity: 0.3;
  cursor: default;
}

.eso-redondo .eso-icone {
  width: 20px;
  height: 20px;
}

/* ------------------------------------------------------------------ */
/* Cabecalho                                                           */
/* ------------------------------------------------------------------ */

.eso-cabecalho-faixa {
  background: var(--eso-fundo-secao, var(--eso-fundo));
}

.eso-cabecalho-faixa--fio {
  border-bottom: 1px solid #eeeeee;
}

.eso-secao-cabecalho:has(.eso-cabecalho-faixa--fixo) {
  position: sticky;
  z-index: 40;
  top: 0;
}

.eso-cabecalho {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px 20px;
  max-width: 1330px;
  margin: 0 auto;
  padding: 23px 30px;
}

.eso-marca__h1 {
  min-width: 0;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.eso-marca {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  color: var(--eso-texto);
}

.eso-marca__nome {
  font-family: var(--eso-fonte-titulo);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1.2px;
  text-transform: var(--eso-caixa-marca);
  overflow-wrap: anywhere;
}

.eso-marca__nome strong {
  font-weight: 900;
}

.eso-marca__nome span {
  margin-left: 5px;
}

.eso-marca__slogan {
  display: block;
  margin-top: 8px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2.3px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.eso-marca__logo {
  display: block;
  width: var(--eso-logo);
  max-width: 100%;
  height: auto;
}

.eso-menu {
  flex-shrink: 0;
}

.eso-menu__botao {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  color: #111111;
  list-style: none;
  cursor: pointer;
}

.eso-menu__botao::-webkit-details-marker {
  display: none;
}

.eso-menu__fundo {
  position: fixed;
  z-index: 60;
  inset: 0;
  background: rgb(0 0 0 / 0.4);
}

.eso-menu__painel {
  position: fixed;
  z-index: 61;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(390px, 90vw);
  padding: 30px;
  overflow-y: auto;
  background: #ffffff;
  color: #111111;
  box-shadow: -10px 0 40px rgb(0 0 0 / 0.13);
}

.eso-menu__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 35px;
}

.eso-menu__topo strong {
  min-width: 0;
  font-size: 16px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.eso-menu__fechar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111111;
  cursor: pointer;
}

.eso-menu__lista,
.eso-menu__lista ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.eso-menu__lista a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 18px 0;
  border-bottom: 1px solid #eeeeee;
  font-size: 17px;
}

.eso-menu__lista ul a {
  padding-left: 16px;
  font-size: 15px;
  color: #555555;
}

.eso-cabecalho__menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
}

.eso-cabecalho__menu ul {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eso-cabecalho__menu a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.eso-cabecalho__menu a:hover,
.eso-cabecalho__menu a[aria-current='page'] {
  border-color: #111111;
}

.eso-cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.eso-cabecalho__todos {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #111111;
  font-size: 13px;
  white-space: nowrap;
}

.eso-carrinho-botao {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  min-height: 44px;
  padding: 12px 15px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  background: #ffffff;
  color: #111111;
  font-size: 13px;
  white-space: nowrap;
}

.eso-carrinho-botao .eso-contador {
  display: flex;
}

.eso-contador > span[aria-hidden] {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 10px;
  background: #111111;
  color: #ffffff;
  font-size: 11px;
}

/* No produto, o cabecalho do produto do site: "Todos os produtos" e os links a direita, o menu e o carrinho */
.eso-cabecalho--produto {
  justify-content: space-between;
  column-gap: 12px;
}

.eso-cabecalho--produto .eso-cabecalho__acoes {
  display: contents;
}

.eso-cabecalho--produto .eso-cabecalho__todos {
  order: 1;
  margin-left: auto;
  margin-right: 18px;
}

.eso-cabecalho--produto .eso-cabecalho__menu {
  position: static;
  order: 2;
  transform: none;
}

.eso-cabecalho--produto .eso-cabecalho__menu ul {
  gap: 30px;
}

.eso-cabecalho--produto .eso-menu {
  order: 3;
}

.eso-cabecalho--produto .eso-carrinho-botao {
  order: 4;
}

@media (max-width: 1100px) {
  .eso-cabecalho__menu {
    display: none;
  }
}

@media (max-width: 767px) {
  .eso-cabecalho {
    gap: 12px;
    padding: 17px 20px;
  }

  .eso-marca__nome {
    font-size: 24px;
  }

  .eso-marca__logo {
    width: var(--eso-logo-celular);
  }

  .eso-menu {
    margin-left: auto;
  }

  .eso-cabecalho__acoes {
    margin-left: 0;
  }

  .eso-cabecalho__todos {
    display: none;
  }

  .eso-carrinho-botao {
    padding: 9px 10px;
    font-size: 12px;
  }
}

@media (max-width: 374px) {
  .eso-cabecalho {
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px;
  }

  .eso-marca__nome {
    font-size: 21px;
  }

  .eso-marca__slogan {
    letter-spacing: 1.6px;
  }

  .eso-menu__botao {
    width: 44px;
    height: 44px;
    padding: 10px;
  }
}

/* ------------------------------------------------------------------ */
/* Banner                                                              */
/* ------------------------------------------------------------------ */

.eso-banner__caixa {
  position: relative;
  display: block;
  max-width: var(--eso-largura);
  margin: 0 auto;
}

.eso-banner--total .eso-banner__caixa {
  max-width: none;
}

.eso-banner__trilho {
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.eso-banner__trilho::-webkit-scrollbar {
  display: none;
}

.eso-banner__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.eso-banner__link {
  display: block;
}

.eso-banner__link:focus-visible {
  outline: 3px solid #222222;
  outline-offset: 3px;
}

.eso-banner__slide picture {
  display: block;
}

.eso-banner__imagem {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: var(--eso-foco, 50% 50%);
}

/* Sem as medidas do arquivo (a imagem de tamanho unico), a proporcao fica reservada */
.eso-banner__imagem:not([height]) {
  aspect-ratio: 1270 / 450;
}

.eso-banner__texto {
  position: absolute;
  left: 8%;
  bottom: 12%;
  max-width: 40%;
}

.eso-banner__titulo {
  margin-bottom: 18px;
  font-size: clamp(24px, 3.4vw, 46px);
  line-height: 1.1;
}

.eso-banner__pontos {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding-top: 8px;
}

.eso-banner__pontos button {
  position: relative;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.eso-banner__pontos button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #c3c3c3;
  transform: translate(-50%, -50%);
}

.eso-banner__pontos button[aria-current='true']::before {
  width: 30px;
  background: #000000;
}

@media (max-width: 767px) {
  .eso-banner__midia--com-celular .eso-banner__imagem:not([height]) {
    aspect-ratio: 1000 / 1370;
  }

  .eso-banner__texto {
    left: 20px;
    right: 20px;
    max-width: none;
  }
}

/* ------------------------------------------------------------------ */
/* Escolha sua cor e a lista de colecoes                               */
/* ------------------------------------------------------------------ */

.eso-cores__grade,
.eso-colecoes__grade {
  display: grid;
  grid-template-columns: repeat(var(--eso-colunas, 4), minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eso-cor a,
.eso-colecao a {
  display: block;
}

.eso-cor__foto,
.eso-colecao__arte {
  display: block;
  aspect-ratio: 4 / 4.5;
  overflow: hidden;
  background: #f0eee9;
}

.eso-cor__foto img,
.eso-colecao__arte img,
.eso-colecao__arte svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.eso-cor a:hover img,
.eso-colecao a:hover img {
  transform: scale(1.03);
}

.eso-cor__legenda,
.eso-colecao__legenda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
}

.eso-cor__nome,
.eso-colecao__nome {
  display: block;
  font-family: var(--eso-fonte-titulo);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.eso-cor__link,
.eso-colecao__link {
  color: #666666;
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .eso-cor__legenda,
  .eso-colecao__legenda {
    display: block;
  }

  .eso-cor__link,
  .eso-colecao__link {
    display: block;
    margin-top: 7px;
  }
}

@media (max-width: 767px) {
  .eso-cores,
  .eso-colecoes {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .eso-cores .eso-largura,
  .eso-colecoes .eso-largura {
    padding: 0 20px;
  }

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

  .eso-cor__foto,
  .eso-colecao__arte {
    aspect-ratio: 3 / 4;
  }

  .eso-cor__nome,
  .eso-colecao__nome {
    font-size: 16px;
    line-height: 1.2;
  }

  .eso-cor__link,
  .eso-colecao__link {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .eso-cor__nome,
  .eso-colecao__nome {
    font-size: 14px;
  }

  .eso-cor__link,
  .eso-colecao__link {
    font-size: 11px;
  }
}

/* ------------------------------------------------------------------ */
/* Texto institucional (a abertura "01 / Camisas sociais")             */
/* ------------------------------------------------------------------ */

.eso-texto-institucional__grade {
  max-width: var(--eso-largura);
}

.eso-texto-institucional--fio .eso-texto-institucional__grade {
  border-top: 1px solid #e5e5e5;
  padding-top: var(--eso-pt, 0px);
}

.eso-texto-institucional--fio {
  padding-top: 0;
}

.eso-texto-institucional--centro {
  text-align: center;
}

.eso-texto-institucional--duas-colunas .eso-texto-institucional__grade {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: end;
  gap: 70px;
}

.eso-texto-institucional .eso-sobretitulo {
  text-align: inherit;
}

.eso-texto-institucional--duas-colunas .eso-sobretitulo {
  text-align: left;
}

.eso-texto-institucional__texto {
  font-size: 16px;
  line-height: 1.5;
}

.eso-texto-institucional__texto .eso-texto-rico {
  max-width: 390px;
  margin: 0 0 24px;
  color: #5c5c5c;
  font-size: 18px;
  line-height: 1.6;
}

.eso-texto-institucional--centro .eso-texto-rico {
  margin: 20px auto 24px;
}

.eso-texto-institucional .eso-link-sublinhado {
  display: inline;
  padding-bottom: 6px;
  border-bottom-color: #111111;
  color: #111111;
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .eso-texto-institucional .eso-largura {
    padding-left: 25px;
    padding-right: 25px;
  }

  .eso-texto-institucional {
    padding-bottom: 40px;
  }

  .eso-texto-institucional--fio .eso-texto-institucional__grade {
    padding-top: 40px;
  }

  .eso-texto-institucional--duas-colunas .eso-texto-institucional__grade {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .eso-texto-institucional .eso-titulo-grande {
    font-size: 42px;
    letter-spacing: -1.2px;
  }

  .eso-texto-institucional__texto .eso-texto-rico {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------------ */
/* Packs da home                                                       */
/* ------------------------------------------------------------------ */

.eso-packs__cabeca {
  padding: 10px 25px 0;
  text-align: center;
}

.eso-packs__titulo {
  font-size: 28px;
  letter-spacing: -0.8px;
}

.eso-packs__cabeca p {
  margin: 8px 0 20px;
  color: #666666;
  font-size: 15px;
}

.eso-packs__caixa {
  display: block;
  padding: 55px 30px 0;
}

.eso-packs__abas {
  display: none;
}

.eso-packs__trilho {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.eso-packs__trilho > li {
  display: flex;
  min-width: 0;
}

.eso-pack-cartao {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.eso-pack-cartao__foto {
  position: relative;
  display: block;
  aspect-ratio: 1000 / 1370;
  overflow: hidden;
  border-radius: var(--eso-raio-imagem);
  background: #f4f4f4;
}

.eso-pack-cartao__imagem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eso-pack-cartao__selo {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 14px;
  border-radius: 50px;
  background: #000000;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.eso-pack-cartao__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 10px 0;
  text-align: center;
}

.eso-pack-cartao__linha {
  display: block;
  min-height: 18px;
  margin-bottom: 5px;
  color: #777777;
  font-size: 14px;
}

.eso-pack-cartao__nome {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 340px;
  min-height: 45px;
  margin: 0 auto 10px;
  color: #111111;
  font-family: var(--eso-fonte-texto);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
}

.eso-preco.eso-preco--pack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 35px;
  margin: 0 0 13px;
}

.eso-preco--pack .eso-preco__por {
  color: #000000;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -0.7px;
}

.eso-preco--pack .eso-preco__de {
  color: #999999;
  font-size: 17px;
}

.eso-pack-cartao__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: auto;
  border-radius: 8px;
  background: #000000;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.15s ease;
}

.eso-pack-cartao__botao:hover {
  background: #222222;
}

.eso-pack-cartao__botao:active {
  transform: scale(0.985);
}

@media (max-width: 767px) {
  .eso-packs {
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 40px;
  }

  .eso-packs__caixa {
    padding: 0;
  }

  .eso-packs__abas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    width: 100%;
    min-height: 66px;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #e7e7e7;
    background: #ffffff;
  }

  .eso-packs__abas button {
    position: relative;
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: #8d8d8d;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
  }

  .eso-packs__abas button[aria-pressed='true'] {
    color: #000000;
    font-weight: 600;
  }

  .eso-packs__abas button[aria-pressed='true']::after {
    content: '';
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 0;
    height: 2px;
    background: #000000;
  }

  .eso-packs__trilho {
    display: flex;
    gap: 15px;
    padding: 28px 7vw 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .eso-packs__trilho::-webkit-scrollbar {
    display: none;
  }

  .eso-packs__trilho > li {
    flex: 0 0 86vw;
    max-width: 450px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .eso-pack-cartao__foto {
    border-radius: calc(var(--eso-raio-imagem) + 2px);
    background: #f3f3f3;
  }

  .eso-pack-cartao__selo {
    top: 14px;
    left: 14px;
    padding: 7px 12px;
    font-size: 10px;
    letter-spacing: 0.7px;
  }

  .eso-pack-cartao__info {
    padding: 14px 8px 0;
  }

  .eso-pack-cartao__linha {
    color: #7d7d7d;
  }

  .eso-pack-cartao__nome {
    font-size: 20px;
    line-height: 1.2;
  }

  .eso-preco.eso-preco--pack {
    min-height: 36px;
  }

  .eso-pack-cartao__botao {
    min-height: 52px;
    border-radius: 9px;
  }
}

/* ------------------------------------------------------------------ */
/* Videos e stories                                                    */
/* ------------------------------------------------------------------ */

.eso-videos__titulo {
  margin: 0 0 30px;
  font-size: 35px;
  font-weight: var(--eso-peso-forte);
  line-height: 1.05;
  letter-spacing: -1.3px;
  text-align: center;
}

.eso-videos__caixa {
  display: block;
}

.eso-videos__lista {
  display: grid;
  grid-template-columns: repeat(var(--eso-colunas, 4), minmax(0, 1fr));
  gap: 22px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.eso-video__cartao {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 19px;
  background: #000000;
  color: #ffffff;
  isolation: isolate;
}

.eso-video__capa,
.eso-video__previa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eso-video__gradiente {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.65) 0%, rgb(0 0 0 / 0.12) 25%, rgb(0 0 0 / 0) 50%);
}

.eso-video__play {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35);
}

.eso-video__play .eso-icone {
  width: 18px;
  height: 18px;
}

.eso-video__nome {
  position: absolute;
  z-index: 3;
  left: 15px;
  right: 15px;
  bottom: 17px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.45);
}

.eso-stories {
  width: min(430px, calc(100vw - 40px), calc((100dvh - 80px) * 9 / 16));
  /* Altura explicita (a largura x 16/9): no Safari (iPhone) o aspect-ratio nao
     vale na janela, que tem height: fit-content do navegador e so filhos
     absolutos, e ela abria com 0 px (fundo escuro sem o video). */
  height: min(calc(430px * 16 / 9), calc((100vw - 40px) * 16 / 9), calc(100dvh - 80px));
  max-height: calc(100dvh - 80px);
  aspect-ratio: 9 / 16;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background: #000000;
  color: #ffffff;
  box-shadow: 0 18px 60px rgb(0 0 0 / 0.42);
}

.eso-stories::backdrop {
  background: rgb(0 0 0 / 0.3);
}

.eso-stories__caixa,
.eso-stories__palco {
  position: absolute;
  inset: 0;
}

.eso-stories__palco video,
.eso-stories__palco iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.eso-stories__gradiente {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.16) 0%, rgb(0 0 0 / 0) 20%, rgb(0 0 0 / 0) 68%, rgb(0 0 0 / 0.56) 100%);
}

.eso-stories__progresso {
  position: absolute;
  z-index: 20;
  top: 18px;
  left: 17px;
  right: 17px;
  display: flex;
  gap: 6px;
}

.eso-stories__progresso > span {
  position: relative;
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 50px;
  background: rgb(255 255 255 / 0.36);
}

.eso-stories__progresso > span > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--eso-progresso, 0%);
  background: #ffffff;
}

.eso-stories__controles {
  position: absolute;
  z-index: 30;
  top: 48px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eso-stories__botao {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1.5px solid rgb(255 255 255 / 0.62);
  border-radius: 13px;
  background: rgb(20 20 20 / 0.2);
  color: #ffffff;
  cursor: pointer;
}

.eso-stories__botao[aria-pressed='false'] .eso-icone:last-of-type,
.eso-stories__botao[aria-pressed='true'] .eso-icone:first-of-type {
  display: none;
}

.eso-stories__zona {
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  width: 39%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.eso-stories__zona--anterior {
  left: 0;
}

.eso-stories__zona--proxima {
  right: 0;
}

.eso-stories__nome {
  position: absolute;
  z-index: 25;
  left: 24px;
  right: 90px;
  bottom: 25px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  pointer-events: none;
  text-shadow: 0 2px 16px rgb(0 0 0 / 0.45);
}

@media (max-width: 767px) {
  .eso-videos .eso-largura {
    padding: 0;
  }

  .eso-videos__lista--carrossel {
    display: flex;
    gap: 14px;
    padding: 0 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .eso-videos__lista--carrossel::-webkit-scrollbar {
    display: none;
  }

  .eso-videos__lista--carrossel > li {
    flex: 0 0 calc(50vw - 27px);
    scroll-snap-align: start;
  }

  .eso-videos__titulo {
    padding: 0 25px;
    font-size: 32px;
  }
}

/* ------------------------------------------------------------------ */
/* Imagem com texto (o editorial)                                      */
/* ------------------------------------------------------------------ */

.eso-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--eso-largura);
  margin: 0 auto;
  background: var(--eso-editorial-fundo, var(--eso-papel));
}

.eso-editorial__arte {
  min-height: 520px;
  max-height: 600px;
  overflow: hidden;
  background: var(--eso-editorial-arte, #efede7);
}

.eso-editorial__arte img,
.eso-editorial__arte svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.eso-editorial__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 60px;
}

.eso-editorial__texto .eso-titulo-grande {
  margin: 18px 0 24px;
}

.eso-editorial__texto .eso-texto-rico {
  max-width: 390px;
  margin: 0 0 24px;
  color: #5c5c5c;
  font-size: 18px;
  line-height: 1.6;
}

.eso-botao--seta {
  justify-content: space-between;
  gap: 35px;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: 0;
  font-size: 15px;
}

.eso-editorial--invertido .eso-editorial__arte {
  order: 2;
}

@media (max-width: 1000px) {
  .eso-editorial__texto {
    padding: 35px;
  }

  .eso-editorial__arte {
    min-height: 420px;
  }
}

@media (max-width: 767px) {
  .eso-editorial {
    grid-template-columns: 1fr;
    margin: 0 20px;
  }

  .eso-editorial-faixa {
    padding-bottom: 24px;
  }

  .eso-editorial__arte {
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 5;
  }

  .eso-editorial--invertido .eso-editorial__arte {
    order: 0;
  }

  .eso-editorial__texto {
    padding: 35px 25px 40px;
  }

  .eso-editorial__texto .eso-titulo-grande {
    font-size: 42px;
    letter-spacing: -1.2px;
  }

  .eso-editorial__texto .eso-texto-rico {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------------ */
/* Passos                                                              */
/* ------------------------------------------------------------------ */

.eso-passos-faixa .eso-largura {
  max-width: var(--eso-largura);
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: var(--eso-pb, 0px);
}

.eso-passos-faixa {
  padding-bottom: 0;
}

.eso-passos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 55px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eso-passos span {
  color: #777777;
  font-size: 12px;
  letter-spacing: 2px;
}

.eso-passos h3 {
  margin: 12px 0;
  font-family: var(--eso-fonte-texto);
  font-size: 20px;
  font-weight: 600;
}

.eso-passos p {
  max-width: 310px;
  color: #666666;
  font-size: 15px;
}

@media (max-width: 767px) {
  .eso-passos-faixa .eso-largura {
    padding-left: 25px;
    padding-right: 25px;
  }

  .eso-passos-faixa {
    padding-top: 35px;
  }

  .eso-passos-faixa .eso-largura {
    padding-bottom: 35px;
  }

  .eso-passos {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .eso-passos li {
    position: relative;
    padding-left: 38px;
  }

  .eso-passos span {
    position: absolute;
    top: 14px;
    left: 0;
  }

  .eso-passos h3 {
    margin-top: 8px;
  }
}

/* ------------------------------------------------------------------ */
/* Avaliacoes em fotos                                                 */
/* ------------------------------------------------------------------ */

.eso-fotos .eso-largura {
  max-width: var(--eso-largura);
}

.eso-fotos__titulo {
  margin: 12px 0;
  font-size: 32px;
  letter-spacing: -1px;
}

.eso-fotos .eso-sobretitulo {
  display: inline;
}

.eso-fotos__texto {
  margin: 14px 0;
  color: #666666;
  font-size: 14px;
  line-height: 1.6;
}

.eso-fotos__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.eso-fotos__item {
  min-width: 0;
  margin: 0;
}

.eso-fotos__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 1333;
  object-fit: cover;
  border-radius: 4px;
}

.eso-fotos__item figcaption {
  padding: 12px 0;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .eso-fotos {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .eso-fotos .eso-largura {
    padding: 0 20px;
  }

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

  .eso-fotos__titulo {
    font-size: 27px;
  }

  .eso-fotos__item figcaption {
    font-size: 12px;
  }
}

/* ------------------------------------------------------------------ */
/* Perguntas frequentes (e a tabela de medidas dentro da resposta)     */
/* ------------------------------------------------------------------ */

.eso-faq__caixa {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 25px;
}

.eso-faq__titulo {
  margin: 12px 0 35px;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: var(--eso-peso-forte);
  line-height: 1.15;
  letter-spacing: -1px;
  text-align: center;
}

.eso-faq__item {
  border-bottom: 1px solid #dddddd;
}

.eso-faq__item:first-child {
  border-top: 1px solid #dddddd;
}

.eso-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.eso-faq__item > summary::-webkit-details-marker {
  display: none;
}

.eso-faq__item > summary::after {
  content: '+';
  font-size: 26px;
  font-weight: 400;
  line-height: 1.5;
}

.eso-faq__item[open] > summary::after {
  content: '−';
}

.eso-faq__item .eso-texto-rico {
  max-width: 680px;
  margin: 0 0 24px;
  color: #555555;
  font-size: 16px;
}

.eso-faq__item .eso-texto-rico p + p {
  margin-top: 14px;
}

.eso-medidas-faq {
  width: 100%;
  margin: 0 0 18px;
  overflow-x: auto;
  border: 1px solid #e5e5e5;
}

.eso-medidas-faq__tabela {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
  color: #333333;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

.eso-medidas-faq__tabela caption {
  padding: 12px;
  font-weight: 700;
  text-align: left;
}

.eso-medidas-faq__tabela th,
.eso-medidas-faq__tabela td {
  padding: 10px 8px;
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
  white-space: nowrap;
}

.eso-medidas-faq__tabela thead {
  background: #f5f5f3;
}

.eso-medidas-faq__tabela small {
  display: block;
  font-weight: 400;
}

@media (max-width: 767px) {
  .eso-faq {
    padding-top: 45px;
    padding-bottom: 55px;
  }

  .eso-medidas-faq__tabela th,
  .eso-medidas-faq__tabela td {
    padding: 9px 5px;
  }
}

/* ------------------------------------------------------------------ */
/* Rodape                                                              */
/* ------------------------------------------------------------------ */

.eso-rodape {
  padding: 60px 30px 0;
  background: var(--eso-rodape-fundo, #101010);
  color: var(--eso-rodape-texto, #ffffff);
}

.eso-rodape__grade {
  display: grid;
  grid-template-columns: 1.25fr 0.8fr 1.2fr 1fr;
  gap: 38px;
  max-width: var(--eso-largura);
  margin: 0 auto;
}

.eso-rodape .eso-marca {
  position: relative;
  display: inline-block;
  min-height: 0;
  color: inherit;
}

/* O toque de 44 px na marca do rodape, sem mudar o desenho */
.eso-rodape .eso-marca::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 44px;
  transform: translateY(-50%);
}

.eso-rodape .eso-marca__nome {
  display: block;
  font-size: 27px;
}

.eso-rodape__coluna {
  min-width: 0;
}

.eso-rodape__titulo {
  margin: 0 0 20px;
  font-family: var(--eso-fonte-texto);
  font-size: 16px;
  font-weight: 600;
}

.eso-rodape p,
.eso-rodape li,
.eso-rodape .eso-texto-rico {
  color: #cccccc;
  font-size: 14px;
  line-height: 1.7;
}

.eso-rodape__marca .eso-texto-rico {
  margin: 14px 0;
}

.eso-rodape ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.eso-rodape__coluna a,
.eso-rodape__link-seta {
  color: #cccccc;
}

.eso-rodape__coluna li a {
  display: block;
  margin: 0 0 12px;
}

/* O toque de 44 px nos links do rodape no celular e no tablet; o computador com mouse fica com as medidas do site */
@media (max-width: 1023px), (pointer: coarse) {
  .eso-rodape__coluna a,
  .eso-rodape__link-seta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
  }

  .eso-rodape__coluna li a {
    display: flex;
    margin: 0;
  }
}

.eso-rodape a:hover {
  text-decoration: underline;
}

.eso-rodape__coluna > p {
  margin: 14px 0;
}

.eso-rodape__contato li {
  overflow-wrap: anywhere;
}

.eso-pagamentos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.eso-rodape .eso-pagamentos li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid #555555;
  border-radius: 5px;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}

.eso-pagamentos svg {
  width: 24px;
  height: 22px;
}

.eso-rodape .eso-rodape__fino {
  margin: 12px 0;
  color: #aaaaaa;
  font-size: 12px;
}

.eso-rodape__copyright {
  max-width: var(--eso-largura);
  margin: 40px auto 0;
  padding: 22px 0;
  border-top: 1px solid #333333;
}

.eso-rodape .eso-rodape__copyright {
  color: #aaaaaa;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .eso-rodape__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .eso-rodape {
    padding: 42px 25px 0;
  }

  .eso-rodape__grade {
    gap: 30px;
  }

  .eso-rodape .eso-marca__nome {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .eso-rodape__grade {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Trilha                                                              */
/* ------------------------------------------------------------------ */

.eso-trilha {
  max-width: 1370px;
  margin: 0 auto;
  padding: 13px 30px;
  border-top: 1px solid #eeeeee;
  color: #777777;
  font-size: 12px;
}

.eso-trilha ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eso-trilha li {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow-wrap: anywhere;
}

.eso-trilha li + li::before {
  content: '/';
  margin-right: 10px;
}

.eso-trilha a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

@media (max-width: 1023px), (pointer: coarse) {
  /* A altura da trilha do site (59 px) com o toque de 44 px dentro */
  .eso-trilha {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .eso-trilha a {
    position: relative;
    min-height: 44px;
  }

  /* O toque de 44 px no link curto ("Inicio") sem mexer no desenho da trilha */
  .eso-trilha a::after {
    content: '';
    position: absolute;
    inset: 0 -9px;
    min-width: 44px;
  }
}

@media (max-width: 767px) {
  /* A altura da trilha do site no celular (48 px) com o toque de 44 px dentro */
  .eso-trilha {
    padding: 1px 20px 2px;
    font-size: 11px;
  }
}

/* ------------------------------------------------------------------ */
/* Produto: as duas colunas (a galeria e a compra, secoes vizinhas)    */
/* ------------------------------------------------------------------ */

@media (min-width: 768px) {
  .eso-tpl-product {
    display: grid;
    grid-template-columns: minmax(30px, 1fr) minmax(0, calc((min(1370px, 100%) - 105px) * 0.574)) 45px minmax(0, calc((min(1370px, 100%) - 105px) * 0.426)) minmax(30px, 1fr);
    align-items: start;
  }

  .eso-tpl-product > * {
    grid-column: 1 / -1;
  }

  .eso-tpl-product > .eso-secao-galeria {
    grid-column: 2;
    padding-bottom: 65px;
  }

  /*
   * A compra presa no alto so ate o fim da linha da galeria, como no site: a secao estica na linha da grade e a caixa
   * de dentro e que fica presa (presa na secao, a grade inteira seria o limite e a caixa cobriria as abas de baixo).
   */
  .eso-tpl-product > .eso-secao-compra {
    grid-column: 4;
    align-self: stretch;
    padding-bottom: 65px;
  }

  .eso-tpl-product > .eso-secao-compra > .eso-compra {
    position: sticky;
    top: calc(var(--eso-altura-cabecalho, 0px) + 24px);
  }
}

@media (min-width: 768px) and (max-width: 1050px) {
  .eso-tpl-product {
    grid-template-columns: minmax(30px, 1fr) minmax(0, calc((min(1370px, 100%) - 85px) / 2)) 25px minmax(0, calc((min(1370px, 100%) - 85px) / 2)) minmax(30px, 1fr);
  }
}

.eso-galeria {
  min-width: 0;
}

.eso-galeria__trilho {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eso-galeria__foto {
  min-width: 0;
}

.eso-galeria__ampliar {
  display: block;
  width: 100%;
  aspect-ratio: 1000 / 1370;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #f3f3f3;
  cursor: zoom-in;
}

.eso-galeria__ampliar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.eso-galeria__ferramentas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-top: 14px;
}

.eso-galeria__miniaturas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eso-galeria__miniaturas a {
  display: block;
  width: 48px;
  aspect-ratio: 1000 / 1370;
  overflow: hidden;
  border: 1px solid transparent;
  background: #eeeeee;
}

.eso-galeria__miniaturas a[aria-current='true'] {
  border-color: #111111;
}

.eso-galeria__miniaturas img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.eso-galeria__contador,
.eso-galeria__dica {
  color: #777777;
  font-size: 12px;
}

.eso-galeria__dica {
  margin-top: 14px;
}

.eso-galeria__vazia {
  aspect-ratio: 1000 / 1370;
}

@media (max-width: 767px) {
  .eso-galeria__trilho {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .eso-galeria__trilho::-webkit-scrollbar {
    display: none;
  }

  .eso-galeria__foto {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .eso-galeria__ferramentas {
    padding: 14px 20px 0;
  }

  .eso-galeria__dica {
    margin: 10px 20px;
  }
}

/* A compra */

.eso-compra {
  padding: 10px 0;
}

.eso-compra .eso-sobretitulo {
  font-size: 11px;
}

.eso-compra__titulo {
  margin: 16px 0;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -1.5px;
}

.eso-compra__frase {
  margin: 0 0 15px;
  color: #666666;
  font-size: 16px;
}

.eso-compra__colecao {
  position: relative;
  display: inline-block;
  padding: 0 0 4px;
  border-bottom: 1px solid #aaaaaa;
  color: #555555;
  font-size: 13px;
  line-height: normal;
}

.eso-compra__colecao::after {
  content: '';
  position: absolute;
  inset: -12px 0;
}

.eso-compra__preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 25px 0;
  padding: 22px;
  background: var(--eso-superficie);
}

.eso-preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
}

.eso-preco__de {
  color: #888888;
  font-size: 16px;
}

.eso-preco--produto .eso-preco__por {
  font-size: 30px;
  letter-spacing: -1px;
}

.eso-preco__a-partir {
  font-size: 0.6em;
  font-weight: 400;
}

/* A assinatura (Fase 2, 10D, S2): o intervalo colado ao preco ("R$ 29,90/mês"), mais leve que o valor. */
.eso-preco__intervalo {
  font-size: 0.6em;
  font-weight: 400;
  letter-spacing: 0;
}

.eso-compra__legenda {
  flex-basis: 100%;
  color: #777777;
  font-size: 12px;
}

.eso-compra__medidas {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  min-height: 45px;
  margin: -9px 0 22px;
  padding: 11px 13px;
  border: 1px solid #dddddd;
  background: #f6f6f3;
  color: #333333;
  font-size: 13px;
  line-height: normal;
  cursor: pointer;
}

.eso-packs-da-compra {
  margin: 0 0 15px;
}

.eso-packs-da-compra .eso-rotulo {
  margin-bottom: 13px;
  padding-left: 2px;
}

.eso-packs-da-compra__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* As medidas do botao do site (a letra e a entrelinha de um <button>) */
.eso-pack-opcao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 14px 5px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  background: #f5f5f5;
  color: #111111;
  font-size: 13.3333px;
  line-height: normal;
  text-align: center;
}

.eso-pack-opcao[aria-current='page'] {
  border-color: #111111;
  background: #e9e9e7;
  box-shadow: inset 0 0 0 1px #111111;
}

.eso-pack-opcao[aria-current='page']::after {
  content: '✓';
  position: absolute;
  top: -7px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #111111;
  color: #ffffff;
  font-size: 13px;
}

.eso-pack-opcao strong {
  font-size: 16px;
}

.eso-pack-opcao span {
  color: #777777;
  font-size: 12px;
}

.eso-pack-opcao b {
  font-size: 15px;
}

/* O preco "de" riscado (10F) e o pack esgotado (continua na lista, sem destaque) */
.eso-pack-opcao b s {
  margin-right: 4px;
  color: #777777;
  font-weight: 400;
  font-size: 12px;
}

.eso-pack-opcao--esgotado {
  color: #777777;
}

.eso-pack-opcao--esgotado strong,
.eso-pack-opcao--esgotado b {
  text-decoration: line-through;
}

/* O valor por unidade abaixo do total (10F.3: quando o dono da lista pede e a opcao tem mais de uma unidade). */
.eso-pack-opcao__unidade {
  color: #777777;
  font-size: 11px;
  line-height: 1.3;
}

.eso-pack-opcao__selo {
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* A escolha por unidade (o kit) e as variacoes */

.eso-kit {
  display: block;
  margin: 0;
  padding: 0 16px 14px;
  overflow: hidden;
  border: 1px solid #dddddd;
  border-radius: 9px;
}

.eso-kit__progresso {
  margin: 0 -16px 13px;
  padding: 9px 12px;
  background: #f4f4f4;
  color: #555555;
  font-size: 13px;
  text-align: center;
}

.eso-sem-js .eso-kit {
  padding-top: 16px;
}

.eso-kit__passos {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 15px;
}

.eso-kit__passos button {
  min-width: 30px;
  height: 35px;
  padding: 1px 6px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  background: #ffffff;
  color: #555555;
  font-size: 13px;
  cursor: pointer;
}

.eso-kit__passos button[aria-current='true'] {
  border-color: #111111;
  background: #f1f1ef;
  color: #111111;
}

.eso-kit__passos button[data-eso-pronto]::after {
  content: ' ✓';
}

/* O toque de 44 px nos atalhos dos itens, no celular e no tablet */
@media (max-width: 1023px), (pointer: coarse) {
  .eso-kit__passos button {
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
  }
}

.eso-kit__item {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.eso-com-js .eso-kit__item[data-eso-fechado] {
  display: none;
}

.eso-kit__item + .eso-kit__item {
  margin-top: 18px;
}

.eso-com-js .eso-kit__item + .eso-kit__item {
  margin-top: 0;
}

.eso-kit__cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 43px;
  margin-bottom: 12px;
  padding: 0;
}

.eso-kit__numero {
  width: 35px;
  color: #aaaaaa;
  font-size: 25px;
  letter-spacing: -1px;
}

.eso-kit__nome {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.eso-kit__nome small {
  color: #777777;
  font-weight: 400;
}

.eso-kit__opcao,
.eso-opcao {
  margin: 0 0 15px;
}

/* O rotulo no fio, como a legenda do fieldset do site ("Cor — Preta" com um espaco, o fio no meio do texto, 12 px depois dele) */
.eso-kit__opcao .eso-rotulo,
.eso-opcao .eso-rotulo {
  display: flex;
  align-items: center;
  margin: 0 0 11px;
  padding-left: 2px;
}

.eso-kit__opcao .eso-rotulo span,
.eso-opcao .eso-rotulo span {
  margin-left: 0.28em;
}

.eso-kit__opcao .eso-rotulo::after,
.eso-opcao .eso-rotulo::after {
  content: '';
  flex: 1;
  height: 1px;
  margin-left: 12px;
  background: var(--eso-borda);
}

.eso-opcao__topo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eso-opcao__topo .eso-rotulo {
  flex: 1;
}

.eso-valores {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eso-valores--cores {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.eso-valores--botoes {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.eso-valor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 4px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  background: #f6f6f6;
  color: #111111;
  font-size: 14px;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.eso-valores--botoes .eso-valor[aria-pressed='true'],
.eso-valores--botoes .eso-valor[aria-current='true'] {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
}

.eso-valores--cores .eso-valor {
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}

.eso-valor__amostra {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #bbbbbb;
  border-radius: 50%;
  background: var(--eso-amostra, #dddddd);
  box-shadow: 0 0 0 3px #ffffff;
  outline: 1px solid transparent;
}

/* A foto da variacao no lugar da amostra de cor (sem foto, a amostra de sempre):
   miniatura retangular em pe na proporcao das fotos do produto (1:1,37, 44 x 60). */
.eso-valor__amostra--foto {
  width: 44px;
  height: 60px;
  overflow: hidden;
  border-radius: 6px;
  background: #f3f3f3;
}

.eso-valor__amostra--foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.eso-valor__amostra--foto::after {
  position: relative;
  z-index: 1;
}

.eso-valores--cores .eso-valor[aria-pressed='true'] .eso-valor__amostra,
.eso-valores--cores .eso-valor[aria-current='true'] .eso-valor__amostra {
  outline-color: #111111;
}

.eso-valores--cores .eso-valor[aria-pressed='true'] .eso-valor__amostra::after,
.eso-valores--cores .eso-valor[aria-current='true'] .eso-valor__amostra::after {
  content: '✓';
  color: #ffffff;
  font-size: 16px;
  text-shadow: 0 1px 4px #000000;
}

.eso-valores--cores .eso-valor small {
  color: #555555;
  font-size: 12px;
  line-height: 1.5;
}

.eso-valor[aria-disabled='true'],
.eso-valor--esgotado {
  opacity: 0.45;
  text-decoration: line-through;
}

.eso-kit__seletor {
  margin: 8px 0 0;
}

.eso-kit__seletor .eso-rotulo {
  display: block;
  font-weight: 400;
}

.eso-kit__esgotada {
  color: var(--eso-erro);
  font-size: 13px;
}

.eso-kit__voltar {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 0;
  border: 0;
  background: transparent;
  color: #333333;
  font-size: 13px;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}

.eso-kit__fixas {
  margin: 0 0 14px;
  font-size: 14px;
}

.eso-kit__fixas ul {
  margin: 0;
  padding-left: 18px;
}

.eso-variacoes {
  margin: 0 0 8px;
}

.eso-personalizacao {
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}

.eso-personalizacao__campo label {
  display: block;
  margin: 10px 0 6px;
  color: #555555;
  font-size: 13px;
}

.eso-compra__quantidade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0 0;
  font-size: 14px;
}

.eso-compra__quantidade .eso-campo {
  width: 90px;
}

.eso-compra .eso-aviso--erro {
  margin: 12px 0 0;
}

.eso-adicionar {
  margin: 14px 0 0;
}

/* A seta logo depois do texto, como no site */
.eso-compra__botao {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.28em;
  width: 100%;
  min-height: 48px;
  padding: 14px 17px;
  border: 0;
  border-radius: var(--eso-raio-botao);
  background: var(--eso-botao);
  color: var(--eso-botao-texto);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--eso-letras-botao);
  text-align: left;
  text-transform: var(--eso-caixa-botao);
  cursor: pointer;
}

.eso-compra__botao:hover {
  background: var(--eso-botao-passar);
}

.eso-compra__botao:disabled {
  opacity: 0.45;
  cursor: default;
}

.eso-compra__nota {
  margin: 12px 0;
  color: #777777;
  font-size: 12px;
  line-height: 1.5;
}

.eso-servicos {
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid #dddddd;
  list-style: none;
}

.eso-servicos li {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid #eeeeee;
}

.eso-servicos__icone {
  font-size: 25px;
  line-height: 1.5;
}

.eso-servicos p {
  color: #777777;
  font-size: 13px;
}

.eso-servicos strong {
  display: block;
  margin-bottom: 4px;
  color: #222222;
  font-size: 14px;
  font-weight: 500;
}

/* A barra fixa de baixo ("Pack N · N camisas", o preco e o botao) */

.eso-barra-fixa {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 14px max(25px, calc((100vw - 900px) / 2)) max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid #dddddd;
  background: rgb(255 255 255 / 0.96);
  box-shadow: 0 -8px 30px rgb(0 0 0 / 0.03);
  backdrop-filter: blur(12px);
}

.eso-barra-fixa__texto {
  min-width: 0;
}

.eso-barra-fixa small {
  display: block;
  overflow: hidden;
  color: #666666;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eso-barra-fixa strong {
  margin-right: 12px;
  font-size: 20px;
}

.eso-barra-fixa [data-eso-barra-item] {
  color: #777777;
  font-size: 12px;
}

/* A seta logo depois do texto, como no site */
.eso-barra-fixa__botao {
  flex-shrink: 0;
  gap: 0.28em;
  min-height: 48px;
  padding: 13px 26px;
  font-size: 14px;
  white-space: nowrap;
}

/* As janelas: a foto ampliada e a tabela de medidas */

.eso-janela {
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #ffffff;
  color: #111111;
  box-shadow: 0 15px 80px rgb(0 0 0 / 0.2);
}

.eso-janela::backdrop {
  background: rgb(0 0 0 / 0.53);
}

.eso-janela__fechar {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #dddddd;
  border-radius: 50%;
  background: #ffffff;
  color: #111111;
  cursor: pointer;
}

.eso-luz {
  width: auto;
  overflow: auto;
  background: #f3f3f3;
}

.eso-luz__imagem {
  display: block;
  width: auto;
  max-width: calc(100vw - 32px);
  height: auto;
  max-height: calc(100dvh - 120px);
  margin: 0 auto;
}

.eso-luz__navegacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 14px;
  background: #ffffff;
  font-size: 13px;
}

.eso-janela--medidas {
  width: 850px;
  padding: 50px 24px 25px;
  overflow: auto;
}

/* A tabela de medidas (na janela e na aba) */

.eso-medidas .eso-sobretitulo {
  font-size: 12px;
}

.eso-medidas__titulo {
  margin: 12px 0 17px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.8px;
}

.eso-medidas__texto {
  margin: 0 0 22px;
  color: #666666;
  font-size: 15px;
  line-height: 1.7;
}

.eso-medidas__imagem img {
  display: block;
  margin: 0 0 18px;
}

.eso-medidas__rolar {
  max-width: 100%;
  overflow-x: auto;
}

.eso-medidas__tabela {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 15px;
}

.eso-medidas__tabela caption {
  margin-bottom: 12px;
  color: #777777;
  font-size: 12px;
  text-align: left;
}

.eso-medidas__tabela th,
.eso-medidas__tabela td {
  padding: 14px 8px;
  border-right: 1px solid #d6d6d1;
  border-bottom: 1px solid #d6d6d1;
  color: #444444;
  text-align: center;
}

.eso-medidas__tabela th {
  color: #222222;
  font-weight: 600;
}

.eso-medidas__tabela th:last-child,
.eso-medidas__tabela td:last-child {
  border-right: 0;
}

.eso-medidas__tabela tbody tr:last-child th,
.eso-medidas__tabela tbody tr:last-child td {
  border-bottom: 0;
}

.eso-medidas__tabela small {
  display: block;
  margin-top: 3px;
  color: #777777;
  font-size: 11px;
  font-weight: 400;
}

.eso-medidas__nota {
  margin-top: 14px;
  color: #777777;
  font-size: 13px;
}

/* O conteudo rico da tabela (10E.1): o HTML ja limpo pela plataforma. */
.eso-medidas__rica {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: #444444;
  overflow-wrap: break-word;
}

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

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

.eso-medidas__rica p,
.eso-medidas__rica ul,
.eso-medidas__rica ol,
.eso-medidas__rica blockquote {
  margin: 0 0 14px;
}

.eso-medidas__rica ul,
.eso-medidas__rica ol {
  padding-left: 22px;
}

.eso-medidas__rica blockquote {
  padding-left: 14px;
  border-left: 2px solid #d6d6d1;
}

.eso-medidas__rica h1,
.eso-medidas__rica h2,
.eso-medidas__rica h3,
.eso-medidas__rica h4 {
  margin: 18px 0 10px;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.3;
  color: #222222;
}

.eso-medidas__rica h1 {
  font-size: 22px;
}

.eso-medidas__rica h2 {
  font-size: 20px;
}

.eso-medidas__rica h3 {
  font-size: 18px;
}

.eso-medidas__rica h4 {
  font-size: 16px;
}

.eso-medidas__rica a {
  color: #222222;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.eso-medidas__rica img {
  display: block;
  max-width: 100%;
  height: auto;
}

.eso-medidas__rica video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000000;
}

/* A tabela larga do conteudo rico rola dentro da propria caixa, nunca a pagina. */
.eso-medidas__rica table {
  display: block;
  max-width: 100%;
  margin: 0 0 14px;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 15px;
}

.eso-medidas__rica caption {
  margin-bottom: 12px;
  font-size: 12px;
  color: #777777;
  text-align: left;
}

.eso-medidas__rica th,
.eso-medidas__rica td {
  padding: 12px 8px;
  border-right: 1px solid #d6d6d1;
  border-bottom: 1px solid #d6d6d1;
  color: #444444;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
}

.eso-medidas__rica th {
  font-weight: 600;
  color: #222222;
}

.eso-medidas__rica th:last-child,
.eso-medidas__rica td:last-child {
  border-right: 0;
}

.eso-medidas__como {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 25px;
  margin-top: 28px;
}

.eso-medidas__como svg {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.eso-medidas__como h3 {
  margin: 0 0 10px;
  font-family: var(--eso-fonte-texto);
  font-size: 17px;
}

.eso-medidas__como p {
  margin: 7px 0;
  color: #777777;
  font-size: 13px;
}

@media (max-width: 767px) {
  .eso-compra {
    padding: 22px 20px 35px;
  }

  .eso-compra__titulo {
    font-size: 36px;
  }

  .eso-compra__preco {
    margin: 20px 0;
    padding: 18px;
  }

  .eso-compra__medidas {
    margin-bottom: 19px;
  }

  .eso-packs-da-compra .eso-rotulo {
    margin-bottom: 11px;
  }

  .eso-packs-da-compra__lista {
    gap: 8px;
  }

  .eso-kit {
    padding: 0 16px 14px;
  }

  .eso-kit__progresso {
    margin: 0 -16px 13px;
  }

  .eso-barra-fixa {
    gap: 12px;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  }

  .eso-barra-fixa small {
    font-size: 11px;
  }

  .eso-barra-fixa strong {
    font-size: 19px;
  }

  .eso-barra-fixa [data-eso-barra-item] {
    display: block;
  }

  .eso-barra-fixa__botao {
    padding: 12px 16px;
    font-size: 13px;
  }

  .eso-janela--medidas {
    padding: 56px 15px 20px;
  }

  .eso-medidas__titulo {
    font-size: 25px;
  }

  .eso-medidas__texto {
    font-size: 14px;
  }

  .eso-medidas__tabela {
    min-width: max-content;
    font-size: 13px;
  }

  .eso-medidas__tabela th,
  .eso-medidas__tabela td {
    padding: 11px 8px;
    white-space: nowrap;
  }

  .eso-medidas__tabela thead th {
    font-size: 11px;
  }

  .eso-medidas__como {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 22px;
  }

  .eso-medidas__como svg {
    max-width: 260px;
    margin: 0 auto;
  }
}

/* ------------------------------------------------------------------ */
/* Informacoes do produto: as abas                                     */
/* ------------------------------------------------------------------ */

.eso-informacoes__caixa {
  display: block;
}

.eso-abas__lista {
  display: flex;
  justify-content: center;
  gap: 25px;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}

.eso-abas__aba {
  min-height: 44px;
  padding: 18px 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #777777;
  font-size: 15px;
  cursor: pointer;
}

.eso-abas__aba[aria-selected='true'] {
  border-bottom-color: #111111;
  color: #111111;
  font-weight: 600;
}

.eso-abas__aba span {
  margin-left: 8px;
  font-size: 12px;
}

.eso-com-js .eso-abas__painel[data-eso-fechado] {
  display: none;
}

.eso-com-js .eso-abas__titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.eso-sem-js .eso-abas__titulo {
  margin: 40px 0 0;
  font-size: 24px;
  text-align: center;
}

.eso-abas__painel:focus-visible {
  outline-offset: -3px;
}

.eso-informacoes__abertura {
  max-width: 660px;
  margin: 65px auto 40px;
  text-align: center;
}

.eso-informacoes__abertura .eso-titulo-grande {
  margin: 16px 0 24px;
  font-size: clamp(36px, 5vw, 58px);
  letter-spacing: -1.8px;
}

.eso-informacoes__texto {
  color: #666666;
  font-size: 17px;
  line-height: 1.7;
}

.eso-informacoes__descricao {
  max-width: 900px;
  margin: 0 auto 40px;
  color: #555555;
  font-size: 16px;
  line-height: 1.7;
}

.eso-destaques {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 35px;
  max-width: 1000px;
  margin: 0 auto 40px;
  padding: 0;
  list-style: none;
}

.eso-destaques li {
  padding-top: 22px;
  border-top: 1px solid #dddddd;
}

.eso-destaques span {
  color: #888888;
  font-size: 12px;
}

.eso-destaques h3 {
  margin: 14px 0;
  font-family: var(--eso-fonte-texto);
  font-size: 20px;
}

.eso-destaques p {
  color: #666666;
  font-size: 15px;
  line-height: 1.6;
}

.eso-informacoes__videos {
  margin: 0 auto 40px;
  padding-top: 30px;
}

.eso-informacoes__detalhes {
  max-width: 900px;
  margin: 0 auto 35px;
}

.eso-informacoes__detalhes details {
  padding: 18px 0;
  border-bottom: 1px solid #dddddd;
}

/* O resumo com o triangulo do navegador, como no site */
.eso-informacoes__detalhes summary {
  display: list-item;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

/* O toque de 44 px no resumo, no celular e no tablet (a mesma altura da linha) */
@media (max-width: 1023px), (pointer: coarse) {
  .eso-informacoes__detalhes details {
    padding: 8px 0;
  }

  .eso-informacoes__detalhes summary {
    padding: 10px 0;
  }
}

.eso-informacoes__detalhes .eso-texto-rico {
  padding: 15px 0 0;
  color: #666666;
  font-size: 15px;
  line-height: 1.7;
}

.eso-informacoes__medidas {
  max-width: 850px;
  margin: 35px auto;
  padding: 30px;
  border-radius: 12px;
  background: #f5f5f2;
}

/* As fotos da colecao e as avaliacoes de verdade: o carrossel com as setas */

.eso-colecao-fotos,
.eso-avaliacoes__caixa {
  display: block;
}

.eso-colecao-fotos__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: 45px 0 30px;
}

.eso-colecao-fotos__titulo {
  margin: 10px 0 0;
  font-family: var(--eso-fonte-titulo);
  font-size: 34px;
  font-weight: var(--eso-peso-titulo);
  line-height: 1.15;
  letter-spacing: -1px;
}

.eso-colecao-fotos__texto {
  max-width: 360px;
  color: #777777;
  font-size: 13px;
}

.eso-colecao-fotos__trilho {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 6px 2px 22px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.eso-colecao-fotos__trilho::-webkit-scrollbar {
  display: none;
}

.eso-colecao-fotos__cartao,
.eso-avaliacao {
  display: flex;
  flex: 0 0 calc((100% - 60px) / 4);
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.02);
  scroll-snap-align: start;
}

.eso-colecao-fotos__foto {
  display: block;
  width: 100%;
  aspect-ratio: 1000 / 1370;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 11px;
  background: #eeeeee;
  cursor: zoom-in;
}

.eso-colecao-fotos__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eso-colecao-fotos__cartao p {
  margin: 16px 0 0;
  color: #555555;
  font-size: 15px;
  line-height: 1.65;
}

.eso-colecao-fotos__cartao .eso-colecao-fotos__legenda {
  margin: 8px 0 0;
  color: #111111;
  font-size: 14px;
  font-weight: 600;
}

.eso-avaliacao__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 1000 / 1370;
  object-fit: cover;
  border-radius: 11px;
}

.eso-avaliacao__titulo {
  margin-top: 12px;
  font-weight: 600;
}

.eso-avaliacao__texto {
  margin: 10px 0 18px;
  color: #555555;
  font-size: 15px;
  line-height: 1.65;
}

.eso-avaliacao__autor {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
}

.eso-avaliacao__resposta {
  margin-top: 10px;
  color: #666666;
  font-size: 13px;
}

.eso-estrelas {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}

.eso-estrelas .eso-icone {
  width: 16px;
  height: 16px;
  color: #cfcfcf;
}

.eso-estrelas__estrela--cheia .eso-icone {
  color: #268067;
}

.eso-carrossel__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 15px 0 40px;
}

.eso-carrossel__contador {
  color: #777777;
  font-size: 13px;
}

@media (max-width: 1050px) {
  .eso-colecao-fotos__cartao,
  .eso-avaliacao {
    flex-basis: calc((100% - 40px) / 3);
  }
}

@media (max-width: 767px) {
  .eso-informacoes .eso-largura {
    padding: 0 20px;
  }

  .eso-abas__lista {
    justify-content: space-between;
    gap: 8px;
  }

  .eso-abas__aba {
    padding: 16px 3px;
    font-size: 13px;
  }

  .eso-abas__aba span {
    display: none;
  }

  .eso-informacoes__abertura {
    margin: 40px auto 30px;
  }

  .eso-informacoes__texto {
    font-size: 16px;
  }

  .eso-destaques {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .eso-destaques h3 {
    margin: 8px 0;
  }

  .eso-informacoes__medidas {
    margin: 25px auto;
    padding: 20px 12px;
  }

  .eso-colecao-fotos__topo {
    display: block;
    padding-top: 35px;
  }

  .eso-colecao-fotos__titulo {
    font-size: 30px;
  }

  .eso-colecao-fotos__texto {
    margin-top: 18px;
  }

  .eso-colecao-fotos__cartao,
  .eso-avaliacao {
    flex-basis: 84%;
    padding: 13px;
  }
}

/* ------------------------------------------------------------------ */
/* Listas: categoria, colecao, marca, tamanho e busca                  */
/* ------------------------------------------------------------------ */

.eso-tpl-collection,
.eso-tpl-search {
  display: grid;
  grid-template-columns: minmax(30px, 1fr) 235px 35px minmax(0, calc(min(var(--eso-largura), 100%) - 330px)) minmax(30px, 1fr);
  align-items: start;
}

.eso-tpl-collection > *,
.eso-tpl-search > * {
  grid-column: 1 / -1;
}

.eso-tpl-collection > .eso-secao-filtros,
.eso-tpl-search > .eso-secao-filtros {
  grid-column: 2;
  position: sticky;
  top: calc(var(--eso-altura-cabecalho, 0px) + 20px);
  margin-top: 30px;
}

.eso-tpl-collection > .eso-secao-filtros + .eso-secao-vitrine,
.eso-tpl-search > .eso-secao-filtros + .eso-secao-vitrine {
  grid-column: 4;
  margin-top: 30px;
}

.eso-largura--lista {
  max-width: var(--eso-largura);
}

/* O sobretitulo na linha do texto, como no site */
.eso-topo-da-lista .eso-sobretitulo {
  display: inline;
  font-size: 11px;
}

.eso-topo-da-lista__titulo {
  margin: 14px 0;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -1.5px;
}

.eso-topo-da-lista__texto {
  max-width: 650px;
  color: #777777;
  font-size: 15px;
}

.eso-atalhos ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}

.eso-atalhos a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #e1e1dd;
  border-radius: 5px;
  background: #f4f4f0;
  color: #444444;
  font-size: 13px;
}

.eso-filtros {
  padding: 20px;
  border: 1px solid #e5e5df;
  border-radius: 8px;
  background: var(--eso-fundo-secao, #f6f6f2);
}

.eso-filtros__caixa > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.eso-filtros__caixa > summary::-webkit-details-marker {
  display: none;
}

.eso-filtros__caixa > summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
}

.eso-filtros__caixa[open] > summary::after {
  content: '−';
}

/* O toque de 44 px no "Filtrar produtos", no celular e no tablet, sem mudar a altura da caixa */
@media (max-width: 1023px), (pointer: coarse) {
  .eso-filtros__caixa > summary {
    min-height: 44px;
    margin: -9px 0;
  }
}

.eso-filtros__titulo {
  display: block;
  margin: 20px 0 7px;
  color: #555555;
  font-size: 13px;
  font-weight: 400;
}

.eso-filtros__grupo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset.eso-filtros__grupo {
  margin-top: 22px;
}

fieldset.eso-filtros__grupo .eso-filtros__titulo {
  margin: 0 0 10px;
  padding: 0;
}

.eso-filtros__campo-de-busca {
  display: flex;
  gap: 5px;
}

.eso-filtros__campo-de-busca button {
  flex-shrink: 0;
  width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 4px;
  background: #111111;
  color: #ffffff;
  font-size: 17px;
  cursor: pointer;
}

.eso-filtros__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.eso-filtros__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
}

.eso-filtros__links a[aria-current='page'] {
  font-weight: 600;
}

.eso-filtros__valores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eso-filtro {
  position: relative;
  display: block;
  cursor: pointer;
}

.eso-filtro input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.eso-filtro span {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  border: 1px solid #d5d5cf;
  border-radius: 4px;
  background: #ffffff;
  font-size: 13px;
  text-align: center;
  overflow-wrap: anywhere;
}

.eso-filtro input:checked + span {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
}

.eso-filtro input:focus-visible + span {
  outline: 3px solid var(--eso-destaque);
  outline-offset: 2px;
}

.eso-filtro--vazio span {
  opacity: 0.4;
}

.eso-filtro__amostra {
  width: 14px;
  height: 14px;
  border: 1px solid #bbbbbb;
  border-radius: 50%;
  background: var(--eso-amostra, #dddddd);
}

.eso-filtros__valores--cores {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.eso-filtros__nota {
  margin: 10px 0;
  color: #888888;
  font-size: 11px;
  line-height: 1.6;
}

.eso-filtros__preco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.eso-filtros__preco label span {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 12px;
}

.eso-filtros__aplicar {
  width: 100%;
  margin-top: 20px;
}

.eso-com-js .eso-filtros__aplicar {
  display: none;
}

.eso-filtros__ativos ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.eso-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #d5d5cf;
  border-radius: 99px;
  background: #ffffff;
  font-size: 12px;
}

.eso-etiqueta .eso-icone {
  width: 14px;
  height: 14px;
}

.eso-filtros__limpar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 10px;
  color: #333333;
  font-size: 14px;
  text-decoration: underline;
}

.eso-vitrine--pagina {
  max-width: var(--eso-largura);
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px;
}

.eso-secao-filtros + .eso-secao-vitrine .eso-vitrine--pagina {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.eso-vitrine__contagem {
  margin: 0 0 18px;
  color: #777777;
  font-size: 13px;
}

.eso-grade {
  display: grid;
  grid-template-columns: repeat(var(--eso-colunas, 3), minmax(0, 1fr));
  gap: 30px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eso-grade > li {
  min-width: 0;
}

.eso-cartao {
  display: block;
  color: #111111;
}

.eso-cartao__midia {
  position: relative;
  display: block;
  margin-bottom: 10px;
}

.eso-cartao__imagem {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 1370;
  object-fit: cover;
  border-radius: 10px;
}

.eso-selo {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 50px;
  background: #000000;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.eso-selo--esgotado {
  background: #ffffff;
  color: #111111;
}

.eso-cartao__marca {
  display: block;
  color: #777777;
  font-size: 12px;
}

.eso-cartao__titulo {
  margin: 6px 0;
  font-size: 19px;
  letter-spacing: -0.5px;
  line-height: 1.3;
}

.eso-preco--cartao {
  margin: 6px 0;
  font-size: 18px;
}

.eso-preco--cartao .eso-preco__por {
  font-weight: 600;
}

.eso-preco--cartao .eso-preco__de {
  font-size: 14px;
}

.eso-cartao__ver {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
}

.eso-paginacao ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.eso-paginacao a,
.eso-paginacao [aria-current='page'] {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  font-size: 14px;
}

.eso-paginacao [aria-current='page'] {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
}

.eso-paginacao .eso-icone {
  width: 18px;
  height: 18px;
}

@media (max-width: 1100px) {
  .eso-tpl-collection,
  .eso-tpl-search {
    grid-template-columns: minmax(30px, 1fr) 215px 25px minmax(0, calc(min(var(--eso-largura), 100%) - 300px)) minmax(30px, 1fr);
  }

  .eso-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .eso-tpl-collection,
  .eso-tpl-search {
    display: block;
  }

  .eso-tpl-collection > .eso-secao-filtros,
  .eso-tpl-search > .eso-secao-filtros {
    position: static;
    margin: 23px 20px 23px;
  }

  .eso-tpl-collection > .eso-secao-filtros + .eso-secao-vitrine,
  .eso-tpl-search > .eso-secao-filtros + .eso-secao-vitrine {
    margin: 0;
  }

  .eso-topo-da-lista {
    padding-top: 40px;
  }

  .eso-topo-da-lista .eso-largura,
  .eso-vitrine--pagina,
  .eso-secao-filtros + .eso-secao-vitrine .eso-vitrine--pagina {
    padding-left: 20px;
    padding-right: 20px;
  }

  .eso-topo-da-lista__titulo {
    font-size: 35px;
  }

  .eso-atalhos ul {
    gap: 7px;
  }

  .eso-atalhos a {
    padding: 10px;
    font-size: 12px;
  }

  .eso-filtros {
    padding: 16px;
  }

  .eso-filtros .eso-campo {
    font-size: 16px;
  }

  .eso-filtros__valores {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .eso-filtros__valores--cores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eso-grade,
  .eso-grade--larga {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 14px;
  }

  .eso-cartao__titulo {
    font-size: 16px;
  }

  .eso-cartao__ver {
    font-size: 13px;
  }
}

/* ------------------------------------------------------------------ */
/* Carrinho: a gaveta, as linhas, o resumo e a pagina                  */
/* ------------------------------------------------------------------ */

.eso-gaveta {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(520px, 100vw);
  max-width: 100vw;
  height: 100%;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: #ffffff;
  color: #111111;
  box-shadow: -15px 0 80px rgb(0 0 0 / 0.13);
}

.eso-gaveta[open] {
  display: flex;
}

.eso-gaveta::backdrop {
  background: rgb(0 0 0 / 0.4);
}

.eso-gaveta__miolo {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.eso-gaveta__topo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 19px 25px;
  border-bottom: 1px solid #e1e1dd;
}

.eso-gaveta__titulo {
  font-size: 23px;
  letter-spacing: -0.6px;
}

.eso-gaveta__titulo span,
.eso-carrinho__titulo span {
  color: #777777;
  font-weight: 400;
}

.eso-icone-botao {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111111;
  cursor: pointer;
}

.eso-gaveta .eso-aviso--erro {
  margin: 10px 25px 0;
}

.eso-gaveta__rolagem {
  flex: 1;
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
}

.eso-gaveta__rodape {
  flex-shrink: 0;
  padding: 18px 25px 6px;
  border-top: 1px solid #e1e1dd;
  background: #ffffff;
}

.eso-gaveta__vazio {
  margin: 35px auto;
  padding: 0 25px;
}

.eso-linhas {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eso-linha {
  padding: 18px;
  border: 1px solid #e1e1dd;
  border-radius: 10px;
}

.eso-linha--fora {
  opacity: 0.75;
}

.eso-linha__topo {
  display: flex;
  align-items: center;
  gap: 15px;
}

.eso-linha__foto {
  flex-shrink: 0;
  width: 65px;
}

.eso-linha__foto img,
.eso-linha__foto svg {
  display: block;
  width: 65px;
  height: 89px;
  object-fit: cover;
  border-radius: 5px;
}

.eso-linha__dados {
  flex: 1;
  min-width: 0;
}

.eso-linha__nome {
  position: relative;
  margin: 0 0 10px;
  font-family: var(--eso-fonte-texto);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.eso-linha__nome a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: max(100%, 44px);
  height: 44px;
  transform: translateY(-50%);
}

.eso-linha__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.eso-linha__total s {
  color: #888888;
  font-size: 13px;
}

.eso-linha__total strong {
  font-size: 19px;
}

.eso-linha__remover button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #555555;
  cursor: pointer;
}

.eso-linha__escolhas {
  margin: 8px 0 15px;
  padding: 12px 0 0;
  border-top: 1px solid #eeeeee;
  list-style: none;
}

.eso-linha__escolhas li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  color: #777777;
  font-size: 12px;
}

.eso-linha__escolhas b {
  color: #333333;
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}

.eso-linha__nota {
  margin: 0 0 10px;
  color: #777777;
  font-size: 12px;
}

.eso-linha__quantidade {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.eso-linha__quantidade > span {
  margin-right: auto;
  color: #666666;
  font-size: 12px;
}

.eso-linha__quantidade output {
  min-width: 20px;
  text-align: center;
}

.eso-linha__quantidade button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111111;
  cursor: pointer;
}

.eso-linha__quantidade button .eso-icone {
  width: 30px;
  height: 30px;
  padding: 7px;
  border: 1px solid #dddddd;
  border-radius: 50%;
}

.eso-linha__quantidade button:disabled {
  opacity: 0.3;
  cursor: default;
}

.eso-linha__aviso {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 10px;
  color: var(--eso-erro);
  font-size: 13px;
}

.eso-linha__aviso .eso-icone {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.eso-resumo__linha {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 8px;
  font-size: 14px;
}

.eso-resumo__linha--desconto {
  color: var(--eso-sucesso);
}

.eso-resumo__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 16px;
}

.eso-resumo__total strong {
  font-size: 24px;
  letter-spacing: -0.5px;
}

.eso-resumo__nota {
  margin: 10px 0 18px;
  color: #777777;
  font-size: 12px;
}

.eso-resumo__nota--destaque {
  color: var(--eso-sucesso);
  font-weight: 600;
}

.eso-resumo__nota--alerta {
  color: var(--eso-erro);
}

.eso-resumo__cupom,
.eso-resumo__cashback {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--eso-superficie);
  font-size: 13px;
}

.eso-resumo__cupom-linha,
.eso-resumo__cashback-escolha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}

.eso-resumo__cupom .eso-resumo__nota,
.eso-resumo__cashback .eso-resumo__nota {
  margin: 8px 0 0;
}

.eso-resumo__cashback-escolha label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.eso-resumo__cashback-escolha input {
  width: 18px;
  height: 18px;
  accent-color: #111111;
}

.eso-resumo form .eso-botao {
  min-height: 52px;
  text-transform: uppercase;
}

.eso-carrinho__titulo {
  margin: 12px 0 25px;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -1.2px;
}

.eso-carrinho__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.eso-carrinho__resumo {
  position: sticky;
  top: calc(var(--eso-altura-cabecalho, 0px) + 20px);
  padding: 22px 25px 8px;
  border: 1px solid #e1e1dd;
  border-radius: 10px;
}

.eso-carrinho__avisos {
  margin: 0 0 20px;
}

@media (max-width: 767px) {
  .eso-gaveta {
    width: var(--eso-gaveta-celular);
    max-width: var(--eso-gaveta-celular);
    border-radius: 13px 0 0 13px;
    touch-action: pan-y;
  }

  .eso-gaveta__topo {
    padding: 15px 20px;
  }

  .eso-gaveta__rolagem {
    padding: 20px;
  }

  .eso-gaveta__rodape {
    padding: 16px 20px max(8px, env(safe-area-inset-bottom));
  }

  .eso-carrinho .eso-largura {
    padding: 0 20px;
  }

  .eso-carrinho__grade {
    grid-template-columns: 1fr;
  }

  .eso-carrinho__resumo {
    position: static;
    padding: 18px 18px 6px;
  }

  .eso-linha {
    padding: 14px;
  }
}

/* ------------------------------------------------------------------ */
/* Paginas: a pagina informativa, o 404 e "Em construcao"              */
/* ------------------------------------------------------------------ */

.eso-pagina__caixa {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 25px;
}

.eso-pagina__titulo {
  margin: 0 0 24px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -1.5px;
}

.eso-pagina .eso-texto-rico {
  color: #555555;
  font-size: 16px;
  line-height: 1.7;
}

.eso-nao-encontrado__caixa {
  text-align: center;
}

.eso-nao-encontrado__caixa p {
  margin: 0 0 24px;
  color: #666666;
}

.eso-nao-encontrado__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.eso-nao-encontrado__acoes .eso-link-sublinhado {
  font-size: 15px;
}

.eso-construcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 70vh;
  padding: 40px 25px;
  text-align: center;
}

.eso-construcao .eso-texto-rico {
  max-width: 520px;
  color: #666666;
}

/* ------------------------------------------------------------------ */
/* Menos movimento                                                     */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}