/* Casa da Papelaria — site vitrine (mesmo visual da loja Shopify: azul com listras, creme e cores fofas) */

:root {
  --azul: #1e4fd8;
  --azul-escuro: #163ca8;
  --marinho: #1a2b5f;
  --creme: #f7f2c8;
  --creme-claro: #fff8e7;
  --amarelo: #ffc93c;
  --coral: #ff6b5b;
  --menta: #e3f6f4;
  --lilas: #9b5de5;
  --bloco: #edf0fd;
  --bloco-forte: #dfe5fc;
  --cinza: #5b6585;
  --borda: rgba(26, 43, 95, 0.1);
  --listras: repeating-linear-gradient(90deg, var(--azul) 0 32px, #2b5ce3 32px 64px);
  --sombra: 0 8px 24px rgba(26, 43, 95, 0.1);
  --raio: 16px;
  --titulo: 'Poppins', system-ui, sans-serif;
  --texto: 'Nunito Sans', system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}
body {
  margin: 0;
  background: #fff;
  color: var(--marinho);
  font: 400 16px/1.6 var(--texto);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
h1,
h2,
h3 {
  font-family: var(--titulo);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}
svg {
  display: block;
}
[hidden] {
  display: none !important;
}
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 750px) {
  .wrap {
    padding: 0 32px;
  }
}
.pular {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 40px;
  background: var(--amarelo);
  color: var(--marinho);
  font-weight: 700;
}
.pular:focus {
  top: 12px;
}
:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
}

/* Botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 24px;
  border: 2px solid transparent;
  border-radius: 40px;
  background: var(--azul);
  color: #fff;
  font: 600 14px/1 var(--titulo);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.botao:hover {
  background: var(--azul-escuro);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(26, 43, 95, 0.2);
}
.botao--claro {
  background: #fff;
  color: var(--azul);
}
.botao--claro:hover {
  background: var(--creme);
}
.botao--amarelo {
  background: var(--amarelo);
  color: var(--marinho);
}
.botao--amarelo:hover {
  background: #ffbd14;
}
.botao--contorno {
  background: transparent;
  border-color: var(--azul);
  color: var(--azul);
}
.botao--contorno:hover {
  background: var(--azul);
  color: #fff;
}
.kicker {
  margin: 0 0 8px;
  font: 700 12px/1.3 var(--texto);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--azul);
}

/* Faixa de avisos */
.avisos {
  overflow: hidden;
  white-space: nowrap;
  background: var(--marinho);
  color: var(--creme);
}
.avisos__trilho {
  display: flex;
  width: max-content;
  animation: avisos 36s linear infinite;
}
.avisos:hover .avisos__trilho {
  animation-play-state: paused;
}
.avisos__lista {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.avisos__lista li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 28px;
  font: 600 11.5px/1 var(--titulo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.avisos__lista li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amarelo);
}
.avisos__lista li:nth-child(3n + 2)::before {
  background: var(--coral);
}
.avisos__lista li:nth-child(3n)::before {
  background: var(--menta);
}
@keyframes avisos {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .avisos {
    overflow-x: auto;
  }
  .avisos__trilho {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Cabeçalho */
.topo {
  position: relative;
  z-index: 20;
  background: var(--listras);
  color: var(--creme);
}
.topo__linha {
  display: grid;
  grid-template-columns: auto auto minmax(220px, 520px) 1fr;
  grid-template-areas: 'logo loja busca icones';
  align-items: center;
  column-gap: 32px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(247, 242, 200, 0.3);
}
.topo__logo {
  grid-area: logo;
}
.topo__logo img {
  width: auto;
  height: 74px;
}
.topo__loja {
  grid-area: loja;
  font: 600 14px/1.2 var(--titulo);
  white-space: nowrap;
  text-decoration: none;
}
.topo__loja span {
  color: var(--amarelo);
}
.topo__loja:hover span {
  text-decoration: underline;
}
.topo__icone.topo__menu {
  grid-area: menu;
  display: none;
}
.topo__icones {
  grid-area: icones;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 4px;
}
.topo__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.topo__icone:hover {
  color: var(--amarelo);
}
.topo__icone svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topo__icone svg circle[r='.6'] {
  fill: currentColor;
}
.topo__shopee {
  margin-left: 8px;
  padding: 10px 16px;
  border-radius: 40px;
  background: var(--coral);
  color: #fff;
  font: 600 13px/1 var(--titulo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.topo__shopee:hover {
  background: #f2564a;
}

/* Busca */
.busca {
  grid-area: busca;
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 5px 0 20px;
  border-radius: 40px;
  background: #fff;
  box-shadow: 0 3px 0 rgba(26, 43, 95, 0.18);
}
.busca:focus-within {
  box-shadow: 0 0 0 3px var(--amarelo);
}
.busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--marinho);
  font: 600 12.5px/1 var(--titulo);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.busca input::placeholder {
  color: #7f8ab0;
}
.busca input::-webkit-search-cancel-button {
  cursor: pointer;
}
.busca button {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--azul);
  color: var(--creme);
  cursor: pointer;
}
.busca button:hover {
  background: var(--azul-escuro);
}
.busca svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

/* Menu de categorias */
.nav__lista {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav__lista::-webkit-scrollbar {
  display: none;
}
.nav__lista--rola {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
}
.nav__item {
  flex: none;
}
.nav__item--explorar {
  position: static;
}
.nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 2px;
  border: 0;
  background: none;
  color: inherit;
  font: 600 14px/1 var(--titulo);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.nav__link:hover,
.nav__link[aria-current='true'] {
  color: var(--amarelo);
}
.nav__link--explorar {
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
}
.nav__link--explorar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.nav__link--promo {
  padding: 8px 16px;
  border-radius: 40px;
  background: var(--coral);
  color: #fff;
}
.nav__link--promo:hover,
.nav__link--promo[aria-current='true'] {
  background: #f2564a;
  color: #fff;
}
.nav {
  position: relative;
}
/* Telas médias de computador: a barra fica mais compacta para as 4 categorias caberem inteiras. */
@media (max-width: 1199px) {
  .nav__lista {
    gap: 18px;
  }
  .nav__link {
    font-size: 12.5px;
    letter-spacing: 0;
  }
  .nav__link--explorar {
    font-size: 15px;
  }
}

/* Lista do "Explorar categorias" (computador), no estilo das papelarias Judá e Unicórnio:
   abre logo abaixo do botão, uma categoria por linha. */
.nav__explorar {
  position: absolute;
  top: calc(100% - 6px);
  left: 16px;
  z-index: 30;
  width: 320px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: var(--raio);
  background: #fff;
  color: var(--marinho);
  box-shadow: 0 18px 40px rgba(26, 43, 95, 0.22);
}
/* Tipos da categoria (Colas, Borrachas...): abrem ao lado da lista ao passar o mouse ou com o teclado. */
.explorar__sub {
  display: none;
  position: absolute;
  top: 0;
  left: calc(100% - 6px);
  z-index: 1;
  width: 260px;
  min-height: 100%;
  padding: 18px 12px 12px;
  border-radius: 0 var(--raio) var(--raio) 0;
  background: #fff;
  box-shadow: 14px 18px 40px rgba(26, 43, 95, 0.18);
  border-left: 1px solid var(--borda);
}
.explorar__grupo:hover > .explorar__sub,
.explorar__grupo:focus-within > .explorar__sub {
  display: block;
}
.explorar__grupo:hover > .explorar__item {
  background: var(--bloco);
  color: var(--azul);
}
.explorar__sub-titulo {
  margin: 0 10px 8px;
  font: 600 16px/1.2 var(--titulo);
  color: var(--marinho);
}
.explorar__sub ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.explorar__sub-link {
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--marinho);
  font: 700 15px/1.2 var(--texto);
  text-decoration: none;
}
.explorar__sub-link:hover,
.explorar__sub-link:focus-visible {
  background: var(--bloco);
  color: var(--azul);
}
.explorar__sub-todos {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 10px;
  border-top: 1px solid var(--borda);
  color: var(--azul);
  font: 700 14px/1 var(--texto);
  text-decoration: none;
}
.explorar__sub-todos::after {
  content: '→';
}
.explorar__sub-todos:hover {
  color: var(--azul-escuro);
}
@media (min-width: 750px) {
  .nav__explorar {
    left: 32px;
  }
}
.explorar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 6px 6px;
  border-radius: 12px;
  color: var(--marinho);
  font: 700 15px/1.25 var(--texto);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.explorar__item::after {
  content: '›';
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.explorar__item:hover,
.explorar__item[aria-current='page'] {
  background: var(--bloco);
  color: var(--azul);
}
.explorar__item:hover::after,
.explorar__item[aria-current='page']::after,
.explorar__grupo:hover > .explorar__item::after {
  opacity: 1;
  transform: none;
}
/* Seta sempre à mostra quando a categoria tem tipos para abrir. */
.explorar__item--tipos::after {
  opacity: 0.45;
  transform: none;
}
.explorar__foto,
.explorar__icone {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bloco);
  transition: background-color 0.15s ease;
}
.explorar__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.explorar__foto svg {
  width: 74%;
  height: 74%;
}
.explorar__item:hover .explorar__foto,
.explorar__item[aria-current='page'] .explorar__foto {
  background: #fff;
}
.explorar__icone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.explorar__icone--queridinhos {
  background: #ffe1dc;
  color: #e5483a;
}
.explorar__icone--novidades {
  background: #efe4fb;
  color: #7b3fc9;
}
.explorar__icone--promos {
  background: #fff3c4;
  color: #b7791f;
}
.explorar__divisa {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--borda);
}
.explorar__todos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px;
  border-radius: 12px;
  color: var(--azul);
  font: 700 14px/1 var(--texto);
  text-decoration: none;
}
.explorar__todos::after {
  content: '→';
  font-size: 16px;
}
.explorar__todos:hover {
  background: var(--creme-claro);
  color: var(--azul-escuro);
}

