/* Dred Stil — estilos do site (mobile-first) */

@font-face { font-family: "Roboto Condensed"; font-weight: 400; font-display: swap; src: url("/fonts/roboto-condensed-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 600; font-display: swap; src: url("/fonts/roboto-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/roboto-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 900; font-display: swap; src: url("/fonts/roboto-condensed-900.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-400.woff2") format("woff2"); }

:root {
  --fundo: #ebeff2;
  --fundo-topo: #f5f5f5;
  --superficie: #fff;
  --tinta: #000;
  --tinta-2: #181a1b;
  --suave: #5f6368;
  --linha: rgba(0, 0, 0, .12);
  --destaque: #c8312c;
  --sucesso: #1f7a3d;
  --whats: #25d366;
  --raio: 7px;
  --fonte: "Roboto Condensed", system-ui, sans-serif;
  --fonte-serif: "Instrument Serif", Georgia, serif;
  --altura-barra-mobile: 60px;
  --largura: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta); font: 400 16px/1.5 var(--fonte);
  padding-bottom: var(--altura-barra-mobile);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
[hidden] { display: none !important; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 16px; }
.pular { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: var(--raio); }
.pular:focus { top: 8px; }
.so-desktop { display: none !important; }
.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; }

/* ---------- botões e campos ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border: 1px solid var(--tinta-2); border-radius: 4px; background: var(--tinta-2); color: #fff;
  font: 600 14px/1 var(--fonte); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.botao:hover { opacity: .88; }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao--sec { background: transparent; color: var(--tinta-2); }
.botao--sec:hover { background: var(--tinta-2); color: #fff; opacity: 1; }
.botao--perigo { background: transparent; border-color: var(--destaque); color: var(--destaque); }
.botao--pequeno { min-height: 36px; padding: 0 14px; font-size: 12px; }
.botao--largo { width: 100%; }

.icone-btn {
  position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px;
  border: 0; border-radius: 50%; background: none; color: var(--tinta); text-decoration: none;
}
.icone-btn:hover { background: rgba(0, 0, 0, .06); }

.campo { display: grid; gap: 6px; font-size: 14px; }
.campo > span { font-weight: 600; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 4px; background: var(--superficie);
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--tinta); outline-offset: -1px; }
.campo small { color: var(--suave); }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--tinta); }
.erro-form { margin: 0; color: var(--destaque); font-size: 14px; }

.contador {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: var(--destaque); color: #fff; font: 600 11px/18px var(--fonte); text-align: center;
}

/* ---------- faixa promocional ---------- */
.promo { overflow: hidden; background: var(--tinta); color: #fff; font: 600 13px/1 var(--fonte); text-transform: uppercase; letter-spacing: .04em; }
.promo__trilho { display: flex; width: max-content; animation: rolar 40s linear infinite; }
.promo__trilho span { padding: 11px 32px; white-space: nowrap; }
@keyframes rolar { to { transform: translateX(-50%); } }

/* ---------- cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 40; background: var(--fundo-topo); border-bottom: 1px solid var(--linha); }
.topo__barra { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 64px; }
.topo__logo { justify-self: center; }
.topo__logo img { width: 112px; height: auto; }
.topo__nav { display: none; }
.topo__acoes { justify-self: end; display: flex; align-items: center; }
.topo__nav ul, .menu-mobile__lista, .menu-mobile__extra { list-style: none; margin: 0; padding: 0; }
.topo__nav a { display: block; padding: 8px 12px; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.topo__nav a:hover, .topo__nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- gavetas (menu mobile e carrinho) ---------- */
.gaveta { position: fixed; inset: 0; z-index: 60; }
.gaveta__fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); animation: aparecer .25s ease; }
.gaveta__painel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 100%); display: flex; flex-direction: column;
  background: var(--superficie); animation: entrar-direita .3s cubic-bezier(.2, .7, .2, 1);
}
.gaveta--esquerda .gaveta__painel { right: auto; left: 0; width: min(340px, 88%); animation-name: entrar-esquerda; }
.gaveta__topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--linha); }
.gaveta__topo h2 { margin: 0; font-size: 20px; }
.gaveta__logo { width: 100px; height: auto; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes entrar-direita { from { transform: translateX(100%); } }
@keyframes entrar-esquerda { from { transform: translateX(-100%); } }

.menu-mobile__lista a, .menu-mobile__extra a { display: block; padding: 14px 20px; text-decoration: none; border-bottom: 1px solid var(--linha); }
.menu-mobile__lista a { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.menu-mobile__lista a[aria-current] { background: var(--fundo); }
.menu-mobile__extra a { color: var(--suave); font-size: 15px; }

/* submenus (categorias do Catálogo): no celular abrem pela setinha */
.menu__item--sub { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: stretch; }
.menu__item--sub > a { min-width: 0; }
.menu__seta {
  display: grid; place-items: center; width: 52px; border: 0; border-left: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha); background: none; color: var(--tinta);
}
.menu__seta svg { width: 18px; height: 18px; transition: transform .2s ease; }
.menu__item--sub.aberto > .menu__seta svg { transform: rotate(180deg); }
.submenu, .submenu__sub { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; }
.submenu { display: none; background: var(--fundo); }
.menu__item--sub.aberto > .submenu { display: block; }
.menu-mobile__lista .submenu a { padding-left: 36px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.menu-mobile__lista .submenu__sub a { padding-left: 56px; font-size: 15px; color: var(--suave); }

/* carrinho */
.carrinho__itens { flex: 1; overflow-y: auto; padding: 0 16px; }
.carrinho__item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.carrinho__img { flex: 0 0 84px; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background: var(--fundo); }
.carrinho__img img { width: 100%; height: 100%; object-fit: cover; }
.carrinho__info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.carrinho__nome { font-weight: 600; text-decoration: none; }
.carrinho__var { font-size: 13px; color: var(--suave); }
.carrinho__linha { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.carrinho__rem { border: 0; background: none; font-size: 12px; color: var(--suave); text-decoration: underline; }
.carrinho__vazio { text-align: center; padding: 48px 0; color: var(--suave); }
.carrinho__rodape { display: grid; gap: 10px; padding: 16px; border-top: 1px solid var(--linha); }
.carrinho__sub { display: flex; justify-content: space-between; font-size: 17px; }
.carrinho__obs { margin: -6px 0 0; font-size: 12px; color: var(--suave); }

.qtd { display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--linha); border-radius: 4px; }
.qtd button { width: 32px; height: 100%; border: 0; background: none; font-size: 16px; }
.qtd span { min-width: 26px; text-align: center; font-weight: 600; font-size: 14px; }
.qtd--grande { height: 48px; }
.qtd--grande button { width: 44px; }

/* ---------- busca ---------- */
.busca { position: fixed; inset: 0; z-index: 70; }
.busca__fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.busca__painel { position: relative; background: var(--fundo-topo); max-height: 100%; overflow-y: auto; animation: descer .25s ease; }
@keyframes descer { from { transform: translateY(-20px); opacity: 0; } }
.busca__form { display: flex; align-items: center; gap: 8px; min-height: 72px; }
.busca__form input { flex: 1; min-width: 0; height: 48px; border: 0; border-bottom: 2px solid var(--tinta); background: none; font-size: 18px; }
.busca__form input:focus { outline: none; }
.busca__resultados { padding-bottom: 16px; }
.busca__resultados:empty { display: none; }
.busca__item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); text-decoration: none; }
.busca__item img { width: 48px; height: 60px; object-fit: cover; border-radius: 4px; }
.busca__item strong { display: block; font-weight: 600; }
.busca__item span { font-size: 14px; color: var(--suave); }
.busca__todos { display: inline-block; margin-top: 12px; font-weight: 600; }
.busca__nada { margin: 8px 0; color: var(--suave); }

