/* VERSAP — loja.
   Base: o site atual (preto, fotos grandes, títulos condensados), com o
   acabamento das referências: cantos retos, linhas finas, foto em primeiro lugar. */
:root {
  --fundo: #070707;
  --superficie: #0e0e0e;
  --linha: #1e1e1e;
  --linha-forte: #303030;
  --texto: #f4f4f2;
  --suave: #9a9a97;
  --apagado: #5f5f5c;
  --vermelho: #d82525;
  --vermelho-texto: #ff5b52;
  --azul: #333399;
  --foto: #efefed;
  --largura: 1400px;
  --gutter: clamp(16px, 3.2vw, 40px);
  --topo: 64px;
  --corpo: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
  --titulo: 'Sofia Sans Extra Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo) + 12px); }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--corpo); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: 8px; top: -60px; z-index: 100; background: var(--texto); color: var(--fundo); padding: 10px 14px; font-weight: 700; }
.pular:focus { top: 8px; }
.conteiner { max-width: var(--largura); margin: 0 auto; padding-inline: var(--gutter); }
.suave { color: var(--suave); }
.travar { overflow: hidden; }

/* tipografia */
.t-display, .t-secao, h1, h2 { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .92; margin: 0; }
.t-secao { font-size: clamp(34px, 4.4vw, 56px); }
.rotulo { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.link-seta { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px; transition: background-size .35s var(--ease); }
.link-seta:hover { background-size: 0% 1px; background-position: right bottom; }
.link-seta svg { transition: transform .3s var(--ease); }
.link-seta:hover svg { transform: translateX(4px); }

/* botões — cantos retos */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 28px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border: 1px solid transparent; transition: background-color .25s, color .25s, border-color .25s; }
.btn-cheio { border-color: var(--texto); color: var(--fundo); background: linear-gradient(var(--azul), var(--azul)) no-repeat left / 0% 100%, var(--texto); transition: background-size .4s var(--ease), color .3s, border-color .3s; }
.btn-cheio:hover, .btn-cheio:focus-visible, a:hover > .btn-cheio { background-size: 100% 100%, auto; color: #fff; border-color: var(--azul); }
.btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
/* F — botão que se enche */
.btn-linha { border-color: var(--texto); color: var(--texto); background: linear-gradient(var(--texto), var(--texto)) no-repeat left / 0% 100%; transition: background-size .4s var(--ease), color .3s; }
.btn-linha:hover, .btn-linha:focus-visible { background-size: 100% 100%; color: var(--fundo); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* ---------- topo ---------- */
.aviso-topo { border-bottom: 1px solid var(--linha); text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .16em; padding: 8px var(--gutter); color: var(--suave); }
.topo { position: sticky; top: 0; z-index: 40; background: rgba(7, 7, 7, .96); border-bottom: 1px solid var(--linha); }
@supports (backdrop-filter: blur(1px)) { .topo { background: rgba(7, 7, 7, .84); backdrop-filter: blur(14px) saturate(140%); } }
.topo-linha { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--topo); }
.topo-esq, .topo-dir { display: flex; align-items: center; gap: 4px; }
.topo-dir { justify-content: flex-end; }
.logo img { height: 20px; width: auto; }
.icone { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; position: relative; color: var(--texto); }
.icone:hover { color: #fff; }
.contador { position: absolute; right: 4px; top: 5px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--texto); color: var(--fundo); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.nav { display: flex; align-items: stretch; height: var(--topo); }
.nav > a, .nav > .tem-menu > button { display: flex; align-items: center; gap: 6px; padding: 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; position: relative; }
.nav > a::after, .nav > .tem-menu > button::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--texto); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav > a:hover::after, .nav > a[aria-current="page"]::after, .tem-menu[data-aberto] > button::after, .nav > .tem-menu > button[aria-current="page"]::after { transform: scaleX(1); }
.tem-menu { display: flex; }
.tem-menu svg { transition: transform .3s var(--ease); }
.tem-menu[data-aberto] > button svg { transform: rotate(180deg); }
.menu-btn { display: none; }
/* mega menu de Camisas */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--fundo); border-bottom: 1px solid var(--linha); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s; }
.tem-menu[data-aberto] .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease); }
.mega-grade { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 48px; padding-block: 36px 44px; }
.mega h3 { margin: 0 0 14px; font-family: var(--titulo); font-size: 26px; text-transform: uppercase; font-weight: 800; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega li a { display: inline-block; padding: 5px 0; color: var(--suave); font-size: 15px; transition: color .2s, transform .25s var(--ease); }
.mega li a:hover { color: var(--texto); transform: translateX(4px); }
.mega-foto { position: relative; overflow: hidden; aspect-ratio: 16 / 7; background: var(--superficie); }
.mega-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mega-foto:hover img { transform: scale(1.04); }
.mega-foto span { position: absolute; left: 18px; bottom: 16px; font-family: var(--titulo); font-weight: 800; font-size: 34px; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
/* busca */
.busca-painel { border-top: 1px solid var(--linha); }
.busca-form { display: flex; align-items: center; gap: 12px; height: 64px; }
.busca-form input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font-size: 18px; }
.busca-form input::placeholder { color: var(--apagado); }

@media (max-width: 960px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .topo-linha { grid-template-columns: 1fr auto; }
  .topo-esq .logo { margin-left: 4px; }
}

/* menu do celular */
.gaveta-menu { position: fixed; inset: 0 auto 0 0; z-index: 61; width: min(400px, 88vw); background: var(--fundo); border-right: 1px solid var(--linha); transform: translateX(-100%); transition: transform .4s var(--ease); display: flex; flex-direction: column; }
.menu-aberto .gaveta-menu { transform: none; }
.gaveta-menu header { display: flex; justify-content: space-between; align-items: center; height: var(--topo); padding: 0 8px 0 var(--gutter); border-bottom: 1px solid var(--linha); }
.gaveta-menu nav { overflow-y: auto; flex: 1; }
.gaveta-menu a, .gaveta-menu summary { display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gutter); border-bottom: 1px solid var(--linha); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; list-style: none; }
.gaveta-menu summary::-webkit-details-marker { display: none; }
.gaveta-menu details[open] > summary svg { transform: rotate(180deg); }
.gaveta-menu details a { padding-left: calc(var(--gutter) + 16px); color: var(--suave); font-weight: 600; letter-spacing: .08em; }
.gaveta-menu details details summary { padding-left: calc(var(--gutter) + 16px); color: var(--suave); }
.gaveta-menu details details a { padding-left: calc(var(--gutter) + 32px); }
.gaveta-menu .rodape-menu { border-top: 1px solid var(--linha); padding: 16px var(--gutter); display: flex; gap: 18px; font-size: 13px; }
.fundo-escuro { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .65); opacity: 0; pointer-events: none; transition: opacity .3s; }
.menu-aberto .fundo-escuro, .carrinho-aberto .fundo-escuro, .filtros-abertos .fundo-escuro { opacity: 1; pointer-events: auto; }