/* Menu do celular */
.menu-celular {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 16px 16px 24px;
  background: #fff;
  color: var(--marinho);
  box-shadow: 0 18px 40px rgba(26, 43, 95, 0.22);
}
.menu-celular__titulo {
  margin: 0 0 4px;
  font: 700 12px/1 var(--texto);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul);
}
.menu-celular__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-celular__lista a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--borda);
  font: 600 16px/1.2 var(--titulo);
  text-decoration: none;
}
.menu-celular__lista--extra {
  margin-top: 16px;
}
.menu-celular__lista--extra a {
  font: 700 15px/1.2 var(--texto);
  color: var(--azul);
}

@media (max-width: 989px) {
  .topo__linha {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      'menu logo icones'
      'busca busca busca';
    row-gap: 12px;
    padding-top: 10px;
    padding-bottom: 14px;
    border-bottom: 0;
  }
  .topo__icone.topo__menu {
    display: grid;
    justify-self: start;
    margin-left: -10px;
  }
  .topo__logo {
    justify-self: center;
  }
  .topo__logo img {
    height: 46px;
  }
  .topo__loja,
  .topo__icone--desktop,
  .topo__shopee-texto,
  .nav {
    display: none;
  }
  .topo__shopee {
    margin-left: 0;
    padding: 9px 12px;
    font-size: 12px;
  }
}

/* Banners do topo (carrossel), emendados nas listras, como nas papelarias Judá e Unicórnio.
   Os banners ficam um em cima do outro e trocam com um esmaecer; só o atual aparece e recebe clique. */
.banners {
  position: relative;
  padding-top: 8px;
}
.banners::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 120px;
  background: var(--listras);
}
.banners__caixa {
  position: relative;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  border-radius: 24px;
  background: var(--creme-claro);
  box-shadow: 0 10px 30px rgba(26, 43, 95, 0.15);
}
.banners__lista {
  position: relative;
  height: 100%;
}
.banners__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
.banners__slide.ativo {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease;
}
.banners__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banners__slide:focus-visible {
  outline: 4px solid var(--amarelo);
  outline-offset: -4px;
}
.banners__seta {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--marinho);
  box-shadow: 0 6px 16px rgba(26, 43, 95, 0.18);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.banners__caixa:hover .banners__seta,