/* ---------- seções ---------- */
.secao { padding-top: 40px; padding-bottom: 40px; }
.secao__titulo { margin: 0 0 24px; text-align: center; font: 700 clamp(26px, 4vw, 34px)/1.1 var(--fonte); text-transform: uppercase; }
.vazio { text-align: center; }
.vazio p { color: var(--suave); }

/* banners */
.banners { position: relative; overflow: hidden; background: var(--tinta); }
.banners__slide { display: none; }
.banners__slide.is-ativo { display: block; }
.banners.is-rodando .banners__slide.is-ativo { animation: aparecer .6s ease; }
.banners__slide img { width: 100%; height: auto; max-height: 560px; object-fit: contain; margin: 0 auto; }
.banners__pontos { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
.banners__pontos button { width: 10px; height: 10px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: transparent; }
.banners__pontos button[aria-current="true"] { background: #fff; }

/* abas */
.abas { display: flex; gap: 8px 24px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.abas button { padding: 6px 2px; border: 0; border-bottom: 2px solid transparent; background: none; font: 600 18px var(--fonte); color: var(--suave); }
.abas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--tinta); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips button { flex: none; height: 36px; padding: 0 16px; border: 1px solid var(--linha); border-radius: 99px; background: var(--superficie); font-weight: 600; font-size: 14px; }
.chips button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.catalogo__filtros { display: grid; gap: 8px; min-width: 0; }
.chips--sub button { height: 32px; font-size: 13px; font-weight: 400; }
.chips--sub button[aria-pressed="true"] { background: var(--superficie); color: var(--tinta); border-color: var(--tinta); font-weight: 600; }

/* catálogo */
.catalogo__barra { display: grid; gap: 12px; margin-bottom: 20px; }
.catalogo__ferramentas { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.catalogo__total { margin: 0; font-size: 14px; color: var(--suave); }
.catalogo__ordem { height: 40px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 4px; background: var(--superficie); }
.catalogo__busca { display: flex; gap: 8px; }
.catalogo__busca input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 4px; background: var(--superficie); }
.catalogo__mais { display: flex; justify-content: center; margin-top: 28px; }

/* grade de produtos */
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.grade:empty { display: none; }
.grade--destaques { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.grade--destaques > * { scroll-snap-align: start; }

/* cartão de produto */
.cartao { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cartao__midia { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--raio); overflow: hidden; background: #dfe3e6; }
.cartao__midia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease, transform .5s ease; }
.cartao__midia img + img { opacity: 0; }
@media (hover: hover) {
  .cartao:hover .cartao__midia img + img { opacity: 1; }
  .cartao:hover .cartao__midia img:only-child { transform: scale(1.03); }
}
.cartao__selo { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 8px; border-radius: 99px; background: var(--tinta); color: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.cartao__cores { display: flex; gap: 6px; margin-top: 4px; }
.cor { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); background: var(--c); box-shadow: 0 0 0 2px var(--fundo); }
.cor[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 3px var(--tinta); }
.cartao__nome { margin: 0; font: 400 20px/1.15 var(--fonte-serif); }
.cartao__nome a { text-decoration: none; }
.cartao__nome a::after { content: ""; position: absolute; inset: 0; } /* cartão inteiro clicável */
.cartao__cores, .curtir { position: relative; z-index: 2; }

.preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.preco s { color: var(--suave); font-size: 14px; }
.preco strong { font-size: 17px; }
.preco__parcelas { width: 100%; font-size: 13px; color: var(--suave); }

/* curtir */
.curtir {
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px; border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, .9); font-weight: 600; font-size: 13px; color: var(--tinta);
}
.curtir svg { width: 18px; height: 18px; transition: transform .2s ease; }
.curtir[aria-pressed="true"] { color: var(--destaque); }
.curtir[aria-pressed="true"] svg { fill: currentColor; }
.curtir:active svg { transform: scale(1.25); }
.cartao .curtir { position: absolute; top: 8px; right: 8px; z-index: 2; }

/* ---------- página de produto ---------- */
.produto { padding: 20px 0 56px; }
.trilha { margin-bottom: 18px; font-size: 14px; color: var(--suave); }
.trilha a { text-decoration: none; }
.trilha a:hover { text-decoration: underline; }
.produto__grade { display: grid; gap: 28px; }
.produto__principal { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #dfe3e6; }
.produto__principal img { width: 100%; height: 100%; object-fit: cover; }
.produto__principal .curtir { position: absolute; top: 12px; right: 12px; }
.produto__miniaturas { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.produto__miniaturas button { flex: 0 0 72px; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #dfe3e6; }
.produto__miniaturas button[aria-current="true"] { border-color: var(--tinta); }
.produto__miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.produto__info { display: flex; flex-direction: column; gap: 16px; }
.produto__nome { margin: 0; font: 700 clamp(26px, 3vw, 36px)/1.1 var(--fonte); text-transform: uppercase; }
.produto__info .preco strong { font-size: 26px; }
.preco-linha { display: flex; align-items: center; gap: 12px; }
.produto__desconto { padding: 3px 8px; border-radius: 99px; background: var(--tinta); color: #fff; font-size: 12px; font-weight: 600; }
.opcao__rotulo { margin: 0 0 8px; font-size: 15px; }
.opcao__lista { display: flex; flex-wrap: wrap; gap: 10px; }
.opcao__lista .cor { width: 36px; height: 36px; box-shadow: 0 0 0 3px var(--fundo); }
.opcao__lista .cor[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--fundo), 0 0 0 4px var(--tinta); }
.tamanho { min-width: 52px; height: 44px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 4px; background: var(--superficie); font-weight: 600; }
.tamanho:hover { border-color: var(--tinta); }
.tamanho[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.produto__comprar { display: flex; gap: 10px; }
.produto__comprar .botao { flex: 1; }
.selos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 13px; color: var(--suave); }
.selos li::before { content: "✓ "; color: var(--tinta); }
.produto__desc { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 14px 0; }
.produto__desc summary { cursor: pointer; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.produto__desc p { margin: 10px 0 0; color: #333; white-space: pre-line; }

/* ---------- perguntas frequentes ---------- */
.faq { background: var(--fundo-topo); }
.faq__grade { display: grid; gap: 24px; }
.faq__titulo { margin: 0; font: 700 clamp(30px, 4vw, 40px)/1.05 var(--fonte); text-transform: uppercase; }
.faq__item { border-bottom: 1px solid var(--linha); }
.faq__item summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; font-weight: 600; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 22px; line-height: 1; transition: transform .2s ease; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin: 0 0 16px; color: #333; }

/* ---------- páginas de texto ---------- */
.texto-pagina { max-width: 820px; }
.texto-pagina h2 { margin: 28px 0 8px; font-size: 20px; text-transform: uppercase; }
.texto-pagina p, .texto-pagina li { color: #2b2b2b; }
.texto-pagina li + li { margin-top: 6px; }
.texto-pagina__assinatura { margin: 24px 0 8px; font: 400 26px/1.2 var(--fonte-serif); color: var(--tinta); }
.onde { max-width: var(--largura); }
.onde__grade { display: grid; gap: 24px; }
.onde__mapa { width: 100%; min-height: 340px; border: 0; border-radius: var(--raio); }

/* ---------- conta ---------- */
.conta { max-width: 960px; }
.conta__abas { margin-bottom: 20px; }
.conta__esqueci { justify-self: center; font-size: 14px; color: var(--suave); }
.cartao-form { display: grid; gap: 16px; max-width: 440px; margin: 0 auto; padding: 24px; border-radius: var(--raio); background: var(--superficie); }
.conta__grade { display: grid; gap: 20px; }
.conta__ola { margin: 0 0 4px; font-size: 22px; }
.conta__email { margin: 0; color: var(--suave); }
.conta__atalhos { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- aviso (toast) ---------- */
.aviso {
  position: fixed; left: 50%; bottom: calc(var(--altura-barra-mobile) + 16px); z-index: 90; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: var(--raio);
  background: var(--tinta); color: #fff; font-size: 15px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); animation: subir .25s ease;
}
.aviso a { font-weight: 600; margin-left: 8px; }
.aviso--erro { background: var(--destaque); }
@keyframes subir { from { transform: translate(-50%, 12px); opacity: 0; } }

/* ---------- rodapé ---------- */
.rodape { background: var(--tinta); color: #fff; }
.rodape__grade { display: grid; gap: 32px; padding-top: 48px; padding-bottom: 40px; }
.rodape__marca img { width: 130px; height: auto; filter: invert(1); margin-bottom: 16px; }
.rodape__marca p { margin: 0 0 10px; color: rgba(255, 255, 255, .8); font-size: 15px; }
.rodape__titulo { margin: 0 0 14px; font-size: 18px; }
.rodape__subtitulo { margin: 20px 0 8px; font-size: 14px; }
.rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.rodape__lista a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.rodape__lista a:hover { color: #fff; text-decoration: underline; }
.rodape__lista--texto { color: rgba(255, 255, 255, .8); font-size: 14px; gap: 2px; }
.redes { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 10px; }
.redes a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; color: #fff; transition: background .2s ease, color .2s ease; }
.redes a:hover { background: #fff; color: var(--tinta); }
.redes svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.rodape__base { border-top: 1px solid rgba(255, 255, 255, .15); }
.rodape__base p { margin: 0; padding-top: 18px; padding-bottom: 18px; padding-right: 88px; font-size: 13px; color: rgba(255, 255, 255, .75); } /* espaço do botão do WhatsApp */
.rodape :focus-visible { outline-color: #fff; }

/* ---------- barra mobile e WhatsApp ---------- */
.barra-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr);
  height: var(--altura-barra-mobile); background: var(--fundo-topo); border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-mobile > * { position: relative; display: grid; place-items: center; border: 0; background: none; color: var(--tinta); }
.barra-mobile > * + * { border-left: 1px solid var(--linha); }
.barra-mobile [aria-current="page"] { background: rgba(0, 0, 0, .06); }
.barra-mobile .contador { top: 8px; right: calc(50% - 22px); }

.whats {
  position: fixed; right: 16px; bottom: calc(var(--altura-barra-mobile) + 16px); z-index: 55; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%; background: var(--whats); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: transform .2s ease;
}
.whats:hover { transform: scale(1.07); }
.whats svg { width: 30px; height: 30px; fill: currentColor; stroke: none; }

/* ---------- admin ---------- */
.admin { max-width: 1100px; }
.abas--admin { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--linha); margin-bottom: 24px; }
.abas--admin button { flex: none; font-size: 16px; }
.admin__painel { display: grid; gap: 20px; }
.admin__topo { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.admin__topo h2 { margin: 0; font-size: 22px; }
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.numero { padding: 18px; border-radius: var(--raio); background: var(--superficie); }
.numero strong { display: block; font-size: 30px; line-height: 1.1; }
.numero span { color: var(--suave); font-size: 14px; }
.caixa { padding: 20px; border-radius: var(--raio); background: var(--superficie); }
.caixa h3 { margin: 0 0 12px; }
.tabela-rolagem { overflow-x: auto; border-radius: var(--raio); background: var(--superficie); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela th { font-weight: 600; color: var(--suave); white-space: nowrap; }
.tabela img { width: 44px; height: 55px; object-fit: cover; border-radius: 4px; }
.tabela__acoes { display: flex; gap: 6px; justify-content: flex-end; }
.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 99px; background: var(--fundo); font-size: 12px; font-weight: 600; }
.etiqueta--ok, .etiqueta--entregue { background: #dff3e5; color: var(--sucesso); }
.etiqueta--aguardando { background: #fff4d6; color: #7a5a00; }
.etiqueta--pago { background: #e1ecff; color: #1d4ea8; }
.etiqueta--enviado { background: #ece4ff; color: #5a35a8; }
.etiqueta--cancelado { background: #fde3e2; color: var(--destaque); }
.selo-bom-cliente {
  display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--tinta); color: #f2d27a;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; vertical-align: middle; white-space: nowrap;
}
.ajuda { margin: 0; font-size: 13px; color: var(--suave); }
.aviso-admin { margin: 0; padding: 12px 16px; border-radius: var(--raio); background: #fff4d6; color: #5c4400; }
.aviso-admin a { font-weight: 600; }

/* vendas: números com opção de esconder */
.numeros--4 { grid-template-columns: repeat(2, 1fr); }
.numero span { display: block; }
.valores-ocultos [data-valor] { filter: blur(9px); user-select: none; pointer-events: none; }
.grafico { display: grid; gap: 6px; }
.grafico__area { display: flex; align-items: flex-end; gap: 2px; height: 180px; border-bottom: 1px solid var(--linha); }
.grafico__coluna { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; outline-offset: 0; }
.grafico__barra { width: 100%; border-radius: 4px 4px 0 0; background: var(--tinta-2); }
.grafico__coluna:hover .grafico__barra, .grafico__coluna:focus-visible .grafico__barra { background: #555; }
.grafico__coluna:hover::after, .grafico__coluna:focus-visible::after {
  content: attr(data-dica); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 3;
  padding: 6px 10px; border-radius: 6px; background: var(--tinta); color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none;
}
.grafico__coluna:first-child:hover::after, .grafico__coluna:first-child:focus-visible::after { left: 0; transform: none; }
.grafico__coluna:last-child:hover::after, .grafico__coluna:last-child:focus-visible::after { left: auto; right: 0; transform: none; }
.grafico__eixo { display: flex; justify-content: space-between; font-size: 12px; color: var(--suave); }
.grafico__tabela summary { cursor: pointer; font-size: 14px; color: var(--suave); }
.grafico__tabela .tabela-rolagem { margin-top: 8px; max-height: 280px; overflow-y: auto; }

/* pedidos do cliente */
.conta__compras { margin: 6px 0 0; font-size: 14px; color: var(--suave); }
.pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pedido { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio); }
.pedido__topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pedido__data, .pedido__itens { font-size: 14px; color: var(--suave); }

/* categorias, destaques, menu e páginas no admin */
.categorias { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.categorias--sub { padding-left: 24px; border-left: 2px solid var(--linha); margin-left: 12px; }
.categoria { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px; border-radius: var(--raio); background: var(--superficie); }
.categoria__nome { flex: 1 1 200px; }
.categoria .item-lista__acoes { margin-left: auto; }
.escolhidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.escolhido { display: flex; align-items: center; gap: 12px; }
.escolhido img { width: 40px; height: 50px; object-fit: cover; border-radius: 4px; background: var(--fundo); }
.escolhido > span { flex: 1; min-width: 0; }
.item-lista--oculto { opacity: .6; }
.campo__texto-longo { min-height: 360px !important; font-family: ui-monospace, Consolas, monospace; font-size: 14px; line-height: 1.5; }
.ajuda-formato summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.ajuda-formato ul { margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: var(--suave); }
.form-grade { display: grid; gap: 16px; }
.form-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.form-acoes--inicio { justify-content: flex-start; gap: 10px 24px; }
.bloco-cor { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--linha); border-radius: var(--raio); }
.bloco-cor__topo { display: grid; grid-template-columns: 1fr 64px auto; gap: 10px; align-items: end; }
.bloco-cor input[type="color"] { padding: 4px; height: 46px; }
.fotos { display: flex; flex-wrap: wrap; gap: 10px; }
.foto { position: relative; width: 84px; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--fundo); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; font-size: 14px; line-height: 1; }
.foto--enviar { display: grid; place-items: center; border: 1px dashed var(--suave); cursor: pointer; font-size: 12px; text-align: center; color: var(--suave); }
.foto--enviar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.paginacao { display: flex; gap: 8px; justify-content: center; align-items: center; }
.item-lista { display: grid; gap: 12px; padding: 16px; border-radius: var(--raio); background: var(--superficie); }
.item-lista__img { max-height: 140px; width: auto; border-radius: 4px; }
label.botao:focus-within { outline: 2px solid var(--tinta); outline-offset: 2px; }
.item-lista__acoes { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------- telas maiores ---------- */
@media (min-width: 600px) {
  .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; }
  .grade--destaques { grid-template-columns: none; grid-auto-columns: 31%; }
  .numeros { grid-template-columns: repeat(3, 1fr); }
  .form-grade--2 { grid-template-columns: 1fr 1fr; }
  .catalogo__barra { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 990px) {
  body { padding-bottom: 0; }
  .container { padding: 0 32px; }
  .so-desktop { display: inline-grid !important; }
  .topo__menu-btn, .barra-mobile { display: none; }
  .topo__barra { grid-template-columns: auto 1fr auto; gap: 24px; min-height: 72px; }
  .topo__logo { justify-self: start; }
  .topo__logo img { width: 130px; }
  .topo__nav { display: block; }
  .topo__nav ul { display: flex; justify-content: center; flex-wrap: wrap; }
  .secao { padding-top: 64px; padding-bottom: 64px; }
  .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grade--destaques { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .produto { padding-top: 32px; }
  .produto__grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .produto__info { position: sticky; top: 100px; }
  .faq__grade { grid-template-columns: 1fr 2fr; gap: 48px; }
  .onde__grade { grid-template-columns: 1fr 2fr; }
  .rodape__grade { grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
  .conta__grade { grid-template-columns: 1fr 1fr; }
  .whats, .aviso { bottom: 24px; }
  .whats { right: 24px; }
  .numeros--4 { grid-template-columns: repeat(4, 1fr); }

  /* submenu no computador: abre ao passar o mouse, pelo teclado ou pela setinha */
  .topo__nav .menu__item--sub { display: flex; align-items: center; }
  .topo__nav .menu__item--sub > a { padding-right: 2px; }
  .topo__nav .menu__seta { width: 24px; height: 32px; border: 0; border-radius: 4px; }
  .topo__nav .submenu {
    display: none; position: absolute; top: 100%; left: 0; z-index: 45; min-width: 240px; padding: 8px 0;
    background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
  }
  .topo__nav .menu__item--sub:hover > .submenu,
  .topo__nav .menu__item--sub:focus-within > .submenu,
  .topo__nav .menu__item--sub.aberto > .submenu { display: block; }
  .topo__nav .menu__item--sub:hover > .menu__seta svg { transform: rotate(180deg); }
  .topo__nav .submenu a { padding: 8px 18px; font-size: 14px; text-transform: none; letter-spacing: 0; }
  .topo__nav .submenu a:hover { background: var(--fundo); text-decoration: none; }
  .topo__nav .submenu__sub { display: block; }
  .topo__nav .submenu__sub a { padding-left: 34px; font-weight: 400; color: var(--suave); }
}

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

/* ---------------- conta: recuperação de senha e duas etapas ---------------- */
.link-botao { border: 0; background: none; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.conta__ok { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--raio); background: #dff3e5; color: var(--sucesso); font-size: 14px; }
.conta__selo-ok { margin: 0; color: var(--sucesso); font-weight: 600; }
.campo-codigo { letter-spacing: .5em; text-align: center; font-size: 22px !important; font-weight: 700; }
.etiqueta--expirado { background: #eee; color: var(--suave); }
.etiqueta--revisar { background: #fff4d6; color: #7a5a00; }

/* ---------------- checkout ---------------- */
.checkout__grade { display: grid; gap: 20px; align-items: start; }
.checkout__grade > aside { display: grid; gap: 10px; }
.checkout__linha { display: grid; gap: 12px; }
.opcoes { display: grid; gap: 10px; }
.opcao { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio); cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.opcao input { width: 18px; height: 18px; accent-color: var(--tinta); }
.opcao span { flex: 1; }
.opcao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.resumo__item { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.resumo__item img { width: 52px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }
.resumo__item div { flex: 1; display: grid; gap: 2px; }
.resumo__total { display: flex; justify-content: space-between; font-size: 14px; }
.resumo__total--g { font-size: 18px; font-weight: 700; padding-top: 10px; border-top: 1px solid var(--linha); }
.pix { display: grid; gap: 12px; text-align: center; }
.pix textarea { width: 100%; min-height: 96px; padding: 10px; border: 1px solid var(--linha); border-radius: var(--raio); font: 12px/1.4 monospace; resize: none; word-break: break-all; }
@media (min-width: 600px) { .checkout__linha--2 { grid-template-columns: 1fr 1fr; } .checkout__linha--3 { grid-template-columns: 2fr 1fr 1fr; } }
@media (min-width: 900px) { .checkout__grade { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .checkout__grade > aside { position: sticky; top: 100px; } }
.rastreio { display: flex; gap: 6px; margin-top: 6px; }
.rastreio input { min-width: 0; flex: 1; padding: 6px 8px; border: 1px solid var(--linha); border-radius: var(--raio); font: inherit; font-size: 13px; }
.historico { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.conta__aviso { margin: 0 0 16px; }
.cartao__selo--esgotado { background: #555; color: #fff; }
.produto__esgotado { margin: 0; padding: 10px 12px; border-radius: var(--raio); background: #fde3e2; color: var(--destaque); font-size: 14px; }