/* ===== tokens/colors.css ===== */
:root{
  /* Laranja SADY */
  --sady-50:#FEF4E9; --sady-100:#FDE6CC; --sady-200:#FBCB99; --sady-300:#F9B066;
  --sady-400:#F79C43; --sady-500:#F68B1F; --sady-600:#DB7710; --sady-700:#B35A00;
  --sady-800:#8A4500; --sady-900:#5E2F00;
  /* Neutros / antracite D&S */
  --ink-900:#231F20; --ink-800:#3A3436; --ink-700:#554D4F; --ink-600:#766D6F;
  --ink-500:#9A9294; --ink-400:#BCB6B7; --ink-300:#D9D5D6; --ink-200:#EBE8E9;
  --ink-100:#F5F3F3; --ink-050:#FAF9F9; --paper:#FFFFFF;
  /* Funcionais — uso restrito */
  --lima:#C8F04A; --aco:#2E6BE6; --ok:#166534; --alerta:#B35A00; --erro:#B91C1C;
  /* Gradiente único permitido */
  --grad-laranja:linear-gradient(135deg,#F79C43,#DB7710); /* @kind other */
  /* Aliases semânticos */
  --text-principal:var(--ink-900);
  --text-secundario:var(--ink-700);
  --text-terciario:var(--ink-600);
  --text-laranja:var(--sady-700);        /* NUNCA --sady-500 sobre fundo claro */
  --text-invertido:#FFFFFF;
  --text-invertido-suave:rgba(255,255,255,.72);
  --acao-primaria:var(--sady-500);
  --superficie-escura:var(--ink-900);
  --superficie-produto:var(--ink-050);
  --linha:var(--ink-200);
  --linha-suave:var(--ink-100);
  --linha-escura:rgba(255,255,255,.14);
  --dados-1:var(--sady-500); --dados-2:var(--ink-500); --dados-3:var(--lima); --dados-4:var(--aco);
}

/* ===== tokens/fonts.css ===== */
/* SADY usa três famílias, todas Google Fonts (uso comercial livre).
   Não foram fornecidos ficheiros de fonte próprios — ver readme.md › Tipografia.
   O @import foi movido para o <head> do index.html (carregamento não bloqueante);
   se o Google Fonts falhar, os fallbacks de sistema abaixo mantêm a página utilizável. */
:root{
  --font-display:'Figtree',system-ui,'Segoe UI',sans-serif;
  --font-ui:'Inter',system-ui,'Helvetica Neue',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  /* aliases herdados da placa de estilo */
  --f-display:var(--font-display);
  --f-ui:var(--font-ui);
  --f-mono:var(--font-mono);
}

/* ===== tokens/typography.css ===== */
:root{
  --texto-display-xl:800 64px/1.06 var(--font-display);
  --texto-display:800 48px/1.12 var(--font-display);
  --texto-t1:700 32px/1.25 var(--font-display);
  --texto-t2:700 24px/1.33 var(--font-display);
  --texto-t3:600 18px/1.44 var(--font-display);
  --texto-corpo:400 16px/1.63 var(--font-ui);
  --texto-corpo-peq:400 14px/1.57 var(--font-ui);
  --texto-etiqueta:500 12px/1.33 var(--font-ui);
  --texto-chapa:500 11px/1.27 var(--font-mono);
  --tracking-display-xl:-.03em; /* @kind other */
  --tracking-display:-.025em; /* @kind other */
  --tracking-t1:-.02em; /* @kind other */
  --tracking-t2:-.015em; /* @kind other */
  --tracking-t3:-.01em; /* @kind other */
  --tracking-etiqueta:.01em; /* @kind other */
  --tracking-chapa:.10em; /* @kind other */
  --tracking-rotulo:.16em; /* @kind other */
}

/* ===== tokens/spacing.css ===== */
:root{
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-6:24px;
  --e-8:32px; --e-12:48px; --e-16:64px; --e-24:96px; --e-32:128px;
  --largura-conteudo:1280px;
  --goteira:24px;
  --pad-cartao-compacto:24px;
  --pad-cartao:32px;
  --pad-cartao-heroi:48px;
  --secao-desktop:96px;
  --secao-mobile:56px;
  --toque-min:44px;
}

/* ===== tokens/surfaces.css ===== */
:root{
  --raio-xs:8px; --raio-sm:12px; --raio-md:16px; --raio-lg:24px; --raio-xl:32px; --raio-pill:999px;
  --sombra-1:0 2px 8px rgba(35,31,32,.08);
  --sombra-2:0 8px 32px rgba(35,31,32,.12);
  --sombra-3:0 20px 60px rgba(35,31,32,.20);
  --sombra-escura:0 12px 40px rgba(0,0,0,.28);
  --brilho-laranja:0 6px 20px rgba(246,139,31,.32);
  /* Vidro claro */
  --vidro-claro-fundo:rgba(255,255,255,.62);
  --vidro-claro-borda:rgba(255,255,255,.70);
  --vidro-claro-blur:blur(28px) saturate(1.4); /* @kind other */
  --vidro-claro-interior:rgba(255,255,255,.75);
  /* Vidro escuro */
  --vidro-escuro-fundo:rgba(35,31,32,.52);
  --vidro-escuro-borda:rgba(255,255,255,.16);
  --vidro-escuro-blur:blur(32px) saturate(1.2); /* @kind other */
  --vidro-escuro-interior:rgba(35,31,32,.62);
  /* Vidro âmbar — um por ecrã */
  --vidro-ambar-fundo:rgba(246,139,31,.16);
  --vidro-ambar-borda:rgba(246,139,31,.38);
  --vidro-ambar-blur:blur(24px); /* @kind other */
  /* Tabelas: o vidro recua */
  --tabela-fundo:rgba(255,255,255,.86);
  /* Assinatura: chanfro a 45° */
  --chanfro:28px;
  --chanfro-sd:polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); /* @kind other */
  --chanfro-id:polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); /* @kind other */
  /* Ambiente (camada 1) */
  --ambiente-blur:blur(48px) saturate(1.05); /* @kind other */
  --ambiente-lavagem:linear-gradient(160deg,rgba(246,139,31,.14),rgba(35,31,32,.55)); /* @kind other */
  --ambiente-fundo:radial-gradient(60% 45% at 22% 18%,rgba(246,139,31,.42),transparent 62%),radial-gradient(50% 40% at 82% 12%,rgba(255,196,120,.26),transparent 60%),radial-gradient(70% 60% at 70% 92%,rgba(46,107,230,.14),transparent 65%),linear-gradient(160deg,#3A3436 0%,#231F20 55%,#171314 100%); /* @kind other */
}

