/* =========================================================================
   Zona Mods — tema escuro.
   Base: cinza #171717. Destaque: verde lima #03f209, usado com moderação.
   Sem animações: a interface é estática e estável.
   ========================================================================= */

:root {
  --bg: #171717;
  --bg-deep: #121212;
  --surface: #1e1e1e;
  --surface-2: #252525;
  --line: #2c2c2c;
  --line-strong: #3a3a3a;
  --text: #f2f2f2;
  --text-2: #c4c4c4;
  --muted: #8f8f8f;
  --accent: #03f209;
  --accent-hover: #02d807;
  --accent-ink: #0b130a;
  --accent-soft: rgba(3, 242, 9, 0.12);
  --radius: 14px;
  --radius-sm: 8px;
  --container: 1200px;
  --gap: 24px;
  --section: 80px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* transição sutil entre páginas/abas (início → mapas → métricas → blog...) -
   ver renderWithTransition() em site.js. Reinicia a cada troca de rota
   removendo e recolocando essa classe, por isso a animação, não transition. */
#app.is-route-transition { animation: routeFadeIn 0.22s ease; }
@keyframes routeFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #app.is-route-transition { animation: none; }
}

/* barrinha verde de progresso no topo da tela (acima até do cabeçalho) nas
   trocas de página - ver startRouteProgress() em site.js. */
.route-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(3, 242, 9, 0.6);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
}
.route-progress.is-loading {
  width: 85%;
  opacity: 1;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
}
.route-progress.is-done {
  width: 100%;
  opacity: 0;
  transition: width 0.2s ease, opacity 0.3s ease 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  .route-progress { display: none; }
}

/* ------------------------------------------------------------ cabeçalho */