/* ---------- home ---------- */
.slides { position: relative; overflow: hidden; background: var(--superficie); aspect-ratio: 12 / 5; }
.slides-trilho { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slides-trilho::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slides-ctrl { position: absolute; right: var(--gutter); bottom: 18px; display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.slides-ctrl button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .5); background: rgba(7, 7, 7, .35); backdrop-filter: blur(6px); transition: background .2s; }
.slides-ctrl button:hover { background: var(--texto); color: var(--fundo); }
.slides-barra { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--texto); width: 0; }
.slides-barra.anda { width: 100%; transition: width 6s linear; }
@media (max-width: 700px) { .slides-ctrl { right: 12px; bottom: 10px; } .slides-ctrl button { width: 32px; height: 32px; } .slides-ctrl .rotulo { display: none; } }

.vantagens { border-bottom: 1px solid var(--linha); }
.vantagens ul { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vantagens li { display: flex; gap: 12px; align-items: center; padding: 18px var(--gutter); border-right: 1px solid var(--linha); font-size: 13px; line-height: 1.35; }
.vantagens li:last-child { border-right: 0; }
.vantagens b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.vantagens svg { flex: none; color: var(--suave); }
@media (max-width: 900px) {
  .vantagens ul { grid-template-columns: 1fr 1fr; padding: 0; }
  .vantagens li { padding: 12px 14px; gap: 10px; font-size: 11px; border-bottom: 1px solid var(--linha); }
  .vantagens li:nth-child(2n) { border-right: 0; }
  .vantagens li:nth-child(n+3) { border-bottom: 0; }
  .vantagens b { font-size: 10.5px; letter-spacing: .08em; }
  .vantagens svg { width: 22px; height: 22px; }
}

.bloco { padding-block: clamp(56px, 8vw, 104px) 0; }
.cab-bloco { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }

/* categorias da home: fotos quadradas com nome embaixo, como no site atual */
.cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.foco-esq img { object-position: 22% 50%; }
.foco-dir img { object-position: 78% 50%; }
.cat { display: block; }
.cat-foto { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--superficie); }
/* G — zoom lento */
.cat-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .4s; }
.cat:hover .cat-foto img { transform: scale(1.06); }
.cat-nome { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cat-nome svg { opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s var(--ease); }
.cat:hover .cat-nome svg { opacity: 1; transform: none; }
/* celular: grade fixa (sem arrastar para o lado, sem animação de entrada nem zoom) */
@media (max-width: 900px) {
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
  .cats .cat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cats .cat:last-child:nth-child(odd) .cat-foto { aspect-ratio: 2 / 1; }
  .js .cats .revela, .cats .revela { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cats .cat-foto { display: block; min-height: 0; }
  .cats .cat-foto picture, .cats .cat-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .cats .cat-foto img { object-fit: cover; transition: none; transform: none !important; }
  .cats .cat-nome { padding-top: 8px; font-size: 11px; letter-spacing: .1em; }
  .cats .cat-nome svg { opacity: 1; transform: none; }
}
/* K — tremido no nome da categoria e nos títulos dos banners ao passar o mouse */
@media (hover: hover) {
  .cat:hover .cat-nome, .banner:hover .treme-hover { animation: tremido-curto .5s steps(1) 1; }
}
@keyframes tremido-curto {
  0%, 100% { text-shadow: none; transform: none; }
  20% { text-shadow: 3px 0 var(--vermelho), -3px 0 var(--azul); transform: translateX(1px); }
  45% { text-shadow: -3px 0 var(--vermelho), 3px 0 var(--azul); transform: translateX(-1px); }
  70% { text-shadow: 1px 0 var(--vermelho), -1px 0 var(--azul); }
}

/* times brasileiros */
.brasileiros { margin-top: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border: 1px solid var(--linha-forte); transition: border-color .25s, background .25s; }
.brasileiros:hover { border-color: var(--texto); background: var(--superficie); }
.br-texto { display: flex; flex-direction: column; gap: 2px; }
.br-texto b { font-family: var(--titulo); font-size: 28px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.br-texto span { color: var(--suave); font-size: 14px; }
@media (max-width: 700px) { .brasileiros { margin-top: 40px; flex-direction: column; align-items: stretch; padding: 16px; } .brasileiros .btn { height: 44px; } }

/* A — faixa correndo com as categorias */
.faixa { overflow: hidden; border-block: 1px solid var(--linha); margin-top: clamp(56px, 8vw, 104px); padding-block: 16px; }
.faixa-trilho { display: flex; width: max-content; animation: faixa 32s linear infinite; }
.faixa:hover .faixa-trilho { animation-play-state: paused; }
.faixa-grupo { display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.faixa-grupo a { font-family: var(--titulo); font-weight: 800; font-size: clamp(28px, 3.4vw, 46px); text-transform: uppercase; line-height: 1; color: var(--texto); }
.faixa-sep { color: var(--vermelho); font-size: 14px; }
@keyframes faixa { to { transform: translateX(-50%); } }

/* banner largo com título (Camisas e corta-ventos, Tênis) */
.banner { position: relative; display: block; overflow: hidden; background: var(--superficie); aspect-ratio: 3 / 1; }
.banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.banner:hover img { transform: scale(1.03); }
.banner::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(7, 7, 7, .55)); pointer-events: none; }
.banner-texto { z-index: 1; position: absolute; right: var(--gutter); bottom: clamp(20px, 4vw, 48px); display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; }
.banner-texto .t-display { font-size: clamp(40px, 6.5vw, 92px); text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
@media (max-width: 700px) { .cab-bloco .link-seta { font-size: 11px; } .banner { aspect-ratio: 4 / 3; } .banner img { object-position: 30% center; } .banner-texto .btn { height: 42px; padding: 0 18px; } }

/* trilho de produtos */
.trilho { overscroll-behavior-x: contain; touch-action: pan-x pan-y; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { scroll-snap-align: start; }
.setas { display: flex; gap: 6px; }
.setas button { width: 42px; height: 42px; border: 1px solid var(--linha-forte); display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(var(--texto), var(--texto)) no-repeat left / 0% 100%; transition: background-size .35s var(--ease), color .25s, opacity .2s, border-color .2s; }
.setas button:hover { background-size: 100% 100%; color: var(--fundo); border-color: var(--texto); }
.setas button:disabled { opacity: .3; pointer-events: none; }
.cab-bloco .acoes { display: flex; align-items: center; gap: 22px; }
@media (max-width: 900px) { .trilho { grid-auto-columns: 44%; gap: 10px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } .setas { display: none; } }

/* lançamento */
.drop { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linha); }
.drop-texto { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.drop h2 { font-size: clamp(48px, 6vw, 88px); }
.drop-foto { position: relative; min-height: 360px; background: var(--foto); }
.drop-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .drop { grid-template-columns: 1fr; } .drop-foto { order: -1; min-height: 300px; } }
/* K — tremido vermelho/azul */
.tremido { animation: tremido 3.2s steps(1) infinite; }
@keyframes tremido {
  0%, 76%, 100% { text-shadow: none; transform: none; }
  78% { text-shadow: 3px 0 var(--vermelho), -3px 0 var(--azul); transform: translateX(1px); }
  82% { text-shadow: -4px 0 var(--vermelho), 4px 0 var(--azul); transform: translateX(-1px); }
  86% { text-shadow: 2px 0 var(--vermelho), -2px 0 var(--azul); }
}
/* H — contagem que vira */
.contagem { display: flex; gap: 6px; }
.contagem > span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--suave); }
.contagem b { width: 62px; height: 66px; border: 1px solid var(--linha-forte); display: flex; align-items: center; justify-content: center; font-family: var(--titulo); font-weight: 800; font-size: 44px; color: var(--texto); }
.contagem b.vira { animation: vira .45s var(--ease); }
@keyframes vira { 50% { transform: rotateX(-90deg); } }

/* novidades + FAQ */
.fim-home { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linha); margin-top: clamp(56px, 8vw, 104px); }
.fim-home > * { padding: clamp(32px, 5vw, 64px) var(--gutter); }
.fim-home > * + * { border-left: 1px solid var(--linha); }
.novidades { display: flex; flex-direction: column; gap: 16px; }
.novidades h2 { font-size: clamp(40px, 5vw, 64px); }
.novidades p { margin: 0; color: var(--suave); max-width: 420px; }
.campo-linha { display: flex; border-bottom: 1px solid var(--texto); max-width: 460px; }
.campo-linha input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; outline: none; font-size: 16px; }
.campo-linha input::placeholder { color: var(--apagado); }
.campo-linha button { padding: 0 4px 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.msg-ok { color: var(--texto); font-size: 14px; }
.faq h2 { font-size: 28px; margin-bottom: 8px; }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; transition: transform .3s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq p { margin: 0 0 18px; color: var(--suave); max-width: 560px; }
@media (max-width: 860px) { .fim-home { grid-template-columns: 1fr; } .fim-home > * + * { border-left: 0; border-top: 1px solid var(--linha); } }

/* ---------- cards ---------- */
.card { display: flex; flex-direction: column; min-width: 0; }
.card-foto { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: var(--foto); }
.card-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
/* E — card troca a foto */
.card-foto .alt { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
@media (hover: hover) { .card:hover .card-foto .alt { opacity: 1; } .card:hover .card-foto img:first-child { transform: scale(1.03); } }
.card-ver { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; text-align: center; background: var(--fundo); color: var(--texto); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transform: translateY(101%); transition: transform .35s var(--ease); }
@media (hover: hover) { .card:hover .card-ver { transform: none; } }
@media (hover: none) { .card-ver { display: none; } }
.card-info { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }
.card-pe { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--vermelho-texto); }
.card-pe::before { content: ''; width: 6px; height: 6px; background: var(--vermelho); }
.card-nome { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-nome:hover { text-decoration: underline; text-underline-offset: 3px; }
.precos { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.precos s { font-size: 12px; color: var(--apagado); }
.preco b { font-size: 16px; font-weight: 700; }
.preco em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--vermelho-texto); margin-left: 4px; }
.precos small { font-size: 12px; color: var(--suave); }

/* ---------- categoria ---------- */
.trilha { font-size: 12px; color: var(--suave); display: flex; flex-wrap: wrap; gap: 6px; padding-block: 18px; }
.trilha a:hover { color: var(--texto); }
.cab-cat { position: relative; overflow: hidden; background: var(--superficie); aspect-ratio: 4 / 1; display: flex; align-items: flex-end; }
.cab-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cab-cat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 7, 7, .55), transparent 55%); }
.cab-cat .conteiner { position: relative; z-index: 1; width: 100%; padding-block: 28px; }
.cab-cat h1 { font-size: clamp(48px, 7vw, 104px); }
.cab-sem-foto { padding-block: 8px 28px; }
.cab-sem-foto h1 { font-size: clamp(48px, 7vw, 96px); }
@media (max-width: 700px) { .cab-cat { aspect-ratio: 16 / 9; } }