.banners__seta:focus-visible {
  opacity: 1;
}
.banners__seta:hover {
  background: #fff;
  transform: scale(1.06);
}
.banners__seta:focus-visible {
  outline: 3px solid var(--amarelo);
}
@media (hover: none) {
  .banners__seta {
    opacity: 1;
  }
}
.banners__seta--antes {
  left: 16px;
}
.banners__seta--depois {
  right: 16px;
}
.banners__seta svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.banners__pontos {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 10px;
}
.banners__ponto {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width 0.3s ease;
}
.banners__ponto::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: rgba(26, 43, 95, 0.22);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, background-color 0.3s ease;
}
.banners__ponto:hover::after {
  background: rgba(26, 43, 95, 0.4);
}
.banners__ponto[aria-current='true'] {
  width: 40px;
}
.banners__ponto[aria-current='true']::after {
  width: 28px;
  background: var(--azul);
}
.banners__ponto:focus-visible {
  outline: 3px solid var(--amarelo);
  border-radius: 12px;
}
@media (max-width: 749px) {
  .banners::before {
    height: 60px;
  }
  .banners__caixa {
    aspect-ratio: 4 / 5;
    border-radius: 18px;
  }
  /* No celular troca arrastando o dedo; as setas ficam só no computador. */
  .banners__seta {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .banners__slide,
  .banners__slide.ativo,
  .banners__ponto,
  .banners__ponto::after {
    transition: none;
  }
}

/* Seções e títulos */
.secao {
  padding-top: 48px;
  padding-bottom: 8px;
}
.titulo {
  margin-bottom: 24px;
}
.titulo h2 {
  position: relative;
  padding-bottom: 12px;
  font-size: clamp(24px, 3vw, 32px);
}
.titulo h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 5px;
  border-radius: 10px;
  background: var(--amarelo);
}
.titulo--com-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.titulo-pequeno {
  margin-bottom: 20px;
  font: 700 15px/1 var(--texto);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cinza);
}

/* Categorias em blocos (como na Papelaria Unicórnio): a foto do produto sai de cima de um fundo lilás.
   O fundo branco das fotos some no lilás com mix-blend-mode: multiply, por isso vale escolher
   fotos com fundo branco (coluna "foto" da aba categorias). */
/* Folga em cima: a foto sai do bloco e sobe mais um pouco no :hover; sem ela, a caixa que rola cortaria a foto. */
.categorias__lista {
  display: flex;
  gap: 12px;
  margin: -10px 0 0;
  padding: 18px 2px 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.categorias__lista::-webkit-scrollbar {
  display: none;
}
.categorias__lista > li {
  flex: 0 0 112px;
  scroll-snap-align: start;
}
/* Centraliza; se não couber, rola do começo (margem automática não corta o primeiro item). */
.categorias__lista > li:first-child {
  margin-left: auto;
}
.categorias__lista > li:last-child {
  margin-right: auto;
}
@media (min-width: 750px) {
  .categorias__lista {
    gap: 18px;
  }
  .categorias__lista > li {
    flex: 1 1 0;
    min-width: 100px;
    max-width: 196px;
  }
}
.categoria {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--marinho);
  font: 600 14px/1.3 var(--titulo);
  text-align: center;
  text-decoration: none;
}
@media (min-width: 1100px) {
  .categoria {
    font-size: 15px;
  }
}
.categoria__foto {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 6 / 5;
}
.categoria__foto::before {
  content: '';
  position: absolute;
  inset: 22% 0 0;
  border-radius: 18px;
  background: var(--bloco);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.categoria__foto img {
  position: absolute;
  left: 7%;
  bottom: 5%;
  width: 86%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.25s ease;
}
.categoria__foto svg {
  position: absolute;
  left: 22%;
  bottom: 10%;
  width: 56%;
  height: 72%;
}
/* O fundo do bloco nunca muda de cor: a foto se mistura com ele (multiply), então um fundo mais escuro
   deixaria o produto azulado. No mouse, a foto só sobe um pouco. */
.categoria:hover .categoria__foto img {
  transform: translateY(-5px) scale(1.04);
}
/* Categoria atual: nome azul e uma barrinha azul embaixo (moldura não: a foto passava por cima dela). */
.categoria[aria-current='page'] {
  color: var(--azul);
}
.categoria[aria-current='page']::after {
  content: '';
  width: 26px;
  height: 4px;
  margin-top: -4px;
  border-radius: 4px;
  background: var(--azul);
}
@media (prefers-reduced-motion: reduce) {
  .categoria:hover .categoria__foto img {
    transform: none;
  }
}

/* Grade de produtos */
.grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
}
@media (min-width: 750px) {
  .grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}
@media (min-width: 1100px) {
  .grade {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Vitrines que rolam para o lado ("Os queridinhos", "Acabou de chegar").
   A caixa que rola corta tudo o que passa dela, então ganha uma folga (padding) em volta, compensada
   com margem negativa: assim o card sobe no :hover e a sombra aparece sem ser cortada.
   Sem barra de rolagem: no computador tem as setas (.trilho__seta); no celular, arrasta com o dedo. */
.trilho {
  position: relative;
}
.grade--rolagem {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: -12px -14px -18px;
  padding: 12px 14px 28px;
  scroll-padding-inline: 14px;
  scrollbar-width: none;
}
.grade--rolagem::-webkit-scrollbar {
  display: none;
}
.trilho__seta {
  position: absolute;
  top: 30%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--marinho);
  box-shadow: 0 6px 18px rgba(26, 43, 95, 0.22);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}
.trilho__seta:hover {
  color: var(--azul);
  transform: scale(1.06);
}
.trilho__seta:focus-visible {
  outline: 3px solid var(--amarelo);
}
.trilho__seta--antes {
  left: -18px;
}
.trilho__seta--depois {
  right: -18px;
}
.trilho__seta svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 749px) {
  .trilho__seta {
    display: none;
  }
}
/* No celular, 2 cards e a pontinha do 3º, para mostrar que dá para arrastar. */
.grade--rolagem .card {
  flex: 0 0 calc(44% - 6px);
  scroll-snap-align: start;
}
@media (min-width: 750px) {
  .grade--rolagem .card {
    flex-basis: calc(33.333% - 16px);
  }
}
@media (min-width: 1100px) {
  .grade--rolagem .card {
    flex-basis: calc(25% - 18px);
  }
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
  box-shadow: var(--sombra);
  transform: translateY(-3px);
}
.card__foto {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: #fff;
}
.card__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.card__foto--vazia {
  display: grid;
  place-items: center;
  background: var(--fundo, var(--menta));
}
.card__ilustracao {
  width: 62%;
  height: 62%;
}
.card__foto--vazia img {
  display: none;
}
.card__selo {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 10px;
  border-radius: 40px;
  background: var(--coral);
  color: #fff;
  font: 600 12px/1 var(--titulo);
}
.card__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
}
.card__categoria {
  align-self: flex-start;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza);
  text-decoration: none;
}
.card__categoria:hover {
  color: var(--azul);
}
.card__nome {
  font: 700 15px/1.35 var(--texto);
}
.card__nome a {
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__nome a:hover {
  color: var(--azul);
}
.card__preco {
  margin: 4px 0 10px;
}
.card__de {
  margin-right: 6px;
  font-size: 13px;
  color: #8a93b5;
}
.card__por {
  font: 600 19px/1 var(--titulo);
  color: var(--marinho);
}
.card__de:not([hidden]) + .card__por,
.card--promo .card__por {
  color: var(--coral);
}
.card__botao {
  margin-top: auto;
  min-height: 40px;
  padding: 0 12px;
  font-size: 12px;
}
/* Cards estreitos (vitrine que rola, no celular): o texto do botão cabe numa linha só. */
@media (max-width: 749px) {
  .grade--rolagem .card__botao {
    padding: 0 6px;
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
}

/* Filtros */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.filtros__ativo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 6px 6px 14px;
  border-radius: 40px;
  background: var(--creme);
  font-weight: 700;
  font-size: 14px;
}
.filtros__ativo button {
  padding: 6px 12px;
  border: 0;
  border-radius: 40px;
  background: var(--azul);
  color: #fff;
  font: 700 12px/1 var(--texto);
  cursor: pointer;
}
.filtros select {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: 40px;
  background: #fff;
  color: var(--marinho);
  font: 600 14px/1 var(--texto);
}
.aviso-carregando,
.vazio p {
  color: var(--cinza);
}
.vazio {
  padding: 32px 0;
  text-align: center;
}
.nota-preco {
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--cinza);
}