#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* garante um contexto de empilhamento isolado e sólido - o menu da moeda
     (um filho posicionado que ultrapassa a altura do cabeçalho) precisa
     ficar sempre por cima do conteúdo da página abaixo, sem ambiguidade. */
  isolation: isolate;
  background: rgba(23, 23, 23, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 72px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.brand img { width: 40px; height: 40px; object-fit: contain; }

.main-nav { display: flex; gap: 24px; margin-right: auto; }
.main-nav a {
  color: var(--text-2);
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

.header-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.flags { display: flex; gap: 6px; }
.flag-btn {
  width: 34px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.55;
}
.flag-btn svg { width: 100%; height: 100%; display: block; }
.flag-btn[aria-pressed="true"] { opacity: 1; }
.flag-btn:hover { opacity: 1; }

/* seletor de moeda - dropdown próprio (não é mais um <select> nativo), pra
   não cair na cara padrão do navegador quando abre. Ver .currency-select-list
   em site-dynamic.css para o painel das opções. */
.currency-select { position: relative; }
.currency-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.currency-select-btn:hover { border-color: var(--text-2); background: var(--surface-2); }
.currency-select-btn svg { flex-shrink: 0; transition: transform 0.2s var(--ease); }
.currency-select.is-open .currency-select-btn { border-color: var(--accent); color: var(--accent); }
.currency-select.is-open .currency-select-btn svg { transform: rotate(180deg); }

/* ícone do carrinho (sem texto) numa caixa igual aos outros botões/ícones do
   cabeçalho (ver .social-btn em site-dynamic.css) - só o traço fica verde,
   pra se destacar sem parecer solto/fora do lugar. */
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cart-link svg { width: 20px; height: 20px; }
.cart-link:hover, .cart-link[aria-expanded="true"] { border-color: var(--accent); background: var(--surface-2); color: var(--accent-hover); }

.badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* no carrinho do cabeçalho o número vira um selo pequeno no canto do ícone,
   em vez de uma pílula do lado do texto (que não existe mais). Por dentro
   da borda do botão, não flutuando pra fora dela - o clip-path do
   .cut-corner (que esse botão também usa) corta fora qualquer coisa
   posicionada além da própria caixa. */
.cart-link .badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 10px;
  border: 2px solid var(--bg);
}

.account { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.account-name { color: var(--text-2); }

/* botão da conta no cabeçalho: nome + foto quadrada (ver accountAvatarHtml em
   site.js), abre um painel (identidade + histórico/produtos/configuração) -
   mesma técnica de position:fixed calculado via JS do seletor de moeda (ver
   positionAccountMenu/.currency-select em site-dynamic.css), pra nunca
   depender do stacking context de nenhum ancestral. */
.account-select { position: relative; }
.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 6px 0 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
/* hover neutro de propósito (sem verde) - o verde fica só pro estado aberto,
   que já tem outro sinal visual (a seta do menu abrindo). */
.account-trigger:hover { border-color: var(--text-2); background: var(--surface-2); }
.account-select.is-open .account-trigger { border-color: var(--text); color: var(--text); }
.account-trigger .account-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}
/* Foto de perfil quadrada, sem arredondamento nem recorte decorativo. */
.account-avatar {
  width: 28px;
  height: 28px;
  --cut: 7px;
  border-radius: 0;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-2);
  display: grid;
  place-items: center;
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-avatar-fallback {
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  color: var(--accent);
}
.account-avatar-lg { width: 56px; height: 56px; --cut: 12px; }
.account-avatar-lg .account-avatar-fallback { font-size: 20px; }

/* painel inteiro da conta: só um shell de posicionamento (position:fixed,
   calculado via JS - ver positionAccountMenu em site.js), SEM nenhum visual
   próprio. O cartão visível de verdade é .account-menu-panel dentro dele -
   separar assim evita que o .cut-corner (que define position:relative) brigue
   com o position:fixed que esse shell precisa pra sempre aparecer por cima,
   não importa o stacking context do cabeçalho/hero por trás. */
.account-menu-list {
  position: fixed;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0.15s;
}
.account-select.is-open .account-menu-list { opacity: 1; visibility: visible; transform: translateY(0); }
.account-menu-panel {
  min-width: 260px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

/* cabeçalho de identidade do painel: foto + "5M-CFX" + nome + ID - o cartão
   fica parecendo uma conta de verdade, não só uma lista de links soltos. */
.account-menu-id { display: flex; align-items: center; gap: 12px; padding: 12px 10px; }
.account-menu-avatar {
  width: 44px;
  height: 44px;
  --cut: 9px;
  border-radius: 0;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-2);
  display: grid;
  place-items: center;
}
.account-menu-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-menu-avatar .account-avatar-fallback { font-size: 17px; }
.account-menu-id-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-menu-id-kicker {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.account-menu-id-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-id-value { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.account-menu-items { margin: 0; padding: 0; list-style: none; }
.account-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
}
.account-menu-item svg { flex-shrink: 0; color: var(--accent); }
.account-menu-item:hover { background: var(--surface-2); color: var(--text); }
.account-menu-sep { height: 1px; margin: 6px 4px; background: var(--line); }

/* "Sair" em vermelho, separado do resto (pedido explícito) - mesmo tom de
   perigo já usado no resto do site (ver .cart-row-remove:hover). */
.account-menu-logout,
.account-menu-logout svg { color: #da373c; }
.account-menu-logout:hover { background: rgba(218, 55, 60, 0.12); color: #da373c; }

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--text); }

/* ------------------------------------------------------------ botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn:disabled,
.btn-cart.is-added {
  cursor: default;
  opacity: 0.55;
  filter: grayscale(0.4);
}
.btn-primary:disabled { background: var(--surface-2); color: var(--muted); }
.btn-primary:disabled:hover { background: var(--surface-2); }
.btn-cart.is-added:hover { border-color: var(--line-strong); color: var(--text); }

/* spinner do botão "adicionar ao carrinho" enquanto espera a Tebex confirmar
   (ver addToCartButtonHtml/state.addingToCartId em site.js) - evita a tela
   parada sem nenhum feedback durante esse tempo. */
.btn-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin {
  to { transform: rotate(360deg); }
}
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-outline { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn-outline:hover { background: var(--accent-soft); color: var(--accent); }
.btn-small { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 14px 26px; font-size: 15px; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------ seções */

.section { padding: var(--section) 0; }
.section-tight { padding: 40px 0 var(--section); }
.section-alt { background: var(--bg-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 32px;
}
.section-head h2 { font-size: 26px; margin-bottom: 6px; }

.center-action { display: flex; justify-content: center; margin-top: 40px; }

/* botão "Mapas" da seção de mapas recentes: alinhado à esquerda, com o
   mesmo max-width/padding do #home-track (ver site-dynamic.css), pra
   bater exatamente com a borda esquerda do primeiro card do carrossel em
   qualquer largura de tela (pedido explícito: não centralizado). */
.featured-more { width: 100%; max-width: 1560px; margin: 40px auto 0; padding: 0 20px; box-sizing: border-box; }

.page-head { padding: 56px 0 24px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.page-head h1 { font-size: 34px; margin-bottom: 8px; }

.eyebrow {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.loading { padding: 120px 0; }

.empty {
  text-align: center;
  padding: 72px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--text-2);
}

/* ------------------------------------------------------------ início */

.hero {
  padding: 96px 0 72px;
  text-align: center;
  background: radial-gradient(ellipse at top, rgba(3, 242, 9, 0.07), transparent 62%);
  border-bottom: 1px solid var(--line);
}
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hero-logo { width: 112px; height: 112px; object-fit: contain; margin-bottom: 8px; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: -0.02em; }
.hero .lead { color: var(--text-2); font-size: 17px; max-width: 620px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

.about {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.about h2 { font-size: 26px; margin-bottom: 18px; }
.notices { display: flex; flex-direction: column; gap: var(--gap); }

.notice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.notice h3 { font-size: 15px; margin-bottom: 10px; }
.notice-line {
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
}

/* conteúdo HTML vindo da Tebex */
.prose { color: var(--text-2); }
.prose p { margin: 0 0 12px; }
.prose ul { list-style: disc; padding-left: 22px; margin: 0 0 12px; }
.prose li { margin: 4px 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--text); margin: 18px 0 10px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--radius-sm); margin: 10px 0; }

/* ------------------------------------------------------------ cards / galeria */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gap);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card:hover { border-color: var(--line-strong); }

/* ícone padrão do site: cantinho cortado no canto inferior direito, aberto
   de verdade (sem preenchimento) - só a linha do corte em si fica verde, sem
   efeito de "cantinho de papel dobrado". Reaproveitado em qualquer card que
   deva levar essa assinatura visual (produto, item do carrinho, etc). */
.cut-corner {
  position: relative;
  --cut: 14px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.cut-corner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--cut);
  height: var(--cut);
  background: linear-gradient(
    135deg,
    transparent calc(50% - 1px),
    var(--accent) calc(50% - 1px),
    var(--accent) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}

.card-media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--bg-deep);
  overflow: hidden;
}
.card-media img,
.main-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-media img.placeholder,
.main-frame img.placeholder,
.cart-thumb img.placeholder {
  object-fit: contain;
  padding: 22%;
  opacity: 0.22;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 22px;
  flex: 1;
}
.card-cat {
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.card h3 { font-size: 17px; }
.card h3 a:hover { color: var(--accent); }
.card-desc {
  color: var(--muted);
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.card-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
}
.price { font-size: 18px; }
.price strong { font-weight: 400; }
/* preço com desconto por volume desbloqueado (ver priceHtml/currentVolumeDiscount
   em site.js) - original sempre riscado em cima, valor com desconto embaixo.
   Mesmo estilo fino (não negrito) usado em todo preço do site - ver
   .cart-volume-tier b em site-dynamic.css, a referência original do estilo. */
.price .price-original {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: line-through;
}
.price .price-discounted { color: var(--accent); font-weight: 400; }

/* ------------------------------------------------------------ vitrine */

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.search { flex: 0 1 360px; min-width: 240px; }
.search input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: 1px solid var(--accent); outline-offset: 1px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
}
.chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.count { font-size: 13px; margin: 0 0 22px; }

/* ------------------------------------------------------------ produto */

.back { display: inline-block; color: var(--muted); font-size: 14px; margin-bottom: 26px; }
.back:hover { color: var(--text); }

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.main-frame {
  /* fotos e vídeos do produto sempre chegam em 1920x1080 - a moldura casa com isso
     pra imagem/vídeo preencher tudo, sem barra nenhuma embaixo ou nas laterais. */
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
}

.thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumb {
  width: 104px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { border-color: var(--accent); }

.product-info { display: flex; flex-direction: column; gap: 18px; }
.product-info h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.product-price { font-size: 28px; }
.product-price strong { font-weight: 400; color: var(--text); }
.product-price .price-original {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: line-through;
}
.product-price .price-discounted { color: var(--accent); font-weight: 400; }

.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-2);
}
.tag-accent { border-color: var(--accent); color: var(--accent); }

.gift { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.gift .check svg { color: var(--accent); flex-shrink: 0; }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--text-2); }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* conta Cfx.re já escolhida no autocomplete (ver giftPanelHtml em site.js) -
   vira um chip com foto, nome, ID e um X pra trocar, em vez do campo de
   busca (que só volta a aparecer se a pessoa remover a seleção). */
.gift-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.gift-selected-avatar,
.gift-selected-avatar img,
.gift-selected-avatar .sc-picker-item-fallback {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.gift-selected-avatar .sc-picker-item-fallback {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--accent);
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
}
.gift-selected-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.gift-selected-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-selected-id { font-size: 11px; color: var(--muted); }
.gift-selected-clear {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.gift-selected-clear:hover { color: #da373c; background: rgba(218, 55, 60, 0.12); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.field input {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  max-width: 360px;
}
.field input:focus { outline: 1px solid var(--accent); outline-offset: 1px; }
.hint { color: var(--muted); font-size: 12px; }

.product-desc {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  max-width: 860px;
}
.product-desc h2 { font-size: 22px; margin-bottom: 18px; }

/* coordenada CDS extraída da última linha da descrição (ver
   extractCdsCoords/cdsCardHtml em site.js) - rótulo em destaque verde +
   valor num card separado, copiável com um clique. */
.cds-card { display: flex; align-items: stretch; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.cds-card-label {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.cds-card-value {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.cds-card-value:hover, .cds-card-value:focus-visible { border-color: var(--text-2); }
.cds-card-value-icon { display: inline-flex; color: var(--accent); flex-shrink: 0; }
.cds-card-value.is-copied { border-color: var(--accent); background: rgba(3, 242, 9, 0.08); }
/* sem a linha verde do .cut-corner nesse card - só o cantinho cortado mesmo. */
.cds-card-value::after { content: none; }

/* ------------------------------------------------------------ carrinho
   Agora é um painel lateral (não mais uma página) - ver .cart-drawer-host
   mais abaixo. A linha de cada item (.cart-row) é reaproveitada ali dentro,
   uma por item, cada uma já em formato retângulo próprio (como um card). */

.cart-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 38px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color 0.25s var(--ease);
}
.cart-row-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cart-row-desc {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
  /* quebra cedo (poucas palavras por linha) em vez de esticar numa linha só
     até perto do preço - no máximo 2 linhas, o resto corta com reticências. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* "presente para X" dentro do card do item - uma caixinha minimalista
   própria, com ícone, em vez de só um texto solto (pedido explícito). */
.cart-row-gift {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 2px 0 0;
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  color: var(--text-2);
}
.cart-row-gift svg { flex-shrink: 0; color: var(--accent); width: 12px; height: 12px; }
.cart-thumb {
  width: 68px;
  height: 68px;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-deep);
  display: block;
  flex-shrink: 0;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-name {
  font-weight: 600;
  font-size: 14.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-name:hover { color: var(--accent); }

.cart-row-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.cart-row-remove:hover { color: #da373c; background: rgba(218, 55, 60, 0.12); }
.cart-row-remove.is-removing { cursor: default; color: var(--text-2); }
.cart-row-remove.is-removing:hover { background: transparent; }

.cart-row-price {
  grid-column: 3;
  margin-top: 26px;
  font-size: 17px;
  font-weight: 400;
  color: var(--accent);
  white-space: nowrap;
}

/* item com o desconto por volume aplicado (ver cartDrawerHtml em site.js):
   preço original riscado em cima, preço com desconto embaixo - igual
   qualquer marketplace mostrando um item em promoção. */
.cart-row-price-wrap {
  grid-column: 3;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.cart-row-price-wrap .cart-row-price { margin-top: 0; }
.cart-row-price-original {
  font-size: 11.5px;
  color: var(--muted);
  text-decoration: line-through;
  white-space: nowrap;
}

.summary-line { display: flex; justify-content: space-between; color: var(--text-2); font-size: 14px; }
.summary-line.total {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 4px;
  color: var(--text);
  font-size: 19px;
  font-weight: 400;
}
/* avisinho discreto embaixo do total - pedido explícito, bem curto e sutil. */
.cart-total-note { margin: 4px 0 0; font-size: 11px; color: var(--muted); }

/* total do carrinho com o desconto por volume aplicado - uma seção só
   ("Total"), valor original riscado (só o preço, sem rótulo) ao lado do
   valor final, igual o item do carrinho mas lado a lado em vez de
   empilhado (ver cartFootHtml em site.js). O original riscado usa --text-2
   (não --muted) de propósito: precisa continuar legível, não "apagado",
   pra o cliente ver exatamente quanto pagaria sem o desconto. */
.cart-total-value { display: inline-flex; align-items: baseline; gap: 8px; }
.cart-total-original {
  color: var(--text-2);
  font-size: 14px;
  font-weight: 400;
  text-decoration: line-through;
}
.cart-total-final { color: var(--accent); }
.cart-total-discounted span:last-child { color: var(--accent); }

/* ------------------------------------------------------------ rodapé */

.site-footer { margin-top: auto; }

.footer-main { background: var(--bg-deep); padding: 56px 0 28px; border-top: 1px solid var(--line); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: 40px;
}
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); }
.footer-col p { font-size: 14px; max-width: 360px; }
.footer-links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
.footer-links a:hover { color: var(--accent); }
.footer-links button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.footer-links button:hover { color: var(--accent); }

.payment-list { display: flex; flex-wrap: wrap; gap: 10px; }
.payment-chip {
  background: #ffffff;
  border-radius: 6px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  height: 40px;
}
.payment-chip img { height: 24px; width: auto; }

.footer-copy {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

.footer-tebex { background: #ffffff; color: #171717; padding: 22px 0; }
.footer-tebex-inner { display: flex; align-items: center; gap: 24px; }
.footer-tebex-inner img { height: 26px; width: auto; flex-shrink: 0; }
.footer-tebex-inner p { font-size: 13px; color: #2b2b2b; line-height: 1.5; }

/* ------------------------------------------------------------ diálogo e aviso */

dialog {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0;
  width: min(420px, calc(100% - 32px));
}
dialog::backdrop { background: rgba(0, 0, 0, 0.65); }
.dialog-card { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.dialog-card h2 { font-size: 20px; }
.dialog-card p { color: var(--text-2); font-size: 14px; }
.dialog-providers { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

/* mesmo recorte de canto + linha verde usado em todo card do site (ver
   .cut-corner) - antes era uma pílula arredondada com borda verde inteira,
   destoava da arquitetura visual do resto (pedido explícito: mais
   profissional, mais limpa, nada "dinâmica"/chamativa). */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 12px 20px;
  font-size: 14px;
  z-index: 100;
  max-width: calc(100% - 32px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------ responsivo */

@media (max-width: 960px) {
  :root { --section: 56px; }
  .about, .product { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-tebex-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 720px) {
  .header-inner { gap: 14px; }
  .main-nav { order: 3; width: 100%; margin-right: 0; gap: 20px; border-top: 1px solid var(--line); padding-top: 8px; }
  .header-tools { width: 100%; justify-content: space-between; }
  .account-name { display: none; }
  .hero { padding: 64px 0 48px; }
  .search { flex: 1 1 100%; }
  .section-head { flex-direction: column; align-items: flex-start; }
}