/* Modalidade: abas no topo da lista, separadas dos filtros */
.modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linha); }
.modo { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 18px 20px 16px; border-right: 1px solid var(--linha); transition: background .2s; }
.modo:last-child { border-right: 0; }
.modo:hover { background: var(--superficie); }
.modo b { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.modo small { color: var(--suave); font-size: 12px; }
.modo .n { color: var(--apagado); font-weight: 600; letter-spacing: 0; }
.modo::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--texto); transform: scaleX(0); transition: transform .35s var(--ease); }
.modo[aria-current="true"]::after { transform: scaleX(1); }
.modo[aria-current="true"] { background: var(--superficie); }
.quad { width: 8px; height: 8px; flex: none; background: var(--apagado); }
.quad.pe { background: var(--vermelho); }
.quad.enc { background: var(--azul); }
@media (max-width: 700px) {
  .modos { grid-template-columns: 1fr 1fr 1fr; }
  .modo { padding: 14px 10px 12px; }
  .modo b { font-size: 11px; letter-spacing: .08em; }
  .modo small, .modo .n { display: none; }
}

.lista { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 40px; padding-top: 28px; }
.barra-lista { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; font-size: 13px; color: var(--suave); }
.ordenar { display: flex; align-items: center; gap: 10px; }
.ordenar select { height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--linha-forte); background: var(--fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23f4f4f2' stroke-width='1.6'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; color: var(--texto); border-radius: 0; }
.grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 16px; }
.lateral { font-size: 14px; }
.lateral h2 { font-family: var(--corpo); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; color: var(--suave); margin: 0 0 10px; }
.lateral section { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--linha); }
.arvore { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.arvore ul { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 1px; }
.arvore a { display: flex; justify-content: space-between; padding: 5px 0; color: var(--suave); }
.arvore a:hover { color: var(--texto); }
.arvore a[aria-current="page"] { color: var(--texto); font-weight: 700; }
.arvore .n { color: var(--apagado); font-size: 12px; }
.marcas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.marca-tam { position: relative; }
.marca-tam input { position: absolute; opacity: 0; pointer-events: none; }
.marca-tam span { display: flex; align-items: center; justify-content: center; height: 40px; border: 1px solid var(--linha-forte); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.marca-tam input:checked + span { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.marca-tam input:focus-visible + span { outline: 2px solid var(--texto); outline-offset: 2px; }
.preco-faixa { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.preco-faixa input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--linha-forte); background: transparent; border-radius: 0; }
.lateral .btn { width: 100%; height: 44px; margin-top: 12px; }
.limpar { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--suave); text-decoration: underline; text-underline-offset: 3px; }
.barra-celular { display: none; }
.paginacao { display: flex; justify-content: center; gap: 4px; padding-top: 56px; flex-wrap: wrap; }
.paginacao a, .paginacao span { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--linha); font-size: 13px; }
.paginacao a:hover { border-color: var(--texto); }
.paginacao [aria-current="true"] { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.vazio { padding: 80px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.vazio p { margin: 0; color: var(--suave); }
.filtros-cab { display: none; }

@media (max-width: 960px) {
  .lista { grid-template-columns: 1fr; padding-top: 0; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 10px; }
  .barra-lista { display: none; }
  .barra-celular { display: grid; grid-template-columns: 1fr 1fr; position: sticky; top: var(--topo); z-index: 20; background: var(--fundo); border-bottom: 1px solid var(--linha); margin-inline: calc(var(--gutter) * -1); margin-bottom: 20px; }
  .barra-celular > * { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 54px; font-size: 13px; font-weight: 600; }
  .barra-celular > * + * { border-left: 1px solid var(--linha); }
  .barra-celular small { font-size: 11px; color: var(--suave); font-weight: 500; }
  .barra-celular label { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
  .barra-celular select { position: absolute; inset: 0; opacity: 0; }
  /* filtros viram gaveta */
  .lateral { position: fixed; inset: 0 0 0 auto; z-index: 61; width: min(420px, 92vw); background: var(--fundo); border-left: 1px solid var(--linha); transform: translateX(100%); transition: transform .4s var(--ease); overflow-y: auto; padding: 0 var(--gutter) 24px; }
  .filtros-abertos .lateral { transform: none; }
  .filtros-cab { display: flex; justify-content: space-between; align-items: center; height: var(--topo); margin: 0 calc(var(--gutter) * -1) 24px; padding: 0 8px 0 var(--gutter); border-bottom: 1px solid var(--linha); position: sticky; top: 0; background: var(--fundo); }
  .filtros-cab b { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
}

/* ---------- produto ---------- */
.produto { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.galeria { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
.miniaturas { display: flex; flex-direction: column; gap: 8px; max-height: min(78vh, 720px); overflow-y: auto; scrollbar-width: none; }
.miniaturas button { flex: none; width: 76px; aspect-ratio: 1; background: var(--foto); border: 1px solid transparent; opacity: .55; transition: opacity .2s, border-color .2s; }
.miniaturas button[aria-current="true"] { opacity: 1; border-color: var(--texto); }
.miniaturas button:hover { opacity: 1; }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.foto-principal { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--foto); aspect-ratio: 1; }
.foto-principal::-webkit-scrollbar { display: none; }
.foto-principal img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.contador-foto { position: absolute; right: 12px; top: 12px; pointer-events: none; font-size: 11px; font-weight: 700; letter-spacing: .12em; background: rgba(7, 7, 7, .7); padding: 4px 8px; }
.galeria-pos { position: relative; }
.info { position: sticky; top: calc(var(--topo) + 20px); display: flex; flex-direction: column; gap: 26px; }
.info h1 { font-size: clamp(34px, 3.6vw, 52px); line-height: .95; }
.info .trilha { padding: 0 0 12px; }
.info .preco b { font-size: 28px; }
.info .precos { gap: 4px; }
.info .precos small { font-size: 13px; }
.opcao { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.opcao legend { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 0; margin-bottom: 10px; }
.opcao legend span { color: var(--suave); font-weight: 500; letter-spacing: .04em; text-transform: none; margin-left: 4px; }
/* L — seleção que desliza (modalidade) */
.duas-opcoes { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linha-forte); }
.duas-opcoes .marcador { position: absolute; top: -1px; bottom: -1px; left: -1px; width: calc(50% + 1px); border: 1px solid var(--texto); background: var(--superficie); transition: transform .4s var(--ease); pointer-events: none; }
.duas-opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.duas-opcoes label { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; cursor: pointer; }
.duas-opcoes label + input + label { border-left: 1px solid var(--linha-forte); }
.duas-opcoes label b { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.duas-opcoes label small { color: var(--suave); font-size: 12px; }
.duas-opcoes input:focus-visible + label { outline: 2px solid var(--texto); outline-offset: -4px; }
.sem-js .duas-opcoes input:checked + label { background: var(--superficie); }
.tamanhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.tamanhos label { display: flex; align-items: center; justify-content: center; height: 46px; border: 1px solid var(--linha-forte); font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.tamanhos label:hover { border-color: var(--texto); }
.tamanhos input { position: absolute; opacity: 0; pointer-events: none; }
.tamanhos input:checked + label { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.tamanhos input:disabled + label { color: var(--apagado); border-color: var(--linha); cursor: not-allowed; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, .04) 6px 7px); }
.tamanhos input:focus-visible + label { outline: 2px solid var(--texto); outline-offset: 2px; }
.prazo { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--suave); }
.personalizar { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 14px 0; display: flex; flex-direction: column; gap: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.check input { appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border: 1px solid var(--linha-forte); display: grid; place-items: center; }
.check input:checked { background: var(--texto); border-color: var(--texto); }
.check input:checked::after { content: ''; width: 9px; height: 5px; border: 2px solid var(--fundo); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.pers-campos { display: grid; grid-template-columns: 1fr 96px; gap: 6px; }
.pers-campos input { height: 46px; padding: 0 12px; border: 1px solid var(--linha-forte); background: transparent; border-radius: 0; text-transform: uppercase; letter-spacing: .06em; }
.comprar { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }
.qtd { display: grid; grid-template-columns: 40px 1fr 40px; border: 1px solid var(--linha-forte); height: 50px; }
.qtd button { font-size: 18px; }
.qtd input { width: 100%; border: 0; background: transparent; text-align: center; -moz-appearance: textfield; }
.qtd input::-webkit-inner-spin-button { appearance: none; }
.erro { color: var(--vermelho-texto); font-size: 13px; margin: -12px 0 0; min-height: 0; }
.erro:empty { display: none; }
.selos { display: grid; gap: 14px; padding-top: 4px; }
.selos div { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.selos svg { width: 22px; height: 22px; color: var(--suave); }
.selos b { display: block; font-size: 13px; }
.selos span span { color: var(--suave); font-size: 12px; }
.descricao { border-top: 1px solid var(--linha); }
.descricao summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.descricao summary::-webkit-details-marker { display: none; }
.descricao[open] summary svg { transform: rotate(180deg); }
.descricao .texto { color: var(--suave); font-size: 14px; padding-bottom: 16px; }
.descricao .texto p { margin: 0 0 10px; }
.barra-comprar { display: none; }
@media (max-width: 960px) {
  .produto { grid-template-columns: minmax(0, 1fr); }
  .galeria { grid-template-columns: 1fr; margin-inline: calc(var(--gutter) * -1); }
  .miniaturas { display: none; }
  .info { position: static; }
  .barra-comprar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 12px; align-items: center; justify-content: space-between; padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom, 0px)); background: rgba(7, 7, 7, .96); border-top: 1px solid var(--linha); transform: translateY(100%); transition: transform .3s var(--ease); }
  .barra-comprar.ver { transform: none; }
  .barra-comprar .btn { height: 46px; flex: 1; max-width: 220px; }
  .pagina-produto .whats { bottom: 84px; }
}

/* ---------- I — gaveta do carrinho ---------- */
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(440px, 100%); background: var(--fundo); border-left: 1px solid var(--linha); transform: translateX(100%); transition: transform .45s var(--ease); display: flex; flex-direction: column; }
.carrinho-aberto .gaveta { transform: none; }
.gaveta > header { display: flex; align-items: center; justify-content: space-between; height: var(--topo); padding: 0 8px 0 22px; border-bottom: 1px solid var(--linha); }
.gaveta > header b { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.gaveta-itens { flex: 1; overflow-y: auto; padding: 0 22px; }
.item { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--linha); }
.item img { width: 84px; height: 84px; object-fit: cover; background: var(--foto); }
.item .nome { font-size: 14px; line-height: 1.35; }
.item .detalhe { font-size: 12px; color: var(--suave); margin-top: 2px; }
.item .qtd { height: 34px; width: 104px; grid-template-columns: 32px 1fr 32px; margin-top: 10px; }
.item .qtd span { display: grid; place-items: center; font-size: 13px; }
.item .remover { color: var(--suave); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; align-self: start; }
.gaveta > footer { border-top: 1px solid var(--linha); padding: 18px 22px max(18px, env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
.gaveta .total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; }
.gaveta .nota { font-size: 12px; color: var(--suave); margin: 0; }
.gaveta .btn { width: 100%; }
.gaveta-vazia { padding: 56px 0; color: var(--suave); }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); margin-top: clamp(56px, 8vw, 104px); }
.rodape-grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-block: 56px 40px; font-size: 14px; }
.rodape h2 { font-family: var(--corpo); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); margin: 0 0 14px; line-height: 1.5; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rodape a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape .marca img { width: 120px; margin-bottom: 18px; }
.rodape .marca p { margin: 0 0 6px; color: var(--suave); }
.rodape-base { border-top: 1px solid var(--linha); padding-block: 18px; font-size: 12px; color: var(--apagado); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 760px) { .rodape-grade { grid-template-columns: 1fr 1fr; } .rodape .marca { grid-column: 1 / -1; } }
.whats { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); z-index: 25; width: 52px; height: 52px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); transition: transform .25s var(--ease); }
.whats:hover { transform: scale(1.06); }