/* ===== tokens/motion.css ===== */
:root{
  --mov-hover:180ms; /* @kind other */
  --mov-premido:100ms; /* @kind other */
  --mov-entrada:280ms; /* @kind other */
  --mov-desfasamento:40ms; /* @kind other */
  --mov-contador:800ms; /* @kind other */
  --ease-saida:cubic-bezier(.16,.84,.44,1); /* @kind other */
  --ease-padrao:ease-out; /* @kind other */
  --hover-elevar:translateY(-2px); /* @kind other */
  --premido-escala:scale(.98); /* @kind other */
}

/* ===== tokens/utilities.css ===== */
/* Classes de assinatura SADY. Espelham a placa de estilo original. */
.sady-ambiente{position:fixed;inset:-10%;z-index:0;background:var(--ambiente-fundo);filter:var(--ambiente-blur)}
.sady-grao{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.28;background-image:radial-gradient(rgba(255,255,255,.12) .5px,transparent .5px);background-size:3px 3px}
.vidro{background:var(--vidro-claro-fundo);backdrop-filter:var(--vidro-claro-blur);-webkit-backdrop-filter:var(--vidro-claro-blur);border:1px solid var(--vidro-claro-borda);box-shadow:var(--sombra-2),inset 0 1px 0 rgba(255,255,255,.55);border-radius:var(--raio-lg)}
.vidro-escuro{background:var(--vidro-escuro-fundo);backdrop-filter:var(--vidro-escuro-blur);-webkit-backdrop-filter:var(--vidro-escuro-blur);border:1px solid var(--vidro-escuro-borda);box-shadow:var(--sombra-escura),inset 0 1px 0 rgba(255,255,255,.10);border-radius:var(--raio-lg);color:#fff}
.vidro-ambar{background:var(--vidro-ambar-fundo);backdrop-filter:var(--vidro-ambar-blur);-webkit-backdrop-filter:var(--vidro-ambar-blur);border:1px solid var(--vidro-ambar-borda);border-radius:var(--raio-lg)}
.chanfro{clip-path:var(--chanfro-sd)}
.chapa{font:var(--texto-chapa);letter-spacing:var(--tracking-chapa);text-transform:uppercase;color:var(--text-terciario);border-top:1px solid var(--linha);padding-top:10px}
.chapa-escura{color:rgba(255,255,255,.62);border-top-color:rgba(255,255,255,.18)}
.hex-marcador{width:7px;height:8px;background:var(--sady-500);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.num{font-family:var(--font-display);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-display-xl)}
a{color:var(--text-laranja);text-decoration:none}
a:hover{text-decoration:underline}
@media (max-width:560px){.vidro,.vidro-escuro,.vidro-ambar{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== _app.fonte.css ===== */
/* Landing «Campanha Promocional» — SADY Design System.
   Só tokens; nenhuma cor ou tipo literal fora dos definidos em tokens/. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font:var(--texto-corpo);color:var(--text-principal);
  background:var(--ink-900);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;z-index:0;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.ru{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--sady-500);outline-offset:2px;border-radius:var(--raio-xs);
}

.salto-conteudo{
  position:fixed;left:8px;top:-60px;z-index:100;background:var(--paper);
  color:var(--text-principal);padding:10px 16px;border-radius:var(--raio-sm);
  box-shadow:var(--sombra-2);transition:top .15s;
}
.salto-conteudo:focus{top:8px}

/* ------------------------------------------------------------- ícones */
.ico{width:18px;height:18px;flex:none;color:currentColor}
.ico use{color:currentColor}

/* ------------------------------------------------------------- botões */
.btn-primario,.btn-secundario,.btn-terciario{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--toque-min);padding:0 22px;border-radius:var(--raio-pill);
  border:1px solid transparent;font:600 14px/1 var(--font-ui);cursor:pointer;
  transition:transform var(--mov-premido) ease, box-shadow var(--mov-hover) var(--ease-padrao);
  white-space:nowrap;
}
.btn-primario{background:var(--grad-laranja);color:var(--text-invertido);box-shadow:var(--brilho-laranja);
  clip-path:var(--chanfro-id);padding:0 26px;height:44px}
.btn-primario:hover{transform:var(--hover-elevar)}
.btn-primario:active{transform:var(--premido-escala)}
.btn-secundario{background:var(--vidro-claro-fundo);border-color:var(--vidro-claro-borda);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:var(--text-principal)}
.btn-secundario:hover{transform:var(--hover-elevar)}
.btn-terciario{background:transparent;color:var(--text-laranja);padding:0 8px}
.btn-terciario:hover{text-decoration:underline}
.btn-terciario[disabled]{opacity:.45;cursor:not-allowed;text-decoration:none}

/* ------------------------------------------------------------- cabeçalho */
.cabecalho{
  position:fixed;inset:0 0 auto;z-index:40;
  background:var(--vidro-claro-fundo);backdrop-filter:var(--vidro-claro-blur);
  -webkit-backdrop-filter:var(--vidro-claro-blur);
  border-bottom:1px solid var(--vidro-claro-borda);
  box-shadow:var(--sombra-1);
}
.cabecalho__interior{
  max-width:var(--largura-conteudo);margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;gap:16px;min-height:56px;
}
.cabecalho__logo{display:flex;align-items:center}
.cabecalho__logo img{height:23px;width:auto}
.cabecalho__acoes{margin-left:auto;display:flex;align-items:center;gap:10px}
.idioma{display:flex;align-items:center;gap:6px;font:var(--texto-chapa);letter-spacing:var(--tracking-chapa)}
.idioma__sep{color:var(--ink-400)}
.idioma__opcao{
  background:none;border:0;padding:8px 6px;min-width:var(--toque-min);min-height:var(--toque-min);
  color:var(--text-terciario);cursor:pointer;font:inherit;letter-spacing:inherit;
}
.idioma__opcao[aria-pressed="true"]{color:var(--text-laranja);font-weight:600}
.btn-lista{
  display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  padding:8px 10px;min-height:var(--toque-min);color:var(--text-secundario);font:600 14px/1 var(--font-ui);
  position:relative;
}
.btn-lista:hover{color:var(--text-principal)}
.btn-lista__contador{
  background:var(--sady-600);color:#fff;font:600 11px/1 var(--font-mono);
  min-width:18px;height:18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;
}
/* rótulo escondido visualmente em ecrã estreito mas presente para leitores de ecrã */
.btn-lista span:not(.btn-lista__contador){
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* ------------------------------------------------------------- conteúdo / layout */
.conteudo{
  max-width:var(--largura-conteudo);margin:0 auto;
  padding:calc(56px + 20px) 20px 0;position:relative;z-index:2;
}
.layout{display:block;margin-top:24px}
.principal{min-width:0;min-height:100vh}

/* ------------------------------------------------------------- hero */
.hero{
  padding:28px 24px;margin-top:8px;color:var(--text-principal);
}
.hero__corpo{max-width:62ch}
.hero__badge{display:inline-block;border-top:0;padding:6px 10px;border:1px solid var(--linha);
  border-radius:var(--raio-pill);color:var(--text-laranja);margin:0 0 16px}
.hero__titulo{font:var(--texto-t1);letter-spacing:var(--tracking-t1);margin:0 0 12px;display:flex;flex-direction:column;gap:2px}
.hero__subtitulo{font:600 15px/1.3 var(--font-mono);letter-spacing:var(--tracking-chapa);
  text-transform:uppercase;color:var(--text-terciario)}
.hero__validade{font:var(--texto-corpo-peq);color:var(--text-secundario);margin:0 0 16px;max-width:56ch}
.hero__chapa{display:block;margin:0 0 14px}
.hero__legal{font:var(--texto-etiqueta);line-height:1.6;color:var(--text-terciario);margin:0;max-width:70ch}

/* ------------------------------------------------------------- barra de resultados */
.resultados{
  position:sticky;top:56px;z-index:20;min-height:64px;
  background:var(--tabela-fundo);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--linha);border-radius:var(--raio-md);
  margin:24px 0 16px;padding:12px 14px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
}
.resultados__contagem{margin:0;font:600 13px/1.2 var(--font-ui);color:var(--text-secundario);flex:1 0 auto}
.resultados__contagem strong{color:var(--text-principal);font-variant-numeric:tabular-nums}
.resultados__ferramentas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-left:auto}
.campo-pesquisa{position:relative;display:flex;align-items:center;flex:1 1 240px;min-width:180px}
.campo-pesquisa__ico{position:absolute;left:12px;color:var(--ink-500);pointer-events:none}
.campo-pesquisa input{
  width:100%;height:40px;border-radius:var(--raio-pill);border:1px solid var(--linha);
  background:var(--paper);padding:0 14px 0 38px;font:var(--texto-corpo-peq);color:var(--text-principal);
}
.campo-pesquisa input:focus{outline:0;border-color:var(--sady-500);border-width:1.5px}
.ordenar{display:inline-flex;align-items:center;gap:6px}
.ordenar select{
  height:40px;border-radius:var(--raio-pill);border:1px solid var(--linha);background:var(--paper);
  padding:0 12px;font:var(--texto-corpo-peq);color:var(--text-principal);cursor:pointer;
}

/* ------------------------------------------------------------- filtros */
.filtros__cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.filtros__titulo{border-top:0;padding:0}
.filtros__fechar{background:none;border:0;cursor:pointer;color:var(--text-secundario);
  width:var(--toque-min);height:var(--toque-min);display:inline-flex;align-items:center;justify-content:center}
.grupo{border-top:1px solid var(--linha);padding:14px 0}
.grupo:first-child{border-top:0}
.grupo__titulo{margin:0 0 10px;font:600 12px/1 var(--font-mono);letter-spacing:var(--tracking-chapa);
  text-transform:uppercase;color:var(--text-terciario);display:flex;align-items:center;gap:8px}
.opcao{display:flex;align-items:center;gap:10px;padding:7px 4px;min-height:var(--toque-min);cursor:pointer;
  font:var(--texto-corpo-peq);color:var(--text-principal);border-radius:var(--raio-xs)}
.opcao:hover{background:var(--sady-50)}
.opcao input{width:18px;height:18px;accent-color:var(--sady-600);flex:none}
.opcao__conta{margin-left:auto;font:500 12px/1 var(--font-mono);color:var(--text-terciario);font-variant-numeric:tabular-nums}
.opcao--zero{opacity:.4}
.opcao--zero input{pointer-events:none}
.filtros__busca-marca{width:100%;height:36px;border-radius:var(--raio-pill);border:1px solid var(--linha);
  background:var(--paper);padding:0 12px;font:var(--texto-corpo-peq);margin-bottom:8px}
.filtros__mais{background:none;border:0;color:var(--text-laranja);cursor:pointer;font:var(--texto-corpo-peq);padding:6px 4px}
.filtros__rodape{display:flex;gap:10px;align-items:center;padding-top:12px;border-top:1px solid var(--linha);margin-top:6px}
.interruptor{display:flex;align-items:center;gap:10px;cursor:pointer;padding:7px 4px;min-height:var(--toque-min);font:var(--texto-corpo-peq)}
.interruptor input{width:38px;height:22px;appearance:none;background:var(--ink-300);border-radius:999px;position:relative;cursor:pointer;transition:background .15s;flex:none}
.interruptor input:checked{background:var(--sady-600)}
.interruptor input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .15s}
.interruptor input:checked::after{transform:translateX(16px)}