/* Lista de material */
.lista-material {
  margin-top: 56px;
  padding: 48px 0;
  background: var(--listras);
  color: var(--creme);
}
.lista-material__caixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.lista-material .kicker {
  color: var(--amarelo);
}
.lista-material h2 {
  margin-bottom: 8px;
  font-size: clamp(24px, 3vw, 34px);
}
.lista-material p:last-child {
  max-width: 620px;
  margin: 0;
}

/* Loja física */
.loja {
  display: grid;
  gap: 32px;
  align-items: stretch;
}
.loja h2 {
  margin-bottom: 16px;
  font-size: clamp(24px, 3vw, 34px);
}
.loja__lista {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.loja__lista a {
  color: var(--azul);
}
.loja__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.loja__mapa {
  display: grid;
  place-items: center;
  min-height: 320px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--menta);
  box-shadow: var(--sombra);
}
.loja__mapa iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
}
@media (min-width: 990px) {
  .loja {
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
  }
}

/* Últimos posts do Instagram */
.insta-feed__perfil {
  display: flex;
  align-items: center;
  gap: 14px;
}
.insta-feed__avatar {
  flex: none;
  width: 64px;
  height: 64px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--amarelo), var(--coral), var(--lilas));
}
.insta-feed__conta {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--cinza);
}
.insta-feed__conta a {
  font-weight: 700;
  color: var(--azul);
  text-decoration: none;
}
.insta-feed__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* No celular, 3 posts lado a lado (os outros ficam escondidos). */
@media (max-width: 989px) {
  .insta-feed__grade > li:nth-child(n + 4) {
    display: none;
  }
}
/* No computador, todos numa linha só; --insta-colunas = quantidade de posts (vem do inicio.js). */
@media (min-width: 990px) {
  .insta-feed__grade {
    grid-template-columns: repeat(var(--insta-colunas, 6), minmax(0, 1fr));
    gap: 12px;
  }
}
.post__link {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--menta);
}
.post__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.post__link:hover img,
.post__link:focus-visible img {
  transform: scale(1.05);
}
.post__tipo {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 6px;
  border-radius: 40px;
  background: rgba(26, 43, 95, 0.75);
  color: #fff;
  font: 600 11px/1 var(--titulo);
}
.post__tipo svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.post__icone-album,
.post--album .post__icone-video {
  display: none;
}
.post--album .post__icone-album {
  display: block;
}
.post__legenda {
  position: absolute;
  inset: auto 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 32px 12px 10px;
  background: linear-gradient(transparent, rgba(26, 43, 95, 0.85));
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.post__link:hover .post__legenda,
.post__link:focus-visible .post__legenda {
  opacity: 1;
}
@media (max-width: 749px) {
  .insta-feed .titulo--com-filtro .botao {
    width: 100%;
  }
  .post__link {
    border-radius: 8px;
  }
  .post__tipo-texto,
  .post__legenda {
    display: none;
  }
  .post__tipo {
    padding: 4px;
  }
}

/* Convite para o Instagram (quando o feed não está ligado) */
.insta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 56px;
  padding: 40px 24px;
  border: 2px dashed rgba(30, 79, 216, 0.25);
  border-radius: 24px;
  background: var(--creme-claro);
  text-align: center;
}
.insta__avatar {
  width: 110px;
  height: 110px;
  padding: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--amarelo), var(--coral), var(--lilas));
}
.insta h2 {
  margin-bottom: 8px;
  font-size: clamp(22px, 3vw, 30px);
}
.insta__texto p:last-child {
  margin: 0;
  color: var(--cinza);
}
@media (min-width: 750px) {
  .insta {
    flex-direction: row;
    padding: 40px 56px;
    gap: 40px;
    text-align: left;
  }
  .insta__texto {
    flex: 1;
  }
}

/* Rodapé */
.rodape {
  background: var(--listras);
  color: var(--creme);
  font-size: 14px;
}
.rodape a {
  color: var(--creme);
  text-decoration: none;
}
.rodape a:hover {
  color: var(--amarelo);
}
.rodape__colunas {
  display: grid;
  gap: 32px;
  padding-top: 56px;
  padding-bottom: 40px;
}
.rodape__colunas p {
  margin: 0 0 6px;
}
.rodape__marca img {
  width: 200px;
  height: auto;
  margin-bottom: 12px;
}
.rodape__titulo {
  font: 600 16px/1.2 var(--titulo);
  margin-bottom: 12px !important;
}
.rodape__legal {
  border-top: 1px solid rgba(247, 242, 200, 0.25);
  font-size: 12px;
}
.rodape__legal p {
  margin: 0;
  padding: 20px 0 96px;
  line-height: 1.7;
  opacity: 0.85;
}
@media (min-width: 750px) {
  .rodape__colunas {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
  .rodape__legal p {
    padding-bottom: 24px;
  }
}

/* WhatsApp flutuante */
.whats-flutuante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 50px;
  background: #25d366;
  color: #fff;
  font: 600 13px/1 var(--titulo);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}