.pagina-texto { max-width: 720px; padding-block: 24px 0; }
.pagina-texto h1 { font-size: clamp(44px, 6vw, 80px); margin-bottom: 24px; }
.pagina-texto p, .pagina-texto li { color: var(--suave); font-size: 16px; line-height: 1.7; }
.pagina-texto a { text-decoration: underline; text-underline-offset: 3px; color: var(--texto); }

/* C — título que sobe (só com JS) */
.js .sobe { overflow: hidden; }
.js .sobe > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease); }
.js .sobe.visivel > span { transform: none; }

/* B — aparecer ao rolar (só com JS) */
.js .revela { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s var(--ease); }
.js .revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .revela { opacity: 1; transform: none; }
  .js .sobe > span { transform: none; }
}

/* ---------- conta e checkout ---------- */
.conta-tela { padding-block: 32px 0; display: flex; flex-direction: column; gap: 20px; }
.conta-tela.estreita { max-width: 640px; }
.conta-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.conta-duas > section { display: flex; flex-direction: column; gap: 18px; }
.conta-duas > section + section { border-left: 1px solid var(--linha); padding-left: 48px; }
@media (max-width: 800px) { .conta-duas { grid-template-columns: 1fr; } .conta-duas > section + section { border-left: 0; padding-left: 0; border-top: 1px solid var(--linha); padding-top: 32px; } }
.form { display: grid; gap: 14px; max-width: 520px; }
.form label, .passo label { display: grid; gap: 6px; font-size: 13px; color: var(--suave); }
.form label small { color: var(--apagado); font-size: 12px; }
.form input, .passo input { height: 48px; padding: 0 14px; background: transparent; border: 1px solid var(--linha-forte); color: var(--texto); border-radius: 0; font-size: 15px; }
.form input:focus, .passo input:focus { outline: none; border-color: var(--texto); }
.passo input[readonly] { color: var(--suave); }
.form .btn { justify-self: start; min-width: 200px; }
.form-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.form-tres { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 80px; gap: 12px; }
.form-duas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form input, .passo input { width: 100%; min-width: 0; }
.checkout { padding-top: 32px; }
.checkout > h1 { margin: 0 0 24px; }
@media (max-width: 600px) { .form-duas, .form-tres { grid-template-columns: 1fr; } }
.aviso-erro { border: 1px solid var(--vermelho); color: #ffd0cc; background: rgba(216, 37, 37, .08); padding: 12px 14px; margin: 0; }
.sublinhado { text-decoration: underline; text-underline-offset: 3px; }
.lista-pedidos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.lista-pedidos a { display: grid; grid-template-columns: 1fr auto auto auto; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.lista-pedidos a:hover b { text-decoration: underline; }
.lista-pedidos span { color: var(--suave); }
@media (max-width: 600px) { .lista-pedidos a { grid-template-columns: 1fr 1fr; gap: 4px 12px; } }

.checkout-grade { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.checkout-passos { display: grid; gap: 0; border-top: 1px solid var(--linha); }
.passo { border-bottom: 1px solid var(--linha); padding: 22px 0; display: grid; gap: 14px; }
.passo h2 { font-family: var(--corpo); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; margin: 0; line-height: 1.4; }
.passo h2 span { width: 26px; height: 26px; border: 1px solid var(--texto); display: inline-grid; place-items: center; font-size: 12px; letter-spacing: 0; }
.passo p { margin: 0; }
.cep-info { align-self: center; }
.pacote-linha { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--linha-forte); margin-bottom: 8px; }
.pacote-linha span { color: var(--suave); text-align: right; }
.frete-linha { font-weight: 700; }
.campo-cupom { display: flex; gap: 8px; max-width: 420px; }
.campo-cupom input { flex: 1; text-transform: uppercase; }
.campo-cupom .btn { height: 48px; }
.formas { display: grid; gap: 8px; }
.forma { display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px !important; padding: 16px; border: 1px solid var(--linha-forte); cursor: pointer; color: var(--texto) !important; font-size: 15px !important; }
.forma:has(input:checked) { border-color: var(--texto); background: var(--superficie); }
.forma input { accent-color: var(--texto); width: 18px; height: 18px; }
.forma span { display: grid; gap: 2px; }
.forma small { color: var(--suave); }
.forma em { font-style: normal; font-weight: 700; }
.resumo { position: sticky; top: calc(var(--topo) + 20px); border: 1px solid var(--linha); padding: 22px; display: grid; gap: 16px; }
.resumo-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.resumo-item img { width: 56px; height: 56px; object-fit: cover; background: var(--foto); }
.resumo-item span { display: grid; }
.resumo-item small { color: var(--suave); }
.resumo dl { margin: 0; display: grid; gap: 6px; border-top: 1px solid var(--linha); padding-top: 14px; }
.resumo dl div { display: flex; justify-content: space-between; gap: 12px; }
.resumo dt { color: var(--suave); }
.resumo dd { margin: 0; }
.resumo .total { font-size: 18px; font-weight: 700; border-top: 1px solid var(--linha); padding-top: 10px; margin-top: 4px; }
.resumo .total dt { color: var(--texto); }
.resumo .btn { width: 100%; }
@media (max-width: 960px) { .checkout-grade { grid-template-columns: 1fr; } .resumo { position: static; } }

.status-pedido { display: inline-block; align-self: flex-start; padding: 6px 12px; border: 1px solid var(--linha-forte); font-weight: 700; margin: 0; }
.status-pago { border-color: #3fb36b; color: #b8f0cc; }
.status-cancelado, .status-expirado, .status-estornado { color: var(--suave); }
.pedido-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .pedido-grade { grid-template-columns: 1fr; } }
.pacote { border: 1px solid var(--linha); padding: 18px; margin-bottom: 12px; display: grid; gap: 8px; }
.pacote header { display: flex; justify-content: space-between; gap: 12px; }
.pacote header span { color: var(--suave); }
.pacote p { margin: 0; }
.itens-pedido { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.itens-pedido li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; }
.itens-pedido img { width: 64px; height: 64px; object-fit: cover; background: var(--foto); }
.itens-pedido span { display: grid; }
.itens-pedido small { color: var(--suave); }

/* ---------- promoções ---------- */
.promo-gaveta { display: grid; gap: 4px; margin: 0; font-size: 13px; }
.promo-gaveta .total { display: flex; justify-content: space-between; font-weight: 600; color: var(--texto); }
.promo-gaveta small, .promo-info { color: var(--suave); font-size: 13px; margin: 0; }
.promo-produto { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border: 1px solid var(--azul); color: var(--texto); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.promo-produto::before { content: ''; width: 6px; height: 6px; background: var(--azul); }

/* ---------- Minha conta ---------- */
.minha-conta { padding-block: 24px 0; display: grid; gap: 22px; }
.mc-topo { display: grid; gap: 4px; }
.mc-topo h1 { margin: 0; }
.mc-topo p { margin: 0; }
.mc-grade { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
.mc-menu { position: sticky; top: calc(var(--topo) + 20px); display: grid; gap: 14px; }
.mc-menu nav { display: grid; gap: 2px; }
.mc-menu a, .mc-menu button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--suave); font-size: 14px; border-left: 2px solid transparent; background: none; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; text-align: left; width: 100%; font-family: inherit; }
.mc-menu a:hover, .mc-menu button:hover { color: var(--texto); background: var(--superficie); }
.mc-menu a[aria-current="page"] { color: var(--texto); background: var(--superficie); border-left-color: var(--vermelho); font-weight: 700; }
.mc-menu form { border-top: 1px solid var(--linha); padding-top: 8px; }
.mc-conteudo { border: 1px solid var(--linha); background: var(--superficie); padding: clamp(18px, 3vw, 34px); display: grid; gap: 22px; min-width: 0; }
.mc-cab { display: grid; gap: 4px; }
.mc-cab h2 { margin: 0; font-size: clamp(30px, 3.4vw, 40px); }
.mc-cab p { margin: 0; }
.mc-cab-pedido { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.voltar-link { display: inline-flex; align-items: center; gap: 8px; color: var(--suave); font-size: 13px; margin-bottom: 8px; }
.voltar-link:hover { color: var(--texto); }
.aviso-ok { display: flex; align-items: center; gap: 10px; border: 1px solid #3fb36b; color: #c9f5d8; background: rgba(63, 179, 107, .08); padding: 12px 14px; margin: 0; }

/* abas e lista de pedidos */
.mc-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); overflow-x: auto; scrollbar-width: none; }
.mc-abas a { padding: 10px 14px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); border-bottom: 2px solid transparent; white-space: nowrap; }
.mc-abas a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--texto); }
.mc-pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mc-pedido { border: 1px solid var(--linha-forte); background: var(--fundo); padding: 18px; display: grid; gap: 14px; }
.mc-pedido header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mc-pedido header div { display: grid; gap: 2px; }
.mc-pedido header b { font-size: 16px; }
.mc-pedido header small { color: var(--suave); }
.mc-fotos { display: flex; gap: 8px; align-items: center; }
.mc-fotos img { width: 64px; height: 64px; object-fit: cover; background: var(--foto); }
.mc-fotos span { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--linha-forte); color: var(--suave); font-weight: 700; }
.mc-andamentos { display: grid; gap: 12px; }
.mc-pedido footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--linha); padding-top: 14px; }
.mc-total { font-family: var(--titulo); font-weight: 800; font-size: 26px; }
.mc-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.mini { height: 40px; padding: 0 16px; font-size: 11px; }
.mc-vazio { display: grid; justify-items: center; gap: 12px; padding: 40px 16px; text-align: center; color: var(--suave); }
.mc-vazio svg { width: 40px; height: 40px; }
.mc-cancelado { margin: 0; color: var(--suave); font-size: 13px; }
.pilula-status { display: inline-flex; align-items: center; padding: 5px 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--linha-forte); white-space: nowrap; }
.pilula-status.st-pago { border-color: #3fb36b; color: #9be7b6; }
.pilula-status.st-aguardando_pagamento { border-color: #d6a23a; color: #f3cf86; }
.pilula-status.st-cancelado, .pilula-status.st-expirado, .pilula-status.st-estornado { color: var(--apagado); }

/* andamento do pacote */
.andamento { display: grid; gap: 10px; }
.andamento-topo { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.andamento-topo span { color: var(--suave); text-align: right; }
.andamento p { margin: 0; font-size: 13px; }
.passos-pedido { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.passos-pedido li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.passos-pedido li::before { content: ''; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--linha-forte); }
.passos-pedido li:first-child::before { display: none; }
.passos-pedido li.feito::before, .passos-pedido li.agora::before { background: var(--texto); }
.passos-pedido .bolinha { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--linha-forte); background: var(--fundo); display: grid; place-items: center; }
.passos-pedido li.feito .bolinha { background: var(--texto); border-color: var(--texto); color: var(--fundo); }
.passos-pedido li.agora .bolinha { border-color: var(--texto); box-shadow: 0 0 0 4px rgba(244, 244, 242, .12); }
.passos-pedido li.agora .bolinha::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho); }
.passos-pedido small { font-size: 11px; color: var(--suave); letter-spacing: .04em; }
.passos-pedido li.feito small, .passos-pedido li.agora small { color: var(--texto); }
.andamento.compacto .passos-pedido small { font-size: 10px; }
.rastreio { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mc-pagar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border: 1px solid #d6a23a; background: rgba(214, 162, 58, .07); padding: 14px 16px; }
.mc-pagar p { margin: 0; }
.mc-pacotes .pacote { background: var(--fundo); gap: 16px; }
.mc-entrega { display: flex; gap: 10px; align-items: flex-start; color: var(--suave); font-size: 13px; }
.mc-entrega p { margin: 0; line-height: 1.6; }
.minha-conta .resumo { background: var(--fundo); }
.minha-conta .resumo .btn { font-size: 11px; }

/* formulários da conta: seção com explicação à esquerda e campos à direita */
.mc-form { display: grid; gap: 0; }
.mc-secao { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; padding: 22px 0; border-top: 1px solid var(--linha); }
.mc-secao-info h3 { margin: 0 0 6px; font-family: var(--corpo); font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: none; line-height: 1.3; }
.mc-secao-info p { margin: 0; font-size: 13px; line-height: 1.5; }
.mc-secao-campos { display: grid; gap: 14px; max-width: 520px; }
.campo-icone { display: grid; gap: 6px; }
.rotulo-campo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.caixa-campo { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border: 1px solid var(--linha-forte); background: var(--fundo); color: var(--suave); transition: border-color .2s; }
.caixa-campo:focus-within { border-color: var(--texto); color: var(--texto); }
.caixa-campo input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--texto); font-size: 15px; outline: none; }
.caixa-campo.leitura { background: transparent; border-style: dashed; }
.caixa-campo.leitura input { color: var(--suave); }
.campo-icone small { color: var(--apagado); font-size: 12px; }
.mc-cidade { display: flex; align-items: center; gap: 8px; margin: 0; }
.mc-salvar { display: grid; gap: 10px; justify-items: start; padding-top: 22px; border-top: 1px solid var(--linha); }
.mc-salvar .btn { min-width: 240px; }
.selo-seguro { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--suave); font-size: 12px; }
.selo-seguro svg { width: 18px; height: 18px; }
.opcao { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--linha-forte); background: var(--fundo); cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--texto); }
.opcao input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--texto); }
.opcao span { display: grid; gap: 2px; }
.opcao small { color: var(--suave); }

@media (max-width: 900px) {
  .mc-grade { grid-template-columns: 1fr; gap: 16px; }
  .mc-menu { position: static; }
  .mc-menu nav { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .mc-menu nav::-webkit-scrollbar { display: none; }
  .mc-menu a { flex: 0 0 auto; width: auto; border: 1px solid var(--linha-forte); border-left-width: 1px; padding: 10px 12px; font-size: 13px; white-space: nowrap; }
  .mc-menu a[aria-current="page"] { border-color: var(--texto); border-left-color: var(--texto); }
  .mc-menu form { border-top: 0; padding-top: 0; }
  .mc-menu form button { width: auto; padding: 6px 0; font-size: 13px; }
  .mc-secao { grid-template-columns: 1fr; gap: 12px; }
  .mc-salvar .btn { width: 100%; }
  .mc-conteudo { padding: 18px 16px; margin-inline: calc(var(--gutter) * -1); border-left: 0; border-right: 0; }
}
@media (max-width: 520px) {
  .mc-pedido footer .mc-acoes, .mc-pedido footer .mc-acoes .btn { width: 100%; }
  .mc-fotos img, .mc-fotos span { width: 54px; height: 54px; }
}
.mc-conteudo > [data-pedido-criado] { display: grid; gap: 18px; }