/* ------------------------------------------------------------- grelha + cartão */
.grelha{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;min-height:70vh}
.grelha__vazio{text-align:center;padding:48px 16px;color:var(--text-invertido-suave)}
.grelha__vazio p{margin:0 0 16px}
.grelha__sentinela{height:1px}
.grelha__carregar{text-align:center;color:var(--text-invertido-suave);font:var(--texto-corpo-peq);padding:16px}

.cartao{
  flex:0 1 calc((100% - 14px) / 2);min-width:150px;
  display:flex;flex-direction:column;
  /* Grelha densa de preços: o Design System manda o vidro recuar para dados
     densos. Superfície quase opaca (texto secundário cumpre AA) e SEM
     backdrop-filter — a esta opacidade o blur é invisível e custa render × centenas. */
  background:rgba(255,255,255,.95);
  border:1px solid var(--vidro-claro-borda);border-radius:var(--raio-sm);
  box-shadow:var(--sombra-2),inset 0 1px 0 rgba(255,255,255,.55);
  overflow:hidden;cursor:pointer;text-align:left;
  content-visibility:auto;contain-intrinsic-size:auto 480px;
  transition:transform var(--mov-hover) var(--ease-padrao),box-shadow var(--mov-hover) var(--ease-padrao);
}
.cartao__abrir{
  all:unset;display:block;cursor:pointer;
  font:600 15px/1.3 var(--font-display);letter-spacing:var(--tracking-t3);color:var(--text-principal);
}
.cartao__abrir:focus-visible{outline:2px solid var(--sady-500);outline-offset:2px;border-radius:var(--raio-xs)}
.cartao:hover{transform:var(--hover-elevar);box-shadow:var(--sombra-3)}
.cartao__poco{position:relative;aspect-ratio:1/1;background:var(--superficie-produto);
  display:flex;align-items:center;justify-content:center}
.cartao__poco img{width:100%;height:100%;object-fit:contain;padding:12px}
.cartao__sem-img{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink-500)}
.cartao__sem-img .hex{width:34px;height:38px;background:var(--ink-300);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.cartao__sem-img span{font:600 11px/1 var(--font-mono);letter-spacing:.12em}
.cartao__marca{position:absolute;top:10px;left:10px;background:var(--tabela-fundo);
  font:600 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-secundario);padding:5px 8px;border-radius:var(--raio-xs)}
.cartao__corpo{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.cartao__nome{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cartao__cod{font:500 11px/1 var(--font-mono);letter-spacing:.08em;color:var(--text-secundario)}
.cartao__precos{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:2px}
.cartao__preco{font:800 22px/1 var(--font-display);letter-spacing:var(--tracking-display);
  font-variant-numeric:tabular-nums;color:var(--text-principal)}
.cartao__preco small{font-size:12px;font-weight:600;color:var(--text-secundario)}
.cartao__pvp{font:var(--texto-corpo-peq);color:var(--text-secundario);text-decoration:line-through;font-variant-numeric:tabular-nums}
.cartao__meta{font:var(--texto-corpo-peq);font-size:12px;color:var(--text-secundario)}

/* Compra a partir do cartão: escada de níveis + contador + «Adicionar». */
.cartao__compra{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:8px}
.cartao__escala{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.cartao__nivel:nth-child(odd):last-child{grid-column:1/-1}   /* nível órfão ocupa a linha toda */
.cartao__nivel{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:var(--toque-min);padding:6px 4px;border:1px solid transparent;border-radius:var(--raio-xs);
  background:var(--tabela-fundo);cursor:pointer;text-align:center;font-variant-numeric:tabular-nums;
  transition:border-color var(--mov-hover) var(--ease-padrao);
}
.cartao__nivel:hover{border-color:var(--ink-300)}
.cartao__nivel:focus-visible{outline:2px solid var(--sady-500);outline-offset:1px}
.cartao__nivel[aria-pressed="true"]{border-color:var(--ink-500);background:rgba(255,255,255,.95)}
.cartao__nivel-rot{font:600 9px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secundario)}
.cartao__nivel-un{font:700 12px/1.15 var(--font-display);color:var(--text-principal)}
.cartao__nivel-tot{font:500 9px/1 var(--font-mono);color:var(--text-secundario)}
.cartao__add-linha{display:flex;gap:6px;flex-wrap:wrap}
.cartao__qt{display:flex;align-items:center;flex:1 1 96px;border:1px solid var(--ink-300);
  border-radius:var(--raio-pill);overflow:hidden}
.cartao__qt-b{flex:none;width:38px;min-height:var(--toque-min);border:0;background:transparent;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text-principal)}
.cartao__qt-b:hover{background:var(--tabela-fundo)}
.cartao__qt-num{flex:1;min-width:0;width:100%;border:0;background:transparent;text-align:center;
  font:600 14px/1 var(--font-mono);color:var(--text-principal);min-height:var(--toque-min)}
.cartao__add{
  flex:1 1 120px;min-height:var(--toque-min);border:1px solid var(--ink-300);border-radius:var(--raio-pill);
  background:transparent;color:var(--text-principal);font:600 13px/1 var(--font-ui);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.cartao__add:hover{border-color:var(--ink-500)}
.cartao__add--no{color:var(--ok);border-color:var(--ok)}
.cartao__add-eco{margin:0;min-height:1.3em;font:600 11px/1.3 var(--font-mono);
  color:var(--sady-800);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- rodapé */
.rodape{position:relative;z-index:2;margin-top:64px;
  background:var(--vidro-escuro-fundo);backdrop-filter:var(--vidro-escuro-blur);
  -webkit-backdrop-filter:var(--vidro-escuro-blur);border-top:1px solid var(--linha-escura);color:#fff}
.rodape__interior{max-width:var(--largura-conteudo);margin:0 auto;padding:32px 20px}
.rodape__linha{margin:0 0 6px;font:var(--texto-corpo-peq);color:var(--text-invertido-suave)}
.rodape__linha a{color:var(--sady-500);text-decoration:underline;text-underline-offset:2px}
.rodape__chapa{color:rgba(255,255,255,.62);border-top-color:rgba(255,255,255,.18);margin-top:14px}

/* ------------------------------------------------------------- barra inferior (telemóvel) */
/* Visibilidade por CSS (não por JS) para não haver deslocamento de layout no arranque. */
.barra-inferior{
  position:fixed;inset:auto 0 0;z-index:40;display:none;
  background:var(--vidro-claro-fundo);backdrop-filter:var(--vidro-claro-blur);
  -webkit-backdrop-filter:var(--vidro-claro-blur);border-top:1px solid var(--vidro-claro-borda);
  padding-bottom:env(safe-area-inset-bottom);
}
@media (max-width:1023px){ .barra-inferior{display:flex} }
.barra-inferior__btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:none;border:0;padding:8px 4px;min-height:56px;cursor:pointer;
  font:600 11px/1.2 var(--font-ui);color:var(--text-secundario);position:relative;
}
.barra-inferior__btn .pastilha,.pastilha{
  position:absolute;top:4px;right:calc(50% - 26px);
  background:var(--sady-600);color:#fff;font:600 10px/1 var(--font-mono);
  min-width:16px;height:16px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 3px;
}

/* ------------------------------------------------------------- painel lista */
.painel-veu,.modal-veu,.filtros__veu{
  position:fixed;inset:0;z-index:50;background:rgba(23,19,20,.55);backdrop-filter:blur(2px);
}
.painel-lista{
  position:fixed;inset:0 0 0 auto;z-index:60;width:min(420px,100%);
  background:var(--ink-050);display:flex;flex-direction:column;box-shadow:var(--sombra-3);
}
.painel-lista__cab{display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--linha)}
.painel-lista__cab h2{margin:0;font:var(--texto-t3)}
.painel-lista__fechar,.modal__fechar{background:none;border:0;cursor:pointer;color:var(--text-secundario);
  width:var(--toque-min);height:var(--toque-min);display:inline-flex;align-items:center;justify-content:center}
.painel-lista__corpo{flex:1;overflow:auto;padding:12px 16px}
.painel-lista__rodape{border-top:1px solid var(--linha);padding:16px 20px;background:var(--paper)}
.li-linha{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:12px 0;border-bottom:1px solid var(--linha-suave)}
.li-linha__nome{font:600 13px/1.3 var(--font-ui)}
.li-linha__cod{font:500 10px/1 var(--font-mono);color:var(--text-terciario);letter-spacing:.06em}
.li-linha__qt{display:inline-flex;align-items:center;border:1px solid var(--linha);border-radius:var(--raio-pill);overflow:hidden}
.li-linha__qt button{width:32px;height:32px;background:none;border:0;cursor:pointer;color:var(--text-secundario);display:inline-flex;align-items:center;justify-content:center}
.li-linha__qt input{width:44px;height:32px;border:0;text-align:center;font:600 13px/1 var(--font-mono);background:none;color:var(--text-principal)}
.li-linha__sub{font:700 14px/1 var(--font-display);font-variant-numeric:tabular-nums;align-self:center}
.li-linha__aviso{grid-column:1/-1;font:500 11px/1.3 var(--font-mono);color:var(--text-laranja)}
.li-linha__rem{grid-column:1/-1;justify-self:start;background:none;border:0;color:var(--erro);font:var(--texto-etiqueta);cursor:pointer;padding:2px 0}
.li-total{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 14px}
.li-total strong{font:800 24px/1 var(--font-display);font-variant-numeric:tabular-nums}
.li-accoes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.li-accoes .btn-secundario{width:100%;padding:0 12px}
.li-aviso-perm{font:var(--texto-etiqueta);line-height:1.5;color:var(--text-terciario);margin:12px 0 0}
.li-vazia{text-align:center;color:var(--text-secundario);padding:40px 12px}

/* ------------------------------------------------------------- modal detalhe */
.modal{
  position:fixed;z-index:60;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:min(760px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;
  background:var(--ink-050);border-radius:var(--raio-lg);box-shadow:var(--sombra-3);
}
.modal__fechar{position:absolute;top:10px;right:10px;z-index:2;background:var(--tabela-fundo);border-radius:50%}
.modal__corpo{padding:24px}
.md-grid{display:grid;grid-template-columns:260px 1fr;gap:24px}
.md-poco{aspect-ratio:1/1;background:var(--superficie-produto);border-radius:var(--raio-md);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.md-poco img{width:100%;height:100%;object-fit:contain;padding:16px}
.md-marca{font:600 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-laranja)}
.md-nome{font:var(--texto-t2);letter-spacing:var(--tracking-t2);margin:6px 0 4px}
.md-cod{font:500 12px/1 var(--font-mono);letter-spacing:.08em;color:var(--text-terciario)}
.md-preco{font:800 34px/1 var(--font-display);font-variant-numeric:tabular-nums;margin:14px 0 2px}
.md-pvp{font:var(--texto-corpo-peq);color:var(--ink-500);text-decoration:line-through}
.md-specs{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.md-specs li{font:var(--texto-corpo-peq);color:var(--text-secundario);padding-left:14px;position:relative}
.md-specs li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:7px;background:var(--sady-500);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.md-ficha{margin:16px 0 0;border-top:1px solid var(--linha);display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;padding-top:12px}
.md-ficha div{font:var(--texto-corpo-peq)}
.md-ficha dt{font:600 10px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-terciario)}
.md-ficha dd{margin:2px 0 0;font-variant-numeric:tabular-nums}
.md-escaloes{margin:20px 0 0}
.md-escaloes h3{font:600 11px/1 var(--font-mono);letter-spacing:var(--tracking-chapa);text-transform:uppercase;
  color:var(--text-terciario);margin:0 0 8px}
.md-tabela{width:100%;border-collapse:collapse;background:var(--tabela-fundo);border-radius:var(--raio-sm);overflow:hidden}
.md-tabela th,.md-tabela td{padding:9px 12px;text-align:right;font:var(--texto-corpo-peq);font-variant-numeric:tabular-nums}
.md-tabela th{font:600 10px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-terciario);
  border-bottom:1px solid var(--linha)}
.md-tabela th:first-child,.md-tabela td:first-child{text-align:left}
.md-tabela tr+tr td{border-top:1px solid var(--linha-suave)}
/* tabela de escalões selecionável (radio por linha) */
.md-tabela--sel td.md-nivel__pick{width:34px;text-align:center;padding:9px 6px 9px 12px}
.md-tabela--sel thead th:nth-child(2),.md-tabela--sel tbody td:nth-child(2){text-align:left}
.md-nivel{cursor:pointer}
.md-nivel:hover{background:rgba(255,255,255,.5)}
.md-nivel--sel{background:rgba(255,255,255,.95)}
.md-nivel__r{width:16px;height:16px;margin:0;accent-color:var(--sady-600);cursor:pointer}
.md-nivel__r:focus-visible{outline:2px solid var(--sady-500);outline-offset:2px}

.md-add{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}
.md-qt{display:flex;align-items:center;border:1px solid var(--ink-300);border-radius:var(--raio-pill);overflow:hidden}
.md-qt__b{flex:none;width:40px;height:44px;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:var(--text-principal)}
.md-qt__b:hover{background:var(--tabela-fundo)}
.md-qt__num{width:54px;height:44px;border:0;background:transparent;text-align:center;
  font:600 14px/1 var(--font-mono);color:var(--text-principal)}
.md-eco{margin:8px 0 0;font:600 12px/1.3 var(--font-mono);color:var(--sady-800);font-variant-numeric:tabular-nums}

/* descrição + características do catálogo */
.md-descricao{margin:14px 0 0}
.md-descricao h3,.md-caract h3{font:600 11px/1 var(--font-mono);letter-spacing:var(--tracking-chapa);
  text-transform:uppercase;color:var(--text-terciario);margin:0 0 6px}
.md-descricao p{margin:0;font:var(--texto-corpo-peq);color:var(--text-secundario);line-height:1.55}
.md-caract{margin:16px 0 0}
.md-caract__dl{margin:0;border-top:1px solid var(--linha);padding-top:8px}
.md-caract__dl div{display:flex;justify-content:space-between;gap:16px;padding:4px 0}
.md-caract__dl div+div{border-top:1px solid var(--linha-suave)}
.md-caract__dl dt{font:600 11px/1.4 var(--font-ui);color:var(--text-secundario)}
.md-caract__dl dd{margin:0;max-width:56%;text-align:right;font:500 11px/1.4 var(--font-mono);
  font-variant-numeric:tabular-nums;color:var(--text-principal)}

/* ------------------------------------------------------------- boot */
.boot{position:fixed;inset:auto 0 24px;z-index:70;display:flex;align-items:center;justify-content:center;gap:10px;
  font:var(--texto-corpo-peq);color:var(--text-invertido-suave)}
.boot__spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--sady-500);
  border-radius:50%;animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------- responsivo */
@media (min-width:520px){
  .cartao{flex-basis:calc((100% - 28px) / 3)}
  .btn-lista span:not(.btn-lista__contador){
    position:static;width:auto;height:auto;overflow:visible;clip:auto;
  }
}
@media (min-width:768px){
  .conteudo{padding-left:32px;padding-right:32px}
  .hero{padding:40px 40px}
  .hero__titulo{font:var(--texto-display);letter-spacing:var(--tracking-display)}
}
@media (min-width:1024px){
  .layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:28px;align-items:start}
  .filtros{
    position:sticky;top:calc(56px + 16px);align-self:start;
    background:var(--vidro-claro-fundo);backdrop-filter:var(--vidro-claro-blur);
    -webkit-backdrop-filter:var(--vidro-claro-blur);border:1px solid var(--vidro-claro-borda);
    border-radius:var(--raio-md);padding:16px;max-height:calc(100dvh - 96px);display:flex;flex-direction:column;
  }
  .filtros__scroll{overflow:auto;flex:1;margin:-4px;padding:4px}
  .cartao{flex-basis:calc((100% - 42px) / 4)}
  .resultados{top:calc(56px + 8px)}
  .barra-inferior{display:none!important}
}
@media (min-width:1440px){
  .cartao{flex-basis:calc((100% - 56px) / 5)}
}
@media (max-width:1023px){
  .filtros{
    position:fixed;inset:0 auto 0 0;z-index:60;width:min(320px,85%);
    background:var(--ink-050);padding:18px;transform:translateX(-100%);
    transition:transform .2s var(--ease-saida);display:flex;flex-direction:column;
  }
  .filtros.aberto{transform:none}
  .filtros__scroll{overflow:auto;flex:1}
  .filtros__fechar{display:inline-flex!important}
  .filtros__aplicar{display:inline-flex!important}
  .conteudo{padding-bottom:72px}   /* espaço da barra inferior — reservado sempre, sem shift */
  .copiar-link-txt{display:none}
}
@media (max-width:520px){
  .md-grid{grid-template-columns:1fr}
  .md-ficha{grid-template-columns:1fr}
  .resultados__ferramentas{width:100%;margin-left:0}
  .hero__titulo{font:var(--texto-t2);letter-spacing:var(--tracking-t2)}
}

/* ------------------------------------------------------------- impressão */
@media print{
  .cabecalho,.filtros,.resultados__ferramentas,.barra-inferior,.rodape__chapa,
  .sady-ambiente,.sady-grao,.cartao__compra,.salto-conteudo,.boot,.modal-veu,.painel-veu{display:none!important}
  body{background:#fff;color:#000}
  .conteudo{padding:0;max-width:none}
  .hero{box-shadow:none;border:0;clip-path:none;padding:0 0 12px}
  .grelha{display:block}
  .cartao{display:grid;grid-template-columns:70px 1fr auto;gap:8px 14px;page-break-inside:avoid;
    box-shadow:none;border:0;border-bottom:1px solid #ccc;border-radius:0;backdrop-filter:none;padding:8px 0}
  .cartao__poco{aspect-ratio:auto;height:64px}
  .cartao__marca{position:static;background:none;padding:0}
  .cartao__nome{-webkit-line-clamp:unset}
  .rodape{background:none;color:#000;margin-top:16px}
  .impressao-rodape{display:block!important;font:11px var(--font-mono);margin-top:12px;border-top:1px solid #000;padding-top:6px}
}
.impressao-rodape{display:none}