.whats-flutuante:hover {
  transform: translateY(-3px) scale(1.03);
}
.whats-flutuante svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}
.whats-flutuante span {
  display: none;
  padding-right: 6px;
}
@media (min-width: 990px) {
  .whats-flutuante span {
    display: inline;
  }
}

/* Títulos com "Ver todos" e botão "Mostrar mais" */
.titulo--com-link {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.ver-todos {
  flex: none;
  padding-bottom: 14px;
  font-weight: 700;
  color: var(--azul);
  text-decoration: none;
}
.ver-todos::after {
  content: ' →';
}
.ver-todos:hover {
  text-decoration: underline;
}
.mais {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* ============================================================ Página de categoria */
.cat-hero {
  position: relative;
  padding-top: 16px;
}
.cat-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 150px;
  background: var(--listras);
}
.cat-hero__caixa {
  position: relative;
  display: grid;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  padding: 40px 24px;
  border-radius: 24px;
  background-color: var(--fundo, var(--creme-claro));
  background-image: radial-gradient(rgba(26, 43, 95, 0.09) 2px, transparent 2.5px);
  background-size: 22px 22px;
  box-shadow: 0 10px 30px rgba(26, 43, 95, 0.15);
}
.cat-hero__texto {
  position: relative;
  z-index: 1;
}
.cat-hero h1 {
  margin-bottom: 12px;
  color: var(--azul);
  font-size: clamp(32px, 5vw, 54px);
}
.cat-hero__descricao {
  max-width: 560px;
  margin: 0 0 24px;
  font-size: 18px;
  color: var(--marinho);
}
.cat-hero__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cat-hero__arte {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
}
.cat-hero__arte::before {
  content: '';
  position: absolute;
  width: min(300px, 80%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  opacity: 0.75;
}
.cat-hero__ilustracao {
  position: relative;
  width: min(260px, 70%);
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(26, 43, 95, 0.15));
}
/* Foto principal da categoria em cima do círculo claro (o fundo branco da foto some no círculo). */
.cat-hero__principal {
  position: relative;
  width: min(270px, 72%);
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.cat-hero__banner {
  position: relative;
  width: 100%;
  max-height: 320px;
  border-radius: 18px;
  object-fit: cover;
}
.cat-hero__fotos {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cat-hero__fotos li {
  position: absolute;
  width: 96px;
  height: 96px;
  padding: 6px;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 22px rgba(26, 43, 95, 0.16);
}
.cat-hero__fotos li:nth-child(1) {
  top: 6%;
  left: 4%;
  transform: rotate(-6deg);
}
.cat-hero__fotos li:nth-child(2) {
  right: 4%;
  bottom: 6%;
  width: 84px;
  height: 84px;
  transform: rotate(5deg);
}
.cat-hero__fotos img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cat-hero__confete {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cat-hero__confete--1 {
  top: -30px;
  right: 34%;
  width: 90px;
  height: 90px;
  background: rgba(255, 201, 60, 0.45);
}
.cat-hero__confete--2 {
  bottom: -40px;
  left: 40%;
  width: 120px;
  height: 120px;
  background: rgba(155, 93, 229, 0.16);
}
@media (min-width: 750px) {
  .cat-hero__caixa {
    grid-template-columns: 1.2fr 1fr;
    padding: 48px 56px;
  }
  .cat-hero__arte {
    min-height: 300px;
  }
}
@media (max-width: 749px) {
  .cat-hero::before {
    height: 90px;
  }
  .cat-hero__caixa {
    text-align: center;
  }
  .cat-hero__descricao {
    font-size: 16px;
  }
  .cat-hero__botoes {
    justify-content: center;
  }
  .cat-hero__arte {
    order: -1;
    min-height: 190px;
  }
  .cat-hero__principal {
    width: min(190px, 60%);
  }
  .cat-hero__fotos li {
    width: 66px;
    height: 66px;
    padding: 4px;
    border-radius: 16px;
  }
  .cat-hero__fotos li:nth-child(2) {
    width: 58px;
    height: 58px;
  }
}

/* Outras categorias (blocos menores, logo abaixo do banner) */
.categorias__lista--pequena > li {
  flex: 0 0 96px;
  min-width: 0;
  max-width: none;
}
.categorias__lista--pequena .categoria {
  gap: 8px;
  font-size: 13px;
}
.categorias__lista--pequena .categoria__foto::before {
  border-radius: 14px;
}

/* Ferramentas da categoria */
.cat-ferramentas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.cat-ferramentas__busca {
  flex: 1 1 240px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--borda);
  border-radius: 40px;
  font: 600 14px/1 var(--texto);
  color: var(--marinho);
}
.cat-ferramentas__busca:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--amarelo);
}
.cat-ferramentas select {
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: 40px;
  background: #fff;
  color: var(--marinho);
  font: 600 14px/1 var(--texto);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--borda);
  border-radius: 40px;
  background: #fff;
  font: 700 14px/1 var(--texto);
  color: var(--marinho);
  cursor: pointer;
}
.chip input {
  accent-color: var(--coral);
  width: 16px;
  height: 16px;
}
.chip:has(input:checked) {
  border-color: var(--coral);
  background: #ffe1dc;
}
.cat-ferramentas__total {
  margin: 0 0 0 auto;
  font-weight: 700;
  color: var(--cinza);
}

/* Ajuda no fim da categoria */
.cat-ajuda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding: 28px 32px;
  border-radius: 24px;
  background: var(--creme-claro);
  border: 2px dashed rgba(30, 79, 216, 0.25);
}
.cat-ajuda h2 {
  margin-bottom: 6px;
  font-size: 22px;
}
.cat-ajuda p {
  margin: 0;
  color: var(--cinza);
}
.cat-ajuda__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Categoria que não existe */
.cat-nao-achou {
  padding: 56px 0 24px;
  text-align: center;
}
.cat-nao-achou h1 {
  margin-bottom: 12px;
  color: var(--azul);
}
.cat-nao-achou p {
  margin: 0 0 24px;
  color: var(--cinza);
}

/* Tipos de produto na página da categoria (só colas, só borrachas...) */
.tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.tipos__item {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--borda);
  border-radius: 40px;
  background: #fff;
  color: var(--marinho);
  font: 700 14px/1 var(--texto);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tipos__item:hover {
  border-color: var(--azul);
  color: var(--azul);
}
.tipos__item[aria-current='true'] {
  border-color: var(--azul);
  background: var(--azul);
  color: #fff;
}
.tipos__item:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
}
/* No celular os tipos ficam numa linha só, rolando para o lado. */
@media (max-width: 749px) {
  .tipos {
    flex-wrap: nowrap;
    margin-right: -16px;
    padding-right: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tipos::-webkit-scrollbar {
    display: none;
  }
}

/* ============================================================ Minha lista (enviada pelo WhatsApp) */
/* Botão do card, embaixo do "Ver na Shopee" */
.card__lista {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 8px;
  padding: 0 10px;
  border: 1.5px solid var(--borda);
  border-radius: 40px;
  background: #fff;
  color: var(--azul);
  font: 700 13px/1.1 var(--texto);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.card__lista:hover {
  border-color: var(--azul);
}
.card__lista--ativo {
  border-color: #b8e8c8;
  background: #e8f8ee;
  color: #12804a;
}
.card__lista:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
}
@media (max-width: 749px) {
  .grade--rolagem .card__lista {
    padding: 0 4px;
    font-size: 12px;
    white-space: nowrap;
  }
}

/* Botão flutuante "Minha lista" (lado esquerdo; o WhatsApp fica no direito) */
.lista-flutuante {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 0;
  border-radius: 50px;
  background: var(--azul);
  color: #fff;
  font: 600 14px/1 var(--titulo);
  box-shadow: 0 8px 24px rgba(26, 43, 95, 0.28);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.lista-flutuante:hover {
  transform: translateY(-3px);
}
.lista-flutuante:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
}
.lista-flutuante svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lista-flutuante__qtd {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--amarelo);
  color: var(--marinho);
  font: 700 13px/1 var(--texto);
}
.lista-flutuante--pulo {
  animation: lista-pulo 0.45s ease;
}
@keyframes lista-pulo {
  40% {
    transform: scale(1.12);
  }
}
@media (max-width: 749px) {
  .lista-flutuante__texto {
    display: none;
  }
}

/* Aviso rápido "Adicionado à sua lista" */
.lista-aviso {
  position: fixed;
  left: 50%;
  bottom: 86px;
  z-index: 60;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 40px;
  background: var(--marinho);
  color: #fff;
  font: 700 14px/1.2 var(--texto);
  box-shadow: 0 10px 26px rgba(26, 43, 95, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.lista-aviso--ver {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Painel da lista: abre à direita no computador e ocupa a tela no celular */
.lista-aberta {
  overflow: hidden;
}
.lista-fundo {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(26, 43, 95, 0.45);
}
.lista {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  background: #fff;
  color: var(--marinho);
  box-shadow: -12px 0 40px rgba(26, 43, 95, 0.25);
}
.lista__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 8px;
}
.lista__topo h2 {
  font-size: 22px;
}
.lista__fechar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--bloco);
  color: var(--marinho);
  font: 400 26px/1 var(--texto);
  cursor: pointer;
}
.lista__dica {
  margin: 0;
  padding: 0 20px 12px;
  border-bottom: 1px solid var(--borda);
  color: var(--cinza);
  font-size: 14px;
  line-height: 1.45;
}
.lista__itens {
  flex: 1;
  margin: 0;
  padding: 8px 20px;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
}
.lista__item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--borda);
}
.lista__foto {
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bloco);
}
.lista__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.lista__nome {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--marinho);
  font: 700 14px/1.3 var(--texto);
  text-decoration: none;
}
.lista__nome:hover {
  color: var(--azul);
}
.lista__preco {
  display: block;
  margin: 4px 0 8px;
  color: var(--cinza);
  font-size: 13px;
}
.lista__qtd {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borda);
  border-radius: 40px;
}
.lista__qtd button {
  width: 34px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--azul);
  font: 700 18px/1 var(--texto);
  cursor: pointer;
}
.lista__qtd span {
  min-width: 28px;
  font: 700 15px/1 var(--texto);
  text-align: center;
}
.lista__remover {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--cinza);
  font: 600 12px/1 var(--texto);
  text-decoration: underline;
  cursor: pointer;
}
.lista__remover:hover {
  color: var(--coral);
}
.lista__vazia {
  flex: 1;
  margin: 0;
  padding: 32px 20px;
  color: var(--cinza);
  text-align: center;
}
.lista__rodape {
  display: grid;
  gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--borda);
  background: var(--creme-claro);
}
.lista__total {
  margin: 0;
  font: 600 17px/1.2 var(--titulo);
}
.lista__enviar {
  width: 100%;
  background: #25d366;
  color: #fff;
}
.lista__enviar:hover {
  background: #1fb457;
}
.lista__limpar {
  justify-self: center;
  border: 0;
  background: none;
  color: var(--cinza);
  font: 600 13px/1 var(--texto);
  text-decoration: underline;
  cursor: pointer;
}
.lista__aviso {
  margin: 0;
  color: var(--cinza);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
.lista-aviso {
  z-index: 80; /* aparece também com o painel da lista aberto */
}
.lista__qtd button[aria-disabled='true'] {
  color: #b6bdd3;
  cursor: not-allowed;
}
.lista__limite {
  margin: -4px 0 0;
  color: var(--cinza);
  font-size: 12px;
}

/* ===================== V2: página de produto (produto.html) ===================== */
.prod-carregando {
  padding: 48px 0;
}
.migalhas {
  font-size: 14px;
  color: var(--cinza);
  padding: 18px 0 12px;
}
.migalhas a {
  text-decoration: none;
}
.migalhas a:hover {
  text-decoration: underline;
}
.produto__grade {
  display: grid;
  gap: 24px;
}
@media (min-width: 900px) {
  .produto__grade {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px;
    align-items: start;
  }
  .produto__info {
    position: sticky;
    top: 16px;
  }
}
.produto__foto {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.produto__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.produto__foto--vazia {
  background: var(--bloco);
}
.produto__nome {
  font-size: clamp(24px, 3.2vw, 32px);
  margin: 4px 0 10px;
}
.produto__preco {
  margin: 0;
  font-size: 26px;
}
.produto__preco strong {
  font-family: var(--titulo);
  font-weight: 700;
  color: var(--azul);
}
.produto__preco s {
  font-size: 16px;
  color: var(--cinza);
}
.produto__ref {
  font-size: 13px;
  color: var(--cinza);
  margin: 4px 0 0;
}
.onde {
  margin-top: 18px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: #fff;
}
.onde__cab {
  padding: 14px 16px 10px;
}
.onde__cab h2 {
  font-size: 19px;
}
.onde__cab p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--cinza);
}
.onde__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.onde__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--borda);
}
.onde__canal {
  font-weight: 700;
  display: flex;
  flex-direction: column;
}
.onde__selo {
  font-weight: 400;
  font-size: 13px;
  color: #2f7a4a;
}
.onde__rodape {
  margin: 0;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--cinza);
  background: var(--creme-claro);
  border-top: 1px solid var(--borda);
}
.produto__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 16px;
}
.produto__lista {
  width: auto;
  margin: 0;
}
.produto__whats {
  font-size: 15px;
}
.produto__descricao {
  white-space: pre-line;
  margin: 18px 0 0;
}
.produto__secao {
  margin-top: 12px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: #fff;
}
.produto__secao summary {
  padding: 13px 16px;
  cursor: pointer;
  font-weight: 700;
}
.produto__secao > :not(summary) {
  margin: 0;
  padding: 0 16px 14px 16px;
}
.produto__secao ol {
  padding-left: 34px;
}
.barra-compra {
  display: none;
}
@media (max-width: 749px) {
  .onde__linha {
    flex-direction: column;
    align-items: stretch;
  }
  .onde__linha .botao {
    text-align: center;
  }
  body.com-barra-compra {
    padding-bottom: 76px;
  }
  .barra-compra:not([hidden]) {
    display: flex;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    padding: 10px 12px;
    background: #fff;
    border-top: 1px solid var(--borda);
    box-shadow: 0 -6px 18px rgba(26, 43, 95, 0.08);
  }
  .barra-compra__principal {
    flex: 1;
    text-align: center;
  }
  /* Os botões flutuantes sobem para não cobrir a barra de compra. */
  body.com-barra-compra .whats-flutuante,
  body.com-barra-compra .lista-flutuante {
    bottom: 86px;
  }
  body.com-barra-compra .lista-aviso {
    bottom: 150px;
  }
}

/* ===================== V2: Instagram em "polaroids" (3 em cima, 3 embaixo) ===================== */
.insta-feed__grade,
.insta-feed__grade[style] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 14px;
  padding-top: 10px;
}
.insta-feed__grade > li:nth-child(n + 4) {
  display: block;
}
@media (min-width: 750px) {
  .insta-feed__grade,
  .insta-feed__grade[style] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 28px;
  }
}
@media (min-width: 990px) {
  .insta-feed__grade,
  .insta-feed__grade[style] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 36px;
    max-width: 1040px;
    margin-inline: auto;
  }
}
.post {
  position: relative;
  transform: rotate(-1.2deg);
  transition: transform 0.25s ease;
}
.post:nth-child(even) {
  transform: rotate(1.2deg);
}
.post:hover,
.post:focus-within {
  transform: rotate(0) translateY(-4px);
}
.post .post__link {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 12px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(26, 43, 95, 0.14);
  overflow: visible;
  text-decoration: none;
  color: var(--marinho);
}
.post .post__link img {
  aspect-ratio: 1;
  height: auto;
  border-radius: 3px;
}
.post .post__link:hover img,
.post .post__link:focus-visible img {
  transform: none;
}
.post .post__tipo {
  top: 18px;
  right: 18px;
}
.post .post__legenda {
  position: static;
  -webkit-line-clamp: 2;
  padding: 10px 2px 0;
  min-height: calc(2 * 1.35em + 10px);
  background: none;
  color: var(--marinho);
  font-size: 14px;
  font-weight: 600;
  opacity: 1;
}
.post__ver {
  margin-top: 6px;
  padding: 0 2px;
  font: 600 12px/1.2 var(--titulo);
  color: var(--azul);
}
/* Fitinha colada em cima de cada foto, cada uma de uma cor. */
.post__fita {
  position: absolute;
  z-index: 2;
  top: -11px;
  left: 50%;
  width: 84px;
  height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--amarelo);
  opacity: 0.85;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(26, 43, 95, 0.15);
  pointer-events: none;
}
.post:nth-child(4n + 2) .post__fita {
  background: var(--coral);
  transform: translateX(-50%) rotate(4deg);
}
.post:nth-child(4n + 3) .post__fita {
  background: #9fe0d6;
  transform: translateX(-50%) rotate(-5deg);
}
.post:nth-child(4n + 4) .post__fita {
  background: var(--lilas);
  transform: translateX(-50%) rotate(2deg);
}
@media (max-width: 749px) {
  .post .post__link {
    padding: 7px 7px 10px;
  }
  .post .post__tipo {
    top: 13px;
    right: 13px;
  }
  .post .post__legenda {
    font-size: 13px;
  }
  .post__fita {
    width: 60px;
    height: 18px;
    top: -9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .post,
  .post:nth-child(even),
  .post:hover {
    transform: none;
    transition: none;
  }
}

/* ===================== V2: "+ Adicionar à minha lista" é o botão principal (sem botão da Shopee) ===================== */
.card__lista {
  margin-top: auto;
  min-height: 42px;
  padding: 6px 12px;
  border: 2px solid var(--azul);
  background: var(--azul);
  color: #fff;
  font: 600 12px/1.15 var(--titulo);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.card__lista:hover {
  border-color: var(--azul-escuro);
  background: var(--azul-escuro);
}
.card__lista--ativo,
.card__lista--ativo:hover {
  border-color: #12804a;
  background: #12804a;
  color: #fff;
}
@media (max-width: 749px) {
  .grade--rolagem .card__lista,
  .card__lista {
    padding: 6px 6px;
    font-size: 11px;
    letter-spacing: 0.01em;
    white-space: normal;
  }
}
.produto__acoes {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 18px;
}
.produto__lista {
  width: 100%;
  min-height: 54px;
  font-size: 15px;
}
.produto__dica {
  margin: 0;
  font-size: 14px;
  color: var(--cinza);
}
.barra-compra__principal {
  flex: 1;
  margin: 0;
  min-height: 48px;
  font-size: 13px;
}

/* ===================== V2: contraste leve (o fundo deixa de ser todo branco) ===================== */
body {
  background: #fbf6ea;
}
.card,
.post .post__link,
.produto__foto,
.onde,
.produto__secao {
  background: #fff;
}
.card {
  border-color: rgba(26, 43, 95, 0.08);
  box-shadow: 0 4px 14px rgba(26, 43, 95, 0.06);
}
.card__foto {
  background: #fff;
}

/* ===================== V2: seção da loja no estilo dos polaroids ===================== */
.loja {
  padding-top: 64px;
  padding-bottom: 72px;
  gap: 40px;
  align-items: center;
}
.loja__info {
  position: relative;
  padding: 34px 28px 28px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(26, 43, 95, 0.1);
}
.loja__fita {
  position: absolute;
  z-index: 2;
  top: -12px;
  left: 50%;
  width: 96px;
  height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--amarelo);
  opacity: 0.88;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(26, 43, 95, 0.15);
}
.loja__fita--mapa {
  background: var(--coral);
  transform: translateX(-50%) rotate(4deg);
}
.loja__lista {
  gap: 14px;
  margin-bottom: 26px;
}
.loja__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.loja__item strong {
  display: block;
  font-family: var(--titulo);
  font-size: 14px;
  font-weight: 600;
}
.loja__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bloco);
  color: var(--azul);
}
.loja__icone svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.loja__item--2 .loja__icone { background: #ffe3df; color: #d4473a; }
.loja__item--3 .loja__icone { background: #fff1c9; color: #a77400; }
.loja__item--4 .loja__icone { background: #dff5e6; color: #12804a; }
.botao--whats {
  background: #25d366;
  border-color: #25d366;
  color: #0b3d22;
}
.botao--whats:hover {
  background: #1fb858;
  border-color: #1fb858;
  color: #fff;
}
.loja__polaroid {
  position: relative;
  margin: 0;
  padding: 12px 12px 14px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(26, 43, 95, 0.14);
  transform: rotate(1.2deg);
}
.loja .loja__mapa,
.loja .loja__mapa iframe {
  min-height: 360px;
  border-radius: 4px;
  box-shadow: none;
}
.loja__polaroid figcaption {
  margin-top: 10px;
  text-align: center;
  font: 600 14px/1.3 var(--titulo);
  color: var(--marinho);
}
@media (max-width: 749px) {
  .loja {
    padding-top: 40px;
    padding-bottom: 56px;
  }
  .loja__info {
    padding: 30px 18px 22px;
  }
  .loja__botoes .botao {
    flex: 1 1 100%;
  }
  .loja__polaroid {
    transform: none;
  }
  .loja .loja__mapa,
  .loja .loja__mapa iframe {
    min-height: 280px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .loja__polaroid { transform: none; }
}

/* ===================== V2: CEP na "Minha lista" ===================== */
.lista__dados {
  margin: 4px 0 12px;
}
.lista__campo {
  display: grid;
  gap: 4px;
  font: 600 13px/1.2 var(--titulo);
  color: var(--marinho);
}
.lista__campo input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--borda);
  border-radius: 12px;
  background: #fff;
  color: var(--marinho);
  font: 400 16px/1 var(--texto);
}
.lista__campo input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(30, 79, 216, 0.15);
}
.lista__campo input.lista__campo--erro {
  border-color: #d4473a;
}
.lista__erro {
  margin: 6px 0 0;
  font-size: 13px;
  color: #c0392b;
}
.lista__erro:empty {
  display: none;
}
.lista__dados {
  display: grid;
  gap: 10px;
}
.lista__privacidade {
  margin: 0;
  font-size: 12px;
  color: var(--cinza);
}

/* ===================== V2: botão laranja da Shopee no rodapé e lixeira na lista ===================== */
.rodape a.botao-shopee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 11px 20px;
  border-radius: 40px;
  background: #ee4d2d;
  color: #fff;
  font: 600 14px/1 var(--titulo);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease, transform 0.2s ease;
}
.rodape a.botao-shopee:hover,
.rodape a.botao-shopee:focus-visible {
  background: #d73211;
  color: #fff;
  transform: translateY(-1px);
}
.botao-shopee svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lista__remover {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  text-decoration: none;
  color: var(--cinza);
  transition: background 0.2s ease, color 0.2s ease;
}
.lista__remover svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lista__remover:hover,
.lista__remover:focus-visible {
  background: #ffe3df;
  color: #d4473a;
}
.botao--shopee {
  background: #ee4d2d;
  border-color: #ee4d2d;
  color: #fff;
}
.botao--shopee:hover {
  background: #d73211;
  border-color: #d73211;
  color: #fff;
}
.botao--shopee svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===================== V2: os três botões da loja do mesmo tamanho, com ícone ===================== */
.loja .loja__botoes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.loja .loja__botoes .botao {
  width: 100%;
  min-height: 50px;
  gap: 10px;
}
.loja .loja__botoes .botao svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===================== V2: "Limpar lista" como botão com lixeira ===================== */
.lista__limpar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid #f1c9c3;
  border-radius: 999px;
  background: #fff;
  color: #c4473a;
  font: 700 14px/1 var(--texto);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lista__limpar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lista__limpar:hover,
.lista__limpar:focus-visible {
  background: #ffe3df;
  border-color: #e9a59b;
}

/* ===================== V2: página do aviso de privacidade ===================== */
.privacidade {
  max-width: 760px;
  padding-top: 40px;
  padding-bottom: 64px;
  color: var(--marinho);
  line-height: 1.65;
}
.privacidade__kicker {
  margin: 0 0 6px;
  color: var(--cinza);
  font-size: 14px;
}
.privacidade h1 {
  margin: 0 0 16px;
  color: var(--azul);
}
.privacidade h2 {
  margin: 32px 0 8px;
  font-size: 20px;
}
.privacidade ul {
  padding-left: 20px;
}
.privacidade li + li {
  margin-top: 8px;
}
.privacidade a:not(.botao) {
  color: var(--azul);
}
.privacidade .botao {
  margin-top: 16px;
}
.lista__privacidade a {
  color: inherit;
}

/* ===================== V2 (LGPD): capa do mapa, que só carrega no clique ===================== */
.mapa-capa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 360px;
  padding: 24px;
  border: 0;
  border-radius: 4px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    repeating-linear-gradient(0deg, transparent 0 38px, #d9e3f7 38px 40px),
    repeating-linear-gradient(90deg, transparent 0 38px, #d9e3f7 38px 40px),
    #eef3fc;
  color: var(--marinho);
  font: 400 14px/1.4 var(--texto);
  text-align: center;
  cursor: pointer;
}
.mapa-capa svg {
  width: 52px;
  height: 52px;
  padding: 12px;
  border-radius: 50%;
  background: var(--azul);
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-shadow: 0 8px 20px rgba(30, 79, 216, 0.3);
  transition: transform 0.2s ease;
}
.mapa-capa strong {
  font: 700 18px/1.2 var(--titulo);
  color: var(--azul);
}
.mapa-capa span {
  max-width: 260px;
  color: var(--cinza);
}
.mapa-capa:hover svg,
.mapa-capa:focus-visible svg {
  transform: translateY(-3px);
}