/* ============================================================
   LD STORE - estilos compartilhados (PDP / Carrinho / Checkout)
   Mantem os tokens e o chrome do visual aprovado pelo Claude.
   ============================================================ */
:root{
  --gold:#E5A700;--gold-dk:#B8910A;--gold-lt:#F2C94C;--gold-xlt:#FDF5E0;--gold-bg:rgba(229,167,0,.08);
  --grad-gold:linear-gradient(135deg,#F2C94C 0%,#E5A700 52%,#D4920A 100%); /* CTA primario: brilho dourado->ambar, texto grafite mantem AA (>=4.9:1) */
  --price:#F5C518; /* dourado vivo — SO em fundo escuro (hero) */
  --price-gold:#F2C036; /* preco A VISTA — dourado SOBRE chip escuro (nunca solto no branco) */
  --price-user:#F2C036; /* COR DO PRECO (decisao do dono): dourado EXATO #F2C036, SEM chip. Override consciente (~1.7:1 no branco). Admin sobrescreve. */
  --price-chip:#2F2F2F; /* fundo do chip de preco (grafite) — dourado #F2C036 sobre ele = ~7.9:1 */
  --price-ink:#1A1A1A; /* secundarios (parcelamento/CNPJ/totais) — near-black */
  --grafite:#2F2F2F;--grafite-dk:#1A1A1A;--grafite-lt:#3D3D3D;
  --black:#0D0D0D;--white:#FFFFFF;
  --g1:#F5F5F5;--g2:#E8E8E8;--g3:#C5C5C5;--g4:#909090;--g5:#606060;--g6:#3A3A3A;
  --ft-ink:#A3A3A3;/* texto secundario do footer sobre grafite-dk: ~6.9:1 (AA) */
  --green:#16A34A;--green-bg:#DCFCE7;--red:#DC2626;--blue:#2563EB;
  --font:'Inter',system-ui,sans-serif;--font-alt:'Space Grotesk',sans-serif;
  --r:8px;--r-lg:16px;--r-xl:24px;
  --sh:0 4px 16px rgba(0,0,0,.10);--sh-lg:0 10px 40px rgba(0,0,0,.14);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{scroll-behavior:smooth;background:var(--white);color-scheme:light;scrollbar-gutter:stable}
body{font-family:var(--font);background:var(--white);color:var(--black);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}a{text-decoration:none;color:inherit}ul{list-style:none}button{cursor:pointer;border:none;background:none;font:inherit}
.w{width:100%;max-width:1320px;margin:0 auto;padding:0 24px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:700;font-size:.875rem;padding:0 20px;height:44px;border-radius:var(--r);transition:all .18s;white-space:nowrap}
/* Transições suaves entre páginas (View Transitions, nativo do Chrome) — sem blank/cloak no carregamento */
/* ══ TRANSICAO ENTRE PAGINAS: TROCA, NAO MISTURA ═══════════════════════════════════════════════
   `navigation:auto` FICA — e ele que evita o branco piscando entre uma pagina e outra: o navegador
   segura o quadro antigo ate o novo estar pronto.

   O CROSS-FADE SAIU. O padrao pinta os DOIS quadros sobrepostos durante a animacao, e tudo que difere
   entre eles aparece dobrado: a tarja de avisos (marquee em posicoes diferentes) e o carrossel do
   herói (slides diferentes) viravam texto em cima de texto. O dono fotografou isso em 30/07 na home, e
   reproduzimos: a 110ms da navegacao, "Frete Gratis", "CUPOM CNPJ6" e "Produtos exclusivos" apareciam
   um por cima do outro. Junto vinha `InvalidStateError: Transition was aborted` no console.

   `animation:none` faz a troca ser instantanea: um quadro por vez, sempre. Perde-se 220ms de fade e
   ganha-se uma home que nunca aparece dobrada. Se um dia quisermos animacao aqui, ela tem de ser por
   ELEMENTO (view-transition-name), nunca no root inteiro. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none}
/* A TROCA "BRUTA", RESOLVIDA SEM TOCAR NO ROOT (03/08). O dono disse que a passagem de pagina esta
   "muito bruta". Estava: corte seco.
   A primeira tentativa foi animar o root em sequencia (antigo sai, dai o novo entra) e `loja:testar`
   REPROVOU — a trava proibe qualquer animacao em `::view-transition-old(root)`, e ela existe porque o
   cross-fade pintou "Frete Gratis" em cima de "CUPOM CNPJ6" numa foto que o dono mandou. A trava esta
   certa: mesmo em sequencia, e o root inteiro sendo animado, e basta alguem mexer no delay para o bug
   voltar. Nao afrouxei a trava.
   Aqui a suavidade vem do QUADRO NOVO SOZINHO: a pagina que chega nasce com opacidade 0 e entra em
   220ms. Nunca existem dois quadros ao mesmo tempo (o `navigation:auto` segura o antigo ate o novo
   estar pronto, e o novo e um documento novo, com uma animacao propria). Impossivel dobrar texto.
   SO OPACIDADE, nunca transform: transform no <body> cria bloco de contencao e quebra tudo que e
   `position:fixed` (header colado, tab bar do celular, botao do WhatsApp). */
@keyframes ld-page-in{from{opacity:0}to{opacity:1}}
body{animation:ld-page-in .22s ease-out both}
@media (prefers-reduced-motion: reduce){body{animation:none}}
.btn-gold{background:var(--grad-gold);color:var(--grafite);box-shadow:0 4px 16px rgba(229,167,0,.3)}
.btn-gold:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn-dark{background:var(--grafite);color:var(--white)}
.btn-dark:hover{background:var(--grafite-lt)}
.btn-outline{background:transparent;color:var(--grafite);border:1.5px solid var(--g2)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-dk)}
.btn-wpp{background:#25D366;color:#fff}
.btn-wpp:hover{background:#1ebe59}
/* WhatsApp secundario (PDP): nao compete com o dourado e tem contraste AA (verde escuro sobre branco) */
.btn-wpp-ghost{background:var(--white);color:#0E7A3D;border:1.5px solid #25D366}
.btn-wpp-ghost:hover{background:#EAF9F0;border-color:#1ebe59;color:#0E7A3D}
/* Selos de confianca colados ao CTA de compra (PDP) */
.pdp-cta-trust{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:.76rem;color:var(--g5)}
.pdp-cta-trust span{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.pdp-cta-trust i{color:var(--green)}
.btn-lg{height:52px;padding:0 28px;font-size:.9375rem}
.btn-xl{height:56px;padding:0 32px;font-size:1rem;border-radius:var(--r-lg)}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ══════════════════════════════════════════════════════════════════════════
   CHROME DO HEADER — FONTE UNICA (Lei nº 1 do site-publico-ld.md)
   Este bloco e a UNICA definicao do cabecalho/topbar/nav. Carregado no <head>
   de TODAS as paginas (inclusive storefront.html). NAO duplicar em <style> inline.
   Mantido byte-a-byte com o visual congelado da home.
   ══════════════════════════════════════════════════════════════════════════ */

/* ANNOUNCEMENT (topbar) */
.ann{background:var(--grafite);height:36px;display:flex;align-items:center;overflow:hidden}
.ann-track{display:flex;gap:0;animation:scroll-ann 30s linear infinite;white-space:nowrap;width:max-content}
.ann-item{display:inline-flex;align-items:center;gap:8px;padding:0 32px;font-size:.75rem;font-weight:600;color:#ccc}
.ann-item i,.ann-item svg{color:var(--gold);width:14px;height:14px}
.ann-item strong{color:var(--white)}
@keyframes scroll-ann{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* HEADER — DOURADO LD */
.hdr{background:var(--gold);position:sticky;top:0;z-index:1000;box-shadow:0 2px 12px rgba(255,215,0,.25)}
.hdr-in{display:flex;align-items:center;gap:16px;padding:10px 0}
/* LOGO oficial do cabecalho — fonte canonica unica, identica a home (storefront.html).
   Carregado no <head>, vale ja no primeiro paint do header injetado por headerHTML(). */
.logo{flex-shrink:0;display:flex;align-items:center;gap:10px}
.logo-img{width:auto;max-width:180px;height:48px;background:transparent;border-radius:0;display:flex;align-items:center;justify-content:flex-start;overflow:visible}
.logo-img svg{width:32px;height:32px;fill:var(--gold)}
.logo-img img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left;display:block;transform-origin:left center;transform:translate(-13px, 0px) scale(1.5)}
/* ZOOM no hover da logo (pedido do dono, 03/08). O `transform` da imagem acima e INTOCAVEL: ele carrega
   o enquadramento do header (translate -13px + scale 1.5) e mexer nele desalinha a marca. Entao o zoom
   vai no CONTAINER (`.logo-img`), que compoe com o da imagem em vez de substituir.
   `transform-origin:left center` porque a logo mora na borda esquerda: crescendo do centro ela sairia
   para fora do header. 1.05 e o suficiente para ler como "vivo" sem parecer que pulou. */
.logo-img{transition:transform .22s cubic-bezier(.2,.7,.3,1);transform-origin:left center;will-change:transform}
a:hover > .logo-img,a:focus-visible > .logo-img,.logo:hover .logo-img{transform:scale(1.05)}
@media (prefers-reduced-motion: reduce){.logo-img{transition:none}a:hover > .logo-img,.logo:hover .logo-img{transform:none}}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-name{font-family:var(--font-alt);font-weight:700;font-size:1.4rem;color:#3B3B3B!important;letter-spacing:-.04em}
.logo-name span{color:var(--white)!important;font-weight:500}
.logo-sub{font-size:.55rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(47,47,47,.6);margin-top:1px}
.hdr-search{flex:1;display:flex;position:relative}
.hdr-search input{width:100%;height:42px;background:var(--white);border:2px solid transparent;border-radius:var(--r);padding:0 48px 0 16px;font-family:var(--font);font-size:.875rem;color:var(--black);outline:none;transition:.18s}
.hdr-search input:focus{border-color:var(--grafite)}
.hdr-search input::placeholder{color:var(--g4)}
.hdr-search-btn{position:absolute;right:0;top:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--grafite);border-radius:0 var(--r) var(--r) 0;color:var(--gold);font-size:.9rem;cursor:pointer;transition:background .15s}
.hdr-search-btn:hover{background:var(--black)}
.hdr-acts{display:flex;align-items:center;gap:2px;flex-shrink:0}
.hdr-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:var(--r);cursor:pointer;color:var(--grafite);transition:background .15s;position:relative;background:transparent;border:none}
.hdr-btn:hover{background:rgba(0,0,0,.08)}
.hdr-btn i,.hdr-btn svg{font-size:1.1rem;width:20px;height:20px}
.hdr-btn span{font-size:.55rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--grafite)}
.hdr-btn.hdr-cart span{font-weight:700;color:var(--grafite-dk)}
/* BADGE (carrinho + favoritos): numero PRETO VAZADO em todas as paginas (decisao do Gabriel — ver DECISOES.md).
   Fundo transparente, numero preto (#0D0D0D), borda preta fina 1px. Identico para os dois. Sem pilula/cinza. */
.cart-dot{position:absolute;top:2px;right:6px;min-width:17px;height:17px;padding:0 3px;border-radius:9px;background:transparent;color:#0D0D0D;font-size:.58rem;font-weight:800;display:flex;align-items:center;justify-content:center;border:1px solid #0D0D0D}
.ld-fav-dot{background:transparent;border-color:#0D0D0D;color:#0D0D0D}
/* Badge do CARRINHO: notificacao classica VERMELHA preenchida, numero BRANCO negrito (decisao Gabriel 30/06).
   #DC2626 + branco = 4.84:1 (AA). Favoritos (.ld-fav-dot) permanece preto-vazado. */
#ld-cart-badge{background:#DC2626;color:#fff;border-color:#DC2626}
/* CARRINHO COM ITENS: botao vira amarelo solido (#E5A700) com icone+label grafite — on-brand amarelo+preto.
   O numero do badge continua PRETO-VAZADO (decisao do Gabriel). Toggle .has-items no updateBadge(). */
.hdr-btn.hdr-cart.has-items{background-color:var(--gold)!important}
.hdr-btn.hdr-cart.has-items:hover{background-color:var(--gold-dk)!important}
.hdr-btn.hdr-cart.has-items i{color:#1A1A1A!important}
.hdr-btn.hdr-cart.has-items span{color:#1A1A1A!important}
@keyframes ld-badge-pop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.cart-dot.pop{animation:ld-badge-pop .34s ease}
@media (prefers-reduced-motion:reduce){.cart-dot.pop{animation:none}}
/* NAV */
.nav{background:var(--white);border-bottom:1px solid var(--g2);box-shadow:0 1px 4px rgba(0,0,0,.04);position:relative}
.nav-in{display:flex;align-items:center;justify-content:center;position:relative}
.nav-link{font-size:.8125rem;font-weight:600;color:var(--g5);padding:12px 14px;position:relative;transition:color .15s;white-space:nowrap}
/* ══ TENTATIVA REVERTIDA (03/08) — NAO REFAZER SEM O DONO PEDIR ═══════════════════════════════════
   Eu movi este sublinhado para `bottom:-3px; height:3px`, para ele cair na MESMA faixa da borda-top do
   mega (149→152) em vez de ficar logo acima dela (146,5→149). No papel resolvia o bloco dourado de 5,5px.
   Na tela ficou PIOR e o dono cortou: como o painel tem z-index 70 e pinta em cima, o realce passou a
   desaparecer ATRAS do painel -- "ele fica por tras o efeito, e ficou ruim". Um realce que some por baixo
   de outro elemento parece defeito, nao acabamento.
   Voltou o original: 2,5px em `bottom:0`, acima da borda. Se um dia alguem quiser mexer nisso de novo, o
   caminho NAO e alinhar as faixas; e decidir qual dos dois realces existe com o painel aberto. */
/* ══ UM INDICADOR QUE DESLIZA, no lugar de dois tracos brigando ═══════════════════════════════════
   Historia curta: existiam DOIS realces dourados encostados -- o sublinhado do link (2,5px, 146,5→149) e a
   borda-top do mega (3px, 149→152). Juntos davam um bloco de 5,5px embaixo da palavra; suprimindo um, o
   realce "sumia por tras do painel". O dono reprovou as duas versoes, com razao: o problema nao era o
   alinhamento, era existirem dois.
   Agora e UM elemento so (`.nav-ind`), que escorrega de um item para o outro. Por que isto resolve de vez:
   - `z-index:81` contra os 70 do painel: ele fica SEMPRE na frente. Nunca mais "por tras";
   - ele nao nasce nem morre a cada hover (era o vai-e-vem de 180ms que piscava): ele se MOVE, e mover e o
     que o olho le como intencional;
   - com o mega aberto ele para embaixo da categoria aberta e vira a marca de "esta e a aberta", que era
     justamente o que faltava quando o sublinhado era suprimido;
   - o filete dourado de 3px do painel virou hairline: um dourado forte de cada vez, e o forte agora e o
     indicador. A identidade (dourado LD, 3px) mudou de lugar, nao saiu.
   Curva com leve overshoot (cubic-bezier de 1,x) porque parada seca em 280ms parece travada; o exagero fica
   em 2px, o suficiente para dar peso sem virar salto. */
.nav-link::after{display:none}   /* aposentado pelo .nav-ind; ficou a regra para nao ressuscitar por engano */
.nav-link:hover,.nav-link.on{color:var(--grafite)}
.nav-ind{position:absolute;bottom:0;left:0;width:0;height:3px;border-radius:3px 3px 0 0;
  background:var(--gold);box-shadow:0 -1px 6px rgba(229,167,0,.45);z-index:81;opacity:0;pointer-events:none;
  transition:left .3s cubic-bezier(.22,1.1,.28,1),width .3s cubic-bezier(.22,1.1,.28,1),opacity .15s ease}
.nav-ind.on{opacity:1}
@media (prefers-reduced-motion: reduce){.nav-ind{transition:opacity .1s}}
/* A supressao do sublinhado saiu junto com o sublinhado: nao existe mais o que suprimir. Quem marca a
   categoria aberta agora e o `.nav-ind`, que fica na frente do painel em vez de ser escondido por ele. */
.nav-link.hot{color:var(--gold-dk);font-weight:700}
.nav-right{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:10px;padding:8px 0}
.cnpj-pill{display:flex;align-items:center;gap:7px;background:var(--gold);color:var(--grafite);font-size:.72rem;font-weight:800;letter-spacing:.03em;padding:5px 7px 5px 13px;border-radius:20px;cursor:pointer;transition:background .15s,transform .12s}
.cnpj-pill:hover{background:var(--gold-dk)}
.cnpj-pill:focus-visible{outline:2px solid var(--grafite-dk);outline-offset:2px}
.cnpj-pill:active{transform:translateY(1px)}
.cnpj-pill.copied{background:var(--gold-dk)}
.cnpj-pill .cnpj-code{background:#2F2F2F;color:#F2C036;font-family:var(--font-alt,'Space Grotesk'),sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.06em;padding:2px 9px;border-radius:12px;line-height:1.3}
.cnpj-pill .cnpj-ico{flex-shrink:0;vertical-align:middle;width:17px;height:17px;color:var(--grafite-dk)}

/* ══════════ MEGA MENU (FONTE UNICA — Lei nº 1; painel #ldMega injetado por LDStore.buildMega em TODA pagina) ══════════ */
.mega-inner{max-width:1320px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:220px 1fr;gap:28px}
.mega-cats{display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--g2);padding-right:20px}
.mega-cat-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r);font-size:.8125rem;font-weight:600;color:var(--g5);cursor:pointer;transition:.12s}
.mega-cat-link:hover,.mega-cat-link.active{background:var(--gold-bg);color:var(--gold-dk)}
.mega-cat-link i{width:18px;font-size:.9rem;color:var(--gold-dk)}
.mega-cat-link .cat-svg{width:18px;height:18px;flex:none;color:var(--gold-dk)}
.mega-cat-link .mega-subcat-icon{width:24px;height:24px;flex:0 0 24px;object-fit:contain}
/* ICONES MONOLINE das categorias (2026-07-15): agora <img class="cat-svg cat-art">. Como sao <img> (nao <svg>),
   as regras antigas ".cat-ico svg{}" nao os alcancam -> dimensiona por .cat-art. FONTE UNICA por slug. */
.cat-art{display:block;object-fit:contain;max-width:100%;max-height:100%}
.cat-ico .cat-art{width:42px;height:42px}   /* grade desktop (caixa .cat-ico 52px) */
.mega-cat-link .cat-art{width:22px;height:22px}   /* mega (categoria top) */
.mega-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mega-card{background:var(--white);border:1px solid var(--g2);border-radius:var(--r-lg);padding:14px;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s;text-align:left;display:flex;flex-direction:column;text-decoration:none}
.mega-card:hover{border-color:var(--gold);box-shadow:0 12px 28px -10px rgba(0,0,0,.2);transform:translateY(-3px)}
.mega-card-img{width:100%;height:118px;background:var(--white);border:1px solid var(--g2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:var(--gold-dk);margin-bottom:12px;overflow:hidden}
.mega-card-img img{max-width:86%;max-height:86%;object-fit:contain;mix-blend-mode:multiply}
.mega-card-name{font-size:.78rem;font-weight:700;color:var(--black);line-height:1.35;margin-bottom:9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.1em}
.mega-card-pix{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin-bottom:2px}
.mega-card-price{font-size:1.15rem;font-weight:800;color:var(--price-user);display:inline-block;line-height:1.25}
.mega-card-parcel{font-size:.7rem;color:var(--g4);margin-top:3px}
.mega-card-go{margin-top:11px;padding-top:10px;border-top:1px solid var(--g2);font-size:.72rem;font-weight:800;color:var(--g4);display:flex;align-items:center;gap:6px;transition:color .15s ease,gap .15s ease}
.mega-card:hover .mega-card-go{color:var(--gold-dk);gap:9px}
/* Painel mega compartilhado (full-width sob a barra de nav, acionado no hover de cada categoria) */
/* A borda de cima era 3px DOURADA e brigava com o sublinhado do link (dois realces fortes encostados).
   Virou hairline de 1px em dourado translucido: continua costurando o painel na barra, sem disputar
   atencao com o `.nav-ind`, que agora e o dourado forte da vez. */
.ld-mega{position:absolute;top:100%;left:0;right:0;margin-top:-1px;z-index:70;background:var(--white);border-top:1px solid rgba(229,167,0,.42);box-shadow:0 22px 50px -12px rgba(0,0,0,.24);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s;padding:28px 0 30px}
.ld-mega.open{opacity:1;visibility:visible;transform:none}
.ld-mega .mega-inner{align-items:start;gap:36px}
.ld-mega .mega-cats{gap:0;padding-right:28px}
.mega-col-head{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--g4);margin-bottom:16px;padding-left:2px}
.mega-cats-list{display:flex;flex-direction:column;gap:3px}
.ld-mega .mega-cat-link{font-size:.85rem;padding:11px 16px}
.ld-mega .mega-cat-link span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mega-all{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:10px 16px;font-size:.8rem;font-weight:800;color:var(--gold-dk);text-decoration:none;transition:gap .18s ease,color .18s}
.mega-all:hover{gap:13px;color:var(--gold)}
.mega-prods-wrap{min-width:0}
.ld-mega .mega-prods{gap:18px}

/* MENU MOBILE (drawer) — compartilhado em todas as paginas; markup vem do ld-store.js */
.mob-toggle{display:none;width:42px;height:42px;border:none;border-radius:var(--r);background:rgba(0,0,0,.08);align-items:center;justify-content:center;font-size:1.15rem;color:var(--grafite);cursor:pointer;flex-shrink:0;transition:background .15s}
.mob-toggle:hover{background:rgba(0,0,0,.16)}
.mob-overlay{position:fixed;inset:0;background:rgba(13,13,13,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:2400;opacity:0;pointer-events:none;transition:opacity .28s}
.mob-overlay.open{opacity:1;pointer-events:auto}
.mob-drawer{position:fixed;top:0;left:0;width:86%;max-width:360px;height:100%;height:100dvh;background:var(--white);z-index:2401;display:flex;flex-direction:column;transform:translateX(-105%);transition:transform .32s cubic-bezier(.4,0,.2,1);box-shadow:14px 0 50px rgba(0,0,0,.3)}
.mob-drawer.open{transform:none}
.mob-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:linear-gradient(135deg,var(--gold),#d99e00);flex-shrink:0}
.mob-drawer-head .logo-name{font-family:var(--font-alt);font-weight:700;font-size:1.25rem;color:var(--grafite);letter-spacing:-.04em}
.mob-drawer-head .logo-name span{color:#fff;font-weight:500;margin-left:1px}
.mob-close{width:38px;height:38px;border:none;border-radius:50%;background:rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--grafite);cursor:pointer;transition:background .15s}
.mob-close:hover{background:rgba(0,0,0,.22)}
.mob-drawer-nav{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 0 8px}
.mob-sec-label{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--g4);padding:16px 22px 6px}
.mob-nav-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:13px 22px;font-size:.92rem;font-weight:600;color:var(--grafite);background:none;border:none;cursor:pointer;transition:background .12s,color .12s;font-family:inherit}
.mob-nav-item:hover,.mob-nav-item:active{background:var(--gold-bg);color:var(--gold-dk)}
.mob-nav-item i{width:22px;text-align:center;font-size:1rem;color:var(--gold-dk);flex-shrink:0}
.mob-nav-item span{flex:1}
.mob-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#0D0D0D;color:#fff;font-size:.68rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.mob-drawer-foot{flex-shrink:0;border-top:1px solid var(--g2);padding:14px 18px 18px;display:flex;flex-direction:column;gap:10px;background:var(--g1)}
.mob-cnpj{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:var(--r);background:var(--grafite);color:var(--gold);font-size:.82rem;font-weight:800}
.mob-tel{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:var(--r);border:1.5px solid var(--g2);color:var(--grafite);font-size:.82rem;font-weight:700;transition:border-color .15s,background .15s}
.mob-tel:hover{border-color:var(--gold);background:var(--gold-bg)}
@media(max-width:768px){
  .nav{display:none}
  .mob-toggle{display:flex}
  .hdr-search{display:none}
  .hdr-in{gap:8px}
  .logo-sub{display:none}
  /* acoes no mobile: so icones, e esconde Televendas(1) e Pedidos(4) que ja estao no drawer.
     Mantem Favoritos, Conta e Carrinho. Evita o header estourar a viewport (overflow-x). */
  .hdr-acts{gap:2px}
  .hdr-acts .hdr-btn span{display:none}
  .hdr-acts .hdr-btn{padding:8px 9px}
  .hdr-acts .hdr-btn:nth-child(1),.hdr-acts .hdr-btn:nth-child(4){display:none}
}
/* Celular pequeno: header so com o emblema (o wordmark "LD FERRAMENTAS" largo sai; segue no anuncio/drawer).
   Mata o ultimo resquicio de overflow-x em 390 sem mascarar com body{overflow:hidden}. */
@media(max-width:560px){
  .logo-text{display:none}
  .hdr-in{gap:10px}
}

/* BREADCRUMB */
.crumb{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--g5);padding:18px 0;flex-wrap:wrap}
.crumb a:hover{color:var(--gold-dk)}
.crumb i{font-size:.6rem;color:var(--g3)}
.crumb .cur{color:var(--black);font-weight:600}

/* SELLER BADGE */
.seller{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--g5);padding:7px 12px;background:var(--g1);border-radius:var(--r);border:1px solid var(--g2)}
.seller i{color:var(--green)}
.seller strong{color:var(--black)}
/* Selo "Vendido e Entregue por" — wordmark DOURADO unificado (Lei nº 1): LD + FERRAMENTAS (caps), Space Grotesk 700.
   Hero (fundo escuro): dourado vivo #F2C036 (regra inline do storefront). Fundo claro (PDP/cards): #8A6A00 (AA >= 4.5:1). */
.ld-wm{font-family:var(--font-alt);font-weight:700;letter-spacing:.01em}
.ld-wm span{text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.seller .ld-wm{color:#E5A700}
.pc-seller .ld-wm{color:#1A1A1A}
.seller .ld-wm span{color:#2F2F2F}
.pc-seller .ld-wm span{color:#1A1A1A}
/* Selo "LD" = LETTERMARK (texto vivo, Space Grotesk bold branco no chip escuro) — nitido a ~20px, nunca borra.
   Decisao do board mini-logo (complexidade x tamanho): emblema do ferreiro so nos lugares grandes. */
.seller .ld-t{display:inline-flex;align-items:center;justify-content:center;width:24px;height:20px;background:var(--gold);color:var(--grafite);font-family:var(--font-alt);font-weight:700;font-size:.64rem;letter-spacing:-.02em;line-height:1;border-radius:4px;flex-shrink:0;border:1px solid rgba(0,0,0,.14)}

/* FOOTER */
/* ESPACAMENTO DO RODAPE (a estrutura e a de sempre: quatro colunas).
   O `padding-bottom` era 96px para reservar a zona do FAB do WhatsApp, e isso deixava 96px de faixa
   escura VAZIA depois do copyright em toda largura de tela — inclusive nas largas, onde o FAB nem chega
   perto da coluna de conteudo (medido: 96 de 527px de rodape em 1440x900). A reserva agora e so onde o
   FAB esta, o canto direito da ultima linha, e so na largura em que ele alcanca (regra no fim do bloco).
   O resto e aperto de respiro: a base do grid e a linha do copyright estavam com folga a mais. */
.footer{background:var(--grafite-dk);padding:56px 0 32px;margin-top:64px}
/* A COLUNA DO INSTITUCIONAL GANHOU LARGURA (1.9 -> 2.1fr), tirada da coluna da marca (1.8 -> 1.65fr).
   Sao doze links em duas colunas: com 334px a calha maxima sem quebrar rotulo era 42px (o maior,
   "Preferências de cookies", mede 146px), e com 46px de calha ele quebrava em duas linhas. A coluna da
   marca tinha folga horizontal de sobra — a descricao dela e travada em 280px e a coluna media 317. Agora
   sao 369px para o institucional (calha de 56px, 10px de folga no rotulo maior) e 290 para a marca, que
   continua acima dos 280 da descricao: o texto dela quebra nas mesmas linhas de antes. */
.ft-grid{display:grid;grid-template-columns:1.65fr 2.1fr 1.3fr 1.5fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.07)}
.ft-logo{font-family:var(--font-alt);font-weight:700;font-size:1.5rem;color:var(--white);margin-bottom:12px;letter-spacing:-.04em}
.ft-logo span{color:var(--gold)}
.ft-desc{font-size:.8rem;color:var(--ft-ink);line-height:1.7;max-width:280px;margin-bottom:18px}
.ft-socs{display:flex;gap:8px}
.ft-soc{width:34px;height:34px;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--g4);transition:.15s}
.ft-soc:hover{background:var(--gold);color:var(--grafite);border-color:var(--gold)}
.ft-col-t{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g3);margin-bottom:14px}
.ft-links{display:flex;flex-direction:column;gap:9px}
.ft-link{font-size:.8rem;color:var(--ft-ink)}
.ft-link:hover{color:var(--gold)}
.ft-contact{display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--ft-ink);margin-bottom:10px}
.ft-contact i{color:var(--gold);width:14px}
.ft-bottom{padding:16px 0 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.ft-copy{font-size:.75rem;color:var(--ft-ink)}
.pay-row{display:flex;gap:6px;flex-wrap:wrap}
.pay-b{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--g4);font-size:.6rem;font-weight:700;padding:4px 9px;border-radius:4px}
/* Formas de pagamento — cards de LOGO uniformes (mesma altura/contorno) */
.ft-pay-grid{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.ft-pay-ico{height:30px;min-width:52px;padding:0 9px;background:var(--white);border:1px solid var(--g2);border-radius:5px;display:flex;align-items:center;justify-content:center;line-height:1}
.ft-pay-ico svg{height:16px;width:auto;display:block}
.ft-pay-ico i{line-height:1}
/* MESMA AREA OPTICA PARA TODA MARCA (30x18), em vez de altura fixa com excecao por `alt`.
   Com `height: 18px` os logos LARGOS (Visa, Mastercard, Elo, boleto) ficavam em 28x18 e os QUADRADOS
   (Pix, Mercado Pago, Vindi) em 18x18, 22x22 e 13x13: cinco escalas na mesma fila, o Vindi virando um "V"
   minusculo e o Mercado Pago estourando a altura dos vizinhos. Com `max-*` + `contain`, cada arquivo usa
   a dimensao que tem sobrando e todos terminam ocupando a mesma area — sem regra por marca, que envelhece
   mal (a proxima bandeira entraria errada de novo). */
.ft-pay-img{max-height:18px;max-width:30px;width:auto;height:auto;object-fit:contain;display:block}
/* Selos de seguranca */
.ft-seals{display:flex;flex-direction:column;gap:8px}
.ft-seal{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:8px 12px;font-size:.72rem;color:var(--g4)}
.ft-seal i{color:var(--green);font-size:.95rem;width:16px;text-align:center}
.ft-secure{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--ft-ink)}
.ft-secure i{color:var(--green)}
/* Institucional em DUAS colunas no desktop. Sao 12 itens (9 institucionais + Privacidade + Termos +
   Preferencias de cookies, que a LGPD obriga a deixar acessivel de qualquer pagina): numa coluna so
   viravam 12 linhas empilhadas, mais altas que as outras tres colunas do rodape e desalinhando a
   base. `column-count` preenche de cima para baixo e SO DEPOIS passa para a 2a coluna — a leitura
   continua em ordem, o que `grid` de 2 colunas nao daria (ele intercala item 1 | item 2).
   Mobile fica numa coluna: com a tela estreita, duas colunas de link viram texto quebrado. */
@media(min-width:861px){
  /* RESPIRO do Institucional (so no desktop; no mobile a coluna unica fica como estava). Com 30px de
     calha e 9px entre os itens, as duas colunas de link liam como um bloco unico de texto — o dono viu
     "tudo junto". A calha subiu para 46px, que e mais que o espaco de uma palavra e separa as duas
     leituras, e o intervalo entre itens para 13px, acima da altura da linha (12,8px x 1,5 = 19px): o
     olho pula de item, nao de linha. */
  .ft-links{display:block;column-count:2;column-gap:56px}
  .ft-links .ft-link{display:block;margin-bottom:13px;break-inside:avoid;line-height:1.45}
}
/* A reserva do FAB do WhatsApp: so no CANTO onde ele esta (recuo horizontal na ultima linha), em vez da
   faixa vertical de 96px que valia em toda largura.
   O LIMITE FOI MEDIDO, nao calculado: eu tinha posto 1428px pela conta "a .w tem 1320 com 24 de recuo",
   e a suite reprovou em 1440 — a conta ignorava a BARRA DE ROLAGEM. O `right:24px` do FAB e relativo a
   viewport de LAYOUT (sem a barra, 15px), entao o botao entra 93px da borda, nao 78. Medindo em 11
   larguras de 1024 a 1920, a sobreposicao acaba em ~1442px; 1460 deixa margem para barra mais grossa.
   Errar para o lado do recuo custa 78px de recuo numa tela que nao precisava; errar para o outro poe
   texto embaixo de um botao verde.
   Fora do desktop nao entra: no mobile o ld-mobile.css ja reserva a zona da tab bar, e recuo a direita
   quebraria a linha centralizada. */
/* SAO DOIS BOTOES FLUTUANTES, um em cada canto: o WhatsApp (`.wpp-float`, right:24 + 54px) e o "voltar
   ao topo" (`.back-top` da home, left:24 + 40px). Eu tinha reservado so o lado direito e o retrato
   mostrou o botao da esquerda cobrindo o "© 2" do copyright — a minha trava tambem nao pegou, porque
   media o seletor `.wpp-float` que eu escolhi a dedo em vez de varrer o que esta flutuando ali (hoje ela
   varre). Recuo dos dois lados, so na largura em que os botoes cruzam a coluna de conteudo. */
@media(min-width:861px) and (max-width:1460px){.ft-bottom{padding-right:78px;padding-left:48px}}
@media(max-width:860px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft-grid{grid-template-columns:1fr}.ft-bottom{flex-direction:column;text-align:center}}

/* WPP FLOAT */
.wpp-float{position:fixed;bottom:24px;right:24px;z-index:980;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;font-size:1.4rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 24px rgba(37,211,102,.4);cursor:pointer;transition:transform .18s}
.wpp-float:hover{transform:scale(1.08)}

/* MOCK BANNER */
.mock-bar{background:#211d12;color:#e8d9a6;border-bottom:1px solid #3a3320;font-size:.72rem;text-align:center;padding:6px 12px}
.mock-bar b{color:var(--gold)}

/* TOAST — empilhavel no canto inferior direito, com miniatura + nome + "Ver carrinho", some sozinho */
.ld-toasts{position:fixed;right:18px;bottom:18px;z-index:4000;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none;max-width:min(360px,calc(100vw - 36px))}
.ld-toast{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;width:340px;max-width:100%;background:#fff;border:1px solid var(--g2);border-left:4px solid var(--green);border-radius:10px;padding:12px 14px;box-shadow:var(--sh-lg);transform:translateX(120%);opacity:0;transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .28s ease}
.ld-toast.on{transform:translateX(0);opacity:1}
.ld-toast.out{transform:translateX(120%);opacity:0}
.ld-toast-thumb{width:48px;height:48px;border-radius:8px;object-fit:contain;background:var(--g1);border:1px solid var(--g2);flex-shrink:0}
.ld-toast-ico{width:48px;height:48px;border-radius:8px;background:var(--green-bg);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.ld-toast-body{flex:1;min-width:0}
.ld-toast-t{font-size:.74rem;font-weight:800;color:var(--green);display:flex;align-items:center;gap:5px;margin-bottom:2px;letter-spacing:.01em}
.ld-toast-name{font-size:.82rem;font-weight:600;color:var(--grafite-dk);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ld-toast-act{flex-shrink:0;align-self:center;background:var(--grafite);color:#fff;font-size:.72rem;font-weight:700;font-family:var(--font-alt);letter-spacing:.01em;padding:9px 13px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background .15s}
.ld-toast-act:hover{background:var(--grafite-dk)}
.ld-toast-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--green);opacity:.45;transform-origin:left;animation:ld-toast-bar linear forwards}
.ld-toast:hover .ld-toast-bar{animation-play-state:paused}
@keyframes ld-toast-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.ld-toast-bar{display:none}}
@media(max-width:520px){.ld-toasts{left:12px;right:12px;bottom:12px;align-items:stretch}.ld-toast{width:100%}}

/* ============ MINI-CART DRAWER ============ */
.mc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;opacity:0;pointer-events:none;transition:.25s}
.mc-overlay.on{opacity:1;pointer-events:all}
/* `100dvh` e nao `100vh`, com o `100vh` ficando de reserva para navegador antigo.
   No CELULAR os dois NAO sao a mesma coisa: `100vh` mede a viewport COMO SE a barra de endereco
   estivesse recolhida, entao a gaveta fica mais alta que a tela e o rodape — subtotal, total e o
   botao dourado — cai atras da barra de navegacao do Android. O dono viu no aparelho dele: o
   "Ver carrinho" aparecia cortado e o botao de baixo nao existia na tela.
   A gaveta vizinha (`.mob-drawer`, linha 238) ja fazia certo desde sempre; esta ficou para tras. */
.mc{position:fixed;top:0;right:0;width:100%;max-width:420px;height:100vh;height:100dvh;background:var(--white);z-index:2001;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .3s;box-shadow:-8px 0 40px rgba(0,0,0,.2)}
.mc.on{transform:translateX(0)}
.mc-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:var(--grafite);color:#fff}
.mc-head h3{font-family:var(--font-alt);font-size:1.05rem;display:flex;align-items:center;gap:9px}
.mc-head i.cl{cursor:pointer;color:var(--g3)}
.mc-head i.cl:hover{color:#fff}
.mc-body{flex:1;overflow-y:auto;padding:16px 20px}
.mc-empty{text-align:center;color:var(--g4);padding:50px 20px;font-size:.9rem}
.mc-empty i{font-size:2.5rem;color:var(--g3);margin-bottom:12px;display:block}
.mc-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--g2)}
.mc-thumb{width:64px;height:64px;border-radius:var(--r);background:var(--g1);border:1px solid var(--g2);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;color:var(--gold-dk)}
.mc-thumb img{max-width:88%;max-height:88%;object-fit:contain;mix-blend-mode:multiply}
.mc-info{flex:1;min-width:0}
.mc-name{font-size:.78rem;font-weight:700;line-height:1.3;margin-bottom:4px}
.mc-seller{font-size:.62rem;color:var(--g4);margin-bottom:6px}
.mc-price{font-size:.85rem;font-weight:800;color:var(--grafite-dk)}
.mc-parcel{font-size:.7rem;color:var(--g5);margin-top:2px}
.mc-parcel-foot{font-size:.75rem;color:var(--g5);text-align:right;margin:-6px 0 12px}
.mc-qty{display:inline-flex;align-items:center;border:1px solid var(--g2);border-radius:6px;margin-top:6px}
.mc-qty button{width:26px;height:26px;color:var(--g5);font-weight:800}
.mc-qty button:hover{color:var(--gold-dk)}
.mc-qty span{min-width:26px;text-align:center;font-size:.78rem;font-weight:700}
.mc-rm{margin-left:auto;color:var(--g4);font-size:.75rem;align-self:flex-start}
.mc-rm:hover{color:var(--red)}
/* O rodape respeita a faixa de gesto do aparelho (`safe-area-inset-bottom`). Sem isso, mesmo com a
   altura certa, o botao encosta na barra do Android e no iPhone fica embaixo da barrinha — da para
   ver, mas o toque cai na navegacao do sistema. Em aparelho sem faixa o `env()` vale zero e o padding
   segue os 16px de sempre. */
.mc-foot{border-top:1px solid var(--g2);padding:16px 20px calc(16px + env(safe-area-inset-bottom));background:var(--g1)}
.mc-row{display:flex;justify-content:space-between;font-size:.82rem;color:var(--g5);margin-bottom:7px}
.mc-row.total{font-size:1.05rem;font-weight:800;color:var(--black);margin:10px 0 14px}
.mc-row.total b{color:var(--grafite-dk)}

/* ============ PDP ============ */
.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;padding:8px 0 16px}
.pdp-gallery{position:sticky;top:124px;align-self:start;z-index:1}
.pdp-main-img{background:var(--g1);border:1px solid var(--g2);border-radius:var(--r-xl);aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:zoom-in}
.pdp-main-img img{max-width:86%;max-height:86%;object-fit:contain;mix-blend-mode:multiply}
/* ZOOM desktop: lente (retangulo) sobre a area apontada + painel ampliado AO LADO da galeria (~2.3x) */
.pdp-lens{position:absolute;border:2px solid var(--gold);background:rgba(255,255,255,.28);box-shadow:0 0 0 9999px rgba(13,13,13,.05);border-radius:4px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease;z-index:5}
.pdp-main-img .pdp-lens.on{opacity:1;visibility:visible}
.pdp-zoom-panel{position:absolute;left:calc(100% + 18px);top:0;background-color:#fff;background-repeat:no-repeat;border:1px solid var(--g2);border-radius:var(--r-lg);box-shadow:var(--sh-lg);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease;z-index:30}
.pdp-zoom-panel.on{opacity:1;visibility:visible}
@media (hover:none),(pointer:coarse){.pdp-lens,.pdp-zoom-panel{display:none!important}}
@media(max-width:1180px){.pdp-zoom-panel{display:none!important}}
/* LIGHTBOX (toque/clique) — pinch-zoom nativo no mobile */
.pdp-lightbox{position:fixed;inset:0;z-index:4500;background:rgba(13,13,13,.92);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s;overflow:auto;touch-action:pinch-zoom}
.pdp-lightbox.on{opacity:1;visibility:visible}
.pdp-lightbox img{max-width:94vw;max-height:90vh;object-fit:contain;touch-action:pinch-zoom;-webkit-user-select:none;user-select:none}
.pdp-lightbox .lb-close{position:fixed;top:16px;right:18px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;border:none;font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pdp-lightbox .lb-close:hover{background:rgba(255,255,255,.26)}
.pdp-lightbox .lb-hint{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.82);font-size:.78rem;font-family:var(--font);white-space:nowrap}
.pdp-main-img .ph-ico{font-size:7rem;color:var(--gold)}
/* PRODUTO SEM FOTO na PDP — a versao GRANDE do mesmo estado (ver o bloco "PRODUTO SEM FOTO" adiante).
   Medido em 03/08 num dos 207: a caixa tem 599px de altura e trazia um icone DOURADO de 112px no meio.
   Numa pagina onde a foto e a estrela, isso vira um cartaz de que falta algo, e em dourado parece aviso.
   Mesmo tratamento do card: hachura, icone grafite claro e o rotulo dizendo o que e.
   `cursor:zoom-in` tambem sai: prometia ampliar uma foto que nao existe. */
.pdp-main-img:not(:has(img)){
  background:repeating-linear-gradient(135deg,rgba(47,47,47,.045) 0 8px,transparent 8px 16px),var(--g1);
  cursor:default;
}
.pdp-main-img:not(:has(img)) .ph-ico{font-size:4.25rem;color:#B9BCB8}
.pdp-main-img:not(:has(img))::after{
  content:'FOTO EM BREVE';position:absolute;left:0;right:0;bottom:28px;text-align:center;
  font-family:var(--font);font-size:.6875rem;font-weight:700;letter-spacing:.16em;
  color:#666B68;/* mesmo tom do card: 4,97:1 no #F5F5F5 */
  pointer-events:none;
}
/* SETAS da foto (desktop). Ficam por cima da lente do zoom (z-index 5) e discretas em repouso: a foto e
   a estrela da tela, nao o controle. No toque quem manda sao as miniaturas e o lightbox com pinch-zoom,
   entao elas somem — seta de 40px em tela de celular so cobre o produto. */
.pdp-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--g2);background:rgba(255,255,255,.92);color:var(--grafite);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;font-size:.86rem;padding:0;opacity:.5;transition:opacity .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease}
.pdp-main-img:hover .pdp-nav{opacity:1}
.pdp-nav:hover{background:var(--gold);color:var(--grafite-dk);box-shadow:var(--sh)}
.pdp-nav:focus-visible{opacity:1;outline:2px solid var(--gold);outline-offset:2px}
.pdp-nav-prev{left:12px}
.pdp-nav-next{right:12px}
@media (hover:none),(pointer:coarse){.pdp-nav{display:none!important}}
.pdp-badge{position:absolute;top:16px;left:16px;z-index:4;background:var(--grafite);color:var(--gold);font-size:.66rem;font-weight:800;padding:5px 10px;border-radius:5px;text-transform:uppercase;letter-spacing:.04em}
/* Favorito na foto do PDP = SO mobile (ld-mobile.css mostra). Desktop CONGELADO: fica oculto. */
.pdp-wish{display:none}
.pdp-thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.pdp-thumb{width:72px;height:72px;border-radius:var(--r);background:var(--g1);border:2px solid var(--g2);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}
/* VIDEO do produto: miniatura com selo de play + player ocupando o painel principal (16:9) */
.pdp-thumb.is-video{position:relative}
.pdp-thumb.is-video img{width:100%;height:100%;object-fit:cover}
.pdp-thumb-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.42);color:#fff;font-size:.9rem;transition:.15s}
.pdp-thumb.is-video:hover .pdp-thumb-play{background:rgba(0,0,0,.25)}
.pdp-thumb.is-video.on .pdp-thumb-play{background:rgba(0,0,0,.15)}
/* o painel principal e QUADRADO (aspect-ratio:1) e usa flex: sem flex:0 0 auto o iframe esticava
   na altura e o video saia achatado (1,98 em vez de 1,78). Centralizado, 16/9 respeitado. */
.pdp-video{width:100%;aspect-ratio:16/9;height:auto;max-height:100%;flex:0 0 auto;align-self:center;border:0;border-radius:var(--r);background:#000;display:block}
.pdp-thumb.on{border-color:var(--gold)}
.pdp-thumb img{max-width:84%;max-height:84%;object-fit:contain;mix-blend-mode:multiply}
.pdp-thumb i{color:var(--gold-dk)}
.pdp-cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-dk);margin-bottom:8px}
.pdp-title{font-family:var(--font-alt);font-weight:700;font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.15;letter-spacing:-.02em;margin-bottom:10px}
.pdp-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--g4);margin-bottom:14px;align-items:center}
.pdp-meta .stars{color:#F59E0B;letter-spacing:1px}
.pdp-stock{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:#15803D}
.pdp-stock .dot{width:8px;height:8px;border-radius:50%;background:#15803D;box-shadow:0 0 0 3px var(--green-bg)}
.pdp-stock.low{color:#B45309}.pdp-stock.low .dot{background:#F59E0B;box-shadow:0 0 0 3px #FEF3C7}
.pdp-stock.out{color:var(--red)}.pdp-stock.out .dot{background:var(--red);box-shadow:0 0 0 3px #FEE2E2}
.pdp-prices{background:var(--g1);border:1px solid var(--g2);border-radius:var(--r-lg);padding:18px 20px;margin:16px 0}
.pdp-old{font-size:.82rem;color:#6B6B6B;text-decoration:line-through}
.pdp-pix-label{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#15803D}
.pdp-pix{display:flex;align-items:center;gap:10px;margin:6px 0}
.pdp-pix .val{font-family:var(--font-alt);font-weight:800;font-size:2rem;color:var(--price-user);line-height:1.12;display:inline-block}
/* PRECO (decisao do dono 2026-07-01): por padrao SEM chip escuro. O preco usa --price-user (dourado #F2C036), fundo transparente.
   Chip escuro so quando EXPLICITAMENTE ligado no admin (html.ld-chip-on): fundo grafite + padding da plaquinha. */
html.ld-chip-off .pdp-pix .val,
html.ld-chip-off .pcard-price,
html.ld-chip-off .pc-price,
html.ld-chip-off .mega-card-price{background:transparent!important;padding-left:0!important;padding-right:0!important;color:var(--price-user)!important}
html.ld-chip-on .pdp-pix .val{background:var(--price-chip);padding:4px 12px;border-radius:8px}
html.ld-chip-on .pcard-price{background:var(--price-chip);padding:3px 9px;border-radius:6px}
html.ld-chip-on .pc-price{background:var(--price-chip);padding:3px 10px;border-radius:6px}
html.ld-chip-on .mega-card-price{background:var(--price-chip);padding:2px 9px;border-radius:6px}
.pdp-pix small{font-size:.8rem;font-weight:700;color:#15803D;margin-bottom:5px}
.pdp-parcel{font-size:.82rem;color:var(--g5)}
.pdp-parcel b{color:var(--grafite-dk)}
/* PRECO PARA EMPRESA — estrutura de preco (rotulo, numero, desconto), na linguagem QUE O BLOCO JA TEM.
   Duas versoes ficaram pelo caminho e as duas erravam o mesmo alvo, o peso:
     1. "[predinho] R$ 2.825,75 com CNPJ" em .82rem/700 — uma frase solta, do mesmo peso da linha de
        parcela, quando e o preco que a maior parte dos clientes da LD paga.
     2. etiqueta PRETA "CNPJ" (grafite + dourado, a pastilha do cupom CNPJ6). Consertou o peso e
        exagerou: virou o elemento de MAIOR contraste do quadro inteiro, mais forte que o proprio
        preco em dourado de 27px. Hierarquia invertida — o pedaco menos importante gritando mais alto
        que o numero — e um retangulo preto chapado dentro de um quadro todo em tons claros, que e de
        onde vinha a sensacao de solavanco.
   Agora o rotulo e TIPOGRAFICO, no mesmo desenho do "À VISTA NO PIX OU BOLETO" logo acima (.7rem,
   caixa alta, espacado): mesma familia de rotulo, sem bloco de cor. Nenhuma cor nova entra — o
   cinza do rotulo e o mesmo do "De R$ 3.175,00", o escuro do numero e o mesmo do negrito da parcela,
   o verde e o mesmo do "-5%". Contraste conferido no navegador: 4.9:1 do rotulo sobre o creme.
   O quadrinho creme fica: e ele que diz "este preco e de outra pessoa" sem precisar escrever. */
/* UM DESENHO SO, desktop e celular (decisao do dono). Nao ha mais regra de `.pdp-cnpj` no
   ld-mobile.css: o que muda entre as duas telas e a largura disponivel, e este layout se vira em
   qualquer uma porque nao disputa espaco.
   E O CAIXOTE CREME SAIU. Ele era uma caixa dentro da caixa cinza do preco, com a tarja sendo uma
   TERCEIRA caixa dentro dele — tres recipientes aninhados para mostrar um numero, e no desktop
   sobrava uma ilha estreita num cartao largo. O padding dele ainda comia 22px dos 304 que o celular
   tem, que era de onde vinha a briga de 1px que fazia o BAKO quebrar e o SAGUI nao. Tirar o caixote
   devolveu o espaco: agora sobram 16px de folga no pior preco do catalogo, sem apertar nada.
   No lugar dele, uma linha fina separando — o mesmo cinza das outras divisorias do site. */
.pdp-cnpj{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin-top:13px;padding-top:12px;border-top:1px solid var(--g2)}
/* ROTULO TIPOGRAFICO (modelo 3, escolhido pelo dono nos 13 modelos). Sem tarja, sem fundo: o mesmo
   desenho do "À VISTA NO PIX OU BOLETO" tres linhas acima — caixa alta, espacado, pequeno. O bloco
   ja tinha essa familia de rotulo; usa-la em vez de inventar uma pastilha e o que faz a linha
   parecer parte do cartao. */
.pdp-cnpj-lbl{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#6B6B6B;white-space:nowrap}
/* O predinho (product.html). 14px e nao 16: no celular esta linha tem 301px e o icone entra na
   disputa junto com o rotulo e o preco — cada pixel dele sai da folga que faz a linha nao quebrar
   quando o produto e caro. `currentColor` no stroke deixa ele preso a cor do rotulo. */
.pdp-cnpj-ico{flex:0 0 auto;width:14px;height:14px}
/* NAO EXISTE MAIS TARJA. Ela ja foi preta e ja foi dourada; nas duas o retangulo cheio virava o
   elemento de maior contraste do quadro, mais forte que o proprio preco. O rotulo acima ocupa o
   lugar dela sem pintar caixa nenhuma. */
/* o par valor + desconto e UM item de flex, para nunca quebrarem separados (ver product.html).
   SEM `margin-left:auto` (pedido do dono): o valor fica LOGO DEPOIS do rotulo, nao jogado na ponta
   direita. No desktop o cartao tem 528px e o par rotulo+valor ocupa ~290 — empurrado para a direita,
   sobrava um vao de 240px no meio e os dois pedacos da mesma informacao ficavam em cantos opostos,
   longe demais para o olho ligar um ao outro. Juntos, leem-se como uma coisa so. */
.pdp-cnpj-vals{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.pdp-cnpj-val{font-size:1.06rem;font-weight:800;color:var(--grafite-dk);letter-spacing:-.01em}
.pdp-cnpj-off{font-size:.75rem;font-weight:700;color:#15803D}
/* O AJUSTE DE CELULAR DESTA CAIXA MORA NO ld-mobile.css, e nao aqui. Escrevi `html.ld-mobile` neste
   arquivo primeiro e o desktop herdou: o ld-store.css nao tem media query, entao basta a classe ficar
   grudada (acontece quando a pagina carrega antes de a janela ter largura) para o `margin-right:auto`
   valer em 1280px — abriu um vao de 226px entre o rotulo e o valor. O ld-mobile.css so e baixado
   abaixo de 768px, entao la a regra nao tem como vazar. */
.pdp-qty-row{display:flex;align-items:center;gap:14px;margin:18px 0}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--g2);border-radius:var(--r);height:50px}
.qty button{width:46px;height:100%;font-size:1.1rem;font-weight:800;color:var(--g5)}
.qty button:hover{color:var(--gold-dk)}
.qty input{width:48px;height:100%;text-align:center;border:none;font-weight:800;font-size:1rem;outline:none}
.pdp-ctas{display:flex;flex-direction:column;gap:10px;margin:8px 0 4px}
.pdp-ctas .row2{display:flex;gap:10px}
.pdp-ctas .row2 .btn{flex:1;min-width:0}
@media(max-width:560px){.pdp-ctas .row2{flex-direction:column}}
.pdp-freight{border:1px solid var(--g2);border-radius:var(--r-lg);padding:16px;margin-top:18px}
.pdp-freight h4{font-size:.82rem;font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.pdp-freight h4 i{color:var(--gold-dk)}
.freight-form{display:flex;gap:8px}
.freight-form input{flex:1;min-width:0;height:44px;border:1px solid var(--g2);border-radius:var(--r);padding:0 14px;outline:none;font-size:.9rem}
.freight-form input:focus{border-color:var(--gold)}
.freight-res{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.freight-opt{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--g2);border-radius:var(--r);padding:10px 12px;font-size:.82rem}
.freight-opt b{color:var(--green)}
/* Prazo por regiao dentro da caixa de frete: a regiao e a faixa numa linha, a janela de datas embaixo,
   menor e em cinza. O `b` da faixa herda o verde de `.freight-opt b` e nao pode: verde ali e o preco. */
.freight-opt .ck-eta{margin-top:3px;font-size:.76rem;color:var(--g5);line-height:1.35}
.freight-opt .ck-eta b{color:var(--grafite);font-weight:600}
.freight-opt .ck-eta-janela{margin-top:1px;font-size:.72rem;color:var(--g4)}
.freight-opt.consult{background:var(--gold-xlt);border-color:rgba(229,167,0,.3);color:var(--gold-dk);font-weight:600}
.pdp-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pdp-trust span{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;color:var(--g5);background:var(--g1);border:1px solid var(--g2);padding:8px 12px;border-radius:var(--r)}
.pdp-trust i{color:var(--gold-dk)}

/* PDP tabs / sections */
.pdp-sec{padding:40px 0;border-top:1px solid var(--g2)}
.pdp-sec h2{font-family:var(--font-alt);font-weight:700;font-size:1.4rem;margin-bottom:18px;letter-spacing:-.02em}
/* VIDEO DO PRODUTO. A capa ocupa o mesmo espaco do player, para a pagina nao "pular" quando o cliente
   clica (o CLS que o Google mede). 16:9 fixo. */
.pdp-video{width:100%;max-width:820px;aspect-ratio:16/9;border:0;border-radius:12px;display:block;background:#000}
.pdp-video-capa{position:relative;width:100%;max-width:820px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;cursor:pointer;background:#000}
.pdp-video-capa img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:opacity .18s ease}
.pdp-video-capa:hover img{opacity:1}
.pdp-video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:#fff}
.pdp-video-play i{background:rgba(0,0,0,.62);width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.pdp-video-capa:hover .pdp-video-play i{background:var(--gold);color:var(--black)}
.pdp-video-aviso{position:absolute;left:12px;bottom:10px;font-size:.72rem;color:#fff;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:6px}

/* DESCRICAO DO PRODUTO — o padrao que o dono pediu.
   Antes cada linha virava <p> com line-height 1.8: o texto ficava esparramado e sem hierarquia (foi a
   reclamacao "espacamento muito grande"). Agora titulo em negrito com respiro ACIMA, item de lista
   colado, e paragrafo com espaco menor. A formatacao vem do editor do painel (lista branca de tags). */
.pdp-desc{font-size:.92rem;color:var(--g6);line-height:1.65;max-width:820px}
.pdp-desc p{margin:0 0 10px}
.pdp-desc>*:first-child{margin-top:0}
.pdp-desc h3,.pdp-desc h4{margin:16px 0 6px;font-size:.95rem;font-weight:700;color:var(--black);line-height:1.35}
.pdp-desc ul,.pdp-desc ol{margin:0 0 14px;padding-left:19px}
.pdp-desc li{margin:0 0 3px}
.pdp-desc li::marker{color:var(--gold)}
.pdp-desc b,.pdp-desc strong{font-weight:700;color:var(--black)}
.pdp-desc a{color:var(--black);text-decoration:underline;text-underline-offset:2px}
.pdp-desc br{line-height:1}
.spec-table{width:100%;border-collapse:collapse;max-width:760px}
.spec-table td{padding:11px 14px;font-size:.85rem;border-bottom:1px solid var(--g2)}
.spec-table td:first-child{font-weight:700;color:var(--g5);width:240px;background:var(--g1)}
.kit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;max-width:820px}
.kit-item{display:flex;align-items:center;gap:10px;border:1px solid var(--g2);border-radius:var(--r);padding:12px;font-size:.82rem}
.kit-item i{color:var(--gold-dk)}
/* Produtos do kit: cards compactos clicaveis (cada componente e um produto proprio) */
.pdp-kit-sub{font-size:.85rem;color:var(--g5);margin:-4px 0 14px}
/* SEMPRE uma linha: grid de coluna unica que se adapta ao nº de itens (via style inline no render):
   <=7 itens -> largura fixa por card, alinhado a esquerda; >7 -> compacta p/ caber tudo numa linha.
   Se nao couber (tela estreita), rola na horizontal em vez de quebrar em 2 linhas. */
/* padding vertical folgado + margem negativa: o overflow-x:auto clipa o overflow-y, entao o lift do :hover
   (translateY + sombra) ficaria CORTADO no topo. O padding reserva o espaco do lift; a margem compensa
   para nao empurrar o layout. Assim o hover aparece inteiro e a faixa segue em uma linha com scroll horizontal. */
.kit-cards{display:grid;grid-auto-flow:column;gap:12px;overflow-x:auto;padding:14px 2px 20px;margin:-14px 0 -6px}
.kitc{position:relative;display:flex;flex-direction:column;background:var(--white);border:1.5px solid var(--g2);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;transition:.18s}
a.kitc:hover{border-color:rgba(229,167,0,.55);box-shadow:0 8px 22px rgba(0,0,0,.08);transform:translateY(-3px);z-index:2}
/* card sem produto ativo: agora tambem e clicavel (vai ao estado "indisponivel"). Hover-lift completo como os
   demais (a.kitc:hover); so um leve tratamento pra diferenciar do card de produto ativo. */
.kitc-soft{background:#FCFCFB}
.kitc-img{height:104px;background:var(--g1);display:flex;align-items:center;justify-content:center;overflow:hidden}
.kitc-img img{max-width:88%;max-height:88%;object-fit:contain;mix-blend-mode:multiply}
.kitc-img i{font-size:2.2rem;color:var(--gold)}
.kitc-b{padding:10px 11px;display:flex;flex-direction:column;gap:4px}
.kitc-name{font-size:.8rem;font-weight:700;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kitc-ref{font-size:.72rem;color:var(--g4);font-weight:600}
.kitc-tag{margin-top:2px;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--g4);background:var(--g1);border:1px solid var(--g2);border-radius:5px;padding:2px 6px;align-self:flex-start}
/* Compacto (>7 itens): foto e fontes menores, seguem legiveis, mesma familia visual */
.kit-cards-compact .kitc-img{height:74px}
.kit-cards-compact .kitc-b{padding:7px 8px;gap:3px}
.kit-cards-compact .kitc-name{font-size:.71rem;line-height:1.25}
.kit-cards-compact .kitc-ref{font-size:.65rem}
.kit-cards-compact .kitc-tag{font-size:.55rem;padding:1px 5px}
.compat-list{display:flex;flex-wrap:wrap;gap:8px}
.compat-list span{font-size:.78rem;font-weight:600;background:var(--g1);border:1px solid var(--g2);color:var(--g5);padding:6px 12px;border-radius:20px}
/* Estado "Produto indisponivel" (PDP): limpo, centrado, header/footer unicos, sem preco/comprar */
.pdp-unavail{max-width:560px;margin:40px auto 64px;text-align:center;padding:0 16px}
.pdp-unavail .pu-ico{width:88px;height:88px;margin:0 auto 20px;border-radius:50%;background:var(--g1);border:1.5px solid var(--g2);display:flex;align-items:center;justify-content:center;color:var(--g4);font-size:2.2rem}
.pdp-unavail h1{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:700;color:var(--grafite-dk);margin:0 0 8px}
.pdp-unavail .pu-name{font-size:1.02rem;font-weight:700;color:var(--g6);margin:0 0 4px}
.pdp-unavail .pu-ref{font-size:.82rem;color:var(--g4);font-weight:600;margin:0 0 16px}
.pdp-unavail .pu-msg{font-size:.92rem;color:var(--g5);line-height:1.55;margin:0 auto 26px;max-width:440px}
.pdp-unavail .pu-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.pdp{grid-template-columns:minmax(0,1fr);gap:28px}.pdp-gallery{position:static}.pdp-gallery,.pdp-info{min-width:0}.related-grid{grid-template-columns:repeat(2,1fr)}}

/* reviews */
.rev-summary{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.rev-big{font-family:var(--font-alt);font-weight:700;font-size:3rem;color:var(--gold-dk);line-height:1}
.rev-card{border:1px solid var(--g2);border-radius:var(--r-lg);padding:18px;margin-bottom:12px;max-width:820px}
.rev-card .rh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.rev-card .stars{color:#F59E0B}
.rev-card .who{font-weight:700;font-size:.85rem}
.rev-card .txt{font-size:.86rem;color:var(--g6);line-height:1.6}
.rev-veri{font-size:.62rem;font-weight:700;color:var(--green);background:var(--green-bg);padding:3px 8px;border-radius:20px}
.rev-empty{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--g6);background:var(--g1);border:1px solid var(--g2);border-radius:var(--r-lg);padding:18px 20px;max-width:820px}
.rev-empty i{color:var(--gold-dk)}

/* ============ PRODUCT CARD (reuso em related/cart) ============ */
.pcard{background:var(--white);border:1.5px solid var(--g2);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.pcard:hover{border-color:rgba(229,167,0,.4);box-shadow:0 12px 36px rgba(0,0,0,.1);transform:translateY(-4px)}
.pcard-img{background:var(--g1);height:170px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pcard-img img{max-width:90%;max-height:90%;object-fit:contain;mix-blend-mode:multiply}
.pcard-img i{font-size:3.5rem;color:var(--gold)}
.pcard-b{padding:14px;display:flex;flex-direction:column;flex:1}
.pcard-name{font-size:.82rem;font-weight:700;line-height:1.3;margin-bottom:6px;flex:1}
.pcard-price{font-family:var(--font-alt);font-weight:800;font-size:1.05rem;color:var(--price-user);display:inline-block;align-self:flex-start;line-height:1.2}
.pcard-parcel{font-size:.66rem;color:var(--g4);margin-bottom:10px}

/* PONTO DE ESTOQUE "INDISPONIVEL" — vermelho, igual a pagina do produto.
   O cartao tinha ponto verde (`.stock-ok`) e ambar (`.stock-low`), mas "Indisponível" saia com a classe
   VAZIA: um circulo de 7px sem cor nenhuma, invisivel, enquanto a PDP mostra a bolinha vermelha ao lado
   de "Indisponível no momento". O dono apontou em 03/08. Mesmo vermelho da PDP (--red).
   Mora nesta folha porque as paginas de URL bonita (public/p, public/c) levam o CSS inline congelado
   dentro, mas carregam este arquivo por URL. */
.stock-off{background:var(--red);box-shadow:0 0 0 2px #FEE2E2}

/* ============ PRODUTO SEM FOTO (207 dos 582) ============
   O estado anterior era o icone da categoria em DOURADO e 4,5rem no cinza claro. Dourado e a cor de
   destaque do site (CTA, preco, selo): num card sem foto ele grita mais que o card do lado que TEM foto
   de verdade, e a grade parece defeito em vez de cadastro incompleto. Conferido pelo back em 03/08: os
   207 nao tinham foto nem no scrape da Tray, entao isto NAO e imagem quebrada -- e cadastro a completar,
   e a tela tem de dizer isso com serenidade.
   Agora: hachura discreta (da textura, tira o "vazio de erro"), icone grafite claro menor e o rotulo
   "FOTO EM BREVE" (verdade: o dono publica foto pelo painel).
   POR QUE AQUI, e nao no <style> do storefront: as paginas de URL bonita (public/p, public/c) sao COPIAS
   geradas do HTML e levam o CSS inline congelado dentro; esta folha elas carregam por URL. Regra
   escrita em 03/08: refino de card que precisa valer nas 593 paginas geradas mora nesta folha.
   `.pc .pc-img` (0,2,0 + :not) passa na frente do `.pc-img` inline (0,1,0) sem depender da ordem. */
.pc .pc-img:not(.has-img){
  background:repeating-linear-gradient(135deg,rgba(47,47,47,.045) 0 6px,transparent 6px 12px),var(--g1);
}
.pc .pc-img:not(.has-img) .pc-img-ico{font-size:2.5rem;color:#B9BCB8}
/* sem foto nao ha o que animar: o giro do icone no hover sugeria imagem interativa */
.pc:hover .pc-img:not(.has-img) .pc-img-ico{transform:none}
.pc .pc-img:not(.has-img)::after{
  content:'FOTO EM BREVE';position:absolute;left:0;right:0;bottom:14px;text-align:center;
  font-family:var(--font);font-size:.625rem;font-weight:700;letter-spacing:.14em;
  color:#666B68;/* 4,97:1 no #F5F5F5 e 4,63:1 sobre a hachura -> AA nos dois */
  pointer-events:none;
}
/* CELULAR: a MESMA classe `.pc` e usada (medido em 375px), mas a caixa da foto cai de 200 para 128px e
   o icone de 40px deixava so 5px de folga ate o rotulo — apertado, com cara de sobreposto. Aqui o icone
   diminui e o rotulo sobe um pouco: 18px de folga. Fica nesta folha, junto do resto do estado vazio,
   para o proximo que mexer nao precisar caçar a regra em dois arquivos. */
@media (max-width:768px){
  .pc .pc-img:not(.has-img) .pc-img-ico{font-size:1.75rem}
  .pc .pc-img:not(.has-img)::after{bottom:10px;letter-spacing:.12em}
}
/* mesmo tratamento no card de relacionados/carrinho (`.pcard`), que tinha o mesmo icone dourado */
.pcard .pcard-img:not(:has(img)){
  background:repeating-linear-gradient(135deg,rgba(47,47,47,.045) 0 6px,transparent 6px 12px),var(--g1);
}
.pcard .pcard-img:not(:has(img)) i{font-size:2.1rem;color:#B9BCB8}

/* ============ CART PAGE ============ */
.page-head{padding:8px 0 22px}
.page-head h1{font-family:var(--font-alt);font-weight:700;font-size:2rem;letter-spacing:-.03em}
.page-head h1 span{color:var(--gold-dk)}
.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start;padding-bottom:40px}
.cart-list{display:flex;flex-direction:column;gap:0;min-width:0}
.cart-seller-group{border:1px solid var(--g2);border-radius:var(--r-lg);overflow:hidden;margin-bottom:18px}
.cart-seller-head{background:var(--g1);padding:11px 16px;font-size:.78rem;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--g2)}
.cart-seller-head i{color:var(--green)}
.cart-seller-head strong{color:var(--black)}
.cart-seller-head .ld-t{display:inline-flex;align-items:center;justify-content:center;width:22px;height:18px;background:var(--gold);color:var(--grafite);font-family:var(--font-alt);font-weight:700;font-size:.6rem;letter-spacing:-.02em;line-height:1;border-radius:3px;flex-shrink:0;border:1px solid rgba(0,0,0,.14)}
.cart-row{display:flex;gap:16px;padding:18px 16px;border-bottom:1px solid var(--g2)}
.cart-row:last-child{border-bottom:none}
.cart-thumb{width:90px;height:90px;border-radius:var(--r);background:var(--g1);border:1px solid var(--g2);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;color:var(--gold-dk)}
.cart-thumb img{max-width:88%;max-height:88%;object-fit:contain;mix-blend-mode:multiply}
.cart-mid{flex:1;min-width:0}
.cart-pname{font-size:.9rem;font-weight:700;line-height:1.35;margin-bottom:4px}
.cart-pmeta{font-size:.72rem;color:var(--g5);margin-bottom:10px}
.cart-end{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cart-end .price{font-family:var(--font-alt);font-weight:700;font-size:1.1rem;color:#F2C036}
.cart-parcel{font-size:.72rem;color:var(--g5);margin-top:2px}
.sum-parcel{font-size:.78rem;color:var(--g5);text-align:right;margin:4px 0 2px}
.cart-end .cnpjp{font-size:.68rem;color:#1A1A1A;font-weight:600}
.cart-rm{font-size:.74rem;color:#6B6B6B}
.cart-rm:hover{color:var(--red)}
.summary{border:1px solid var(--g2);border-radius:var(--r-lg);padding:22px;position:sticky;top:120px;min-width:0}
.summary h3{font-family:var(--font-alt);font-size:1.1rem;margin-bottom:16px}
.sum-row{display:flex;justify-content:space-between;font-size:.86rem;color:var(--g5);margin-bottom:10px}
.sum-row b{color:var(--black)}
.sum-row.discount b{color:var(--green)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--g2);padding-top:14px;margin-top:6px;margin-bottom:16px}
.sum-total .lbl{font-weight:700}
.sum-total .val{font-family:var(--font-alt);font-weight:700;font-size:1.6rem;color:#F2C036}
.coupon{display:flex;gap:8px;margin:6px 0 16px}
.coupon input{flex:1;height:42px;border:1px solid var(--g2);border-radius:var(--r);padding:0 12px;outline:none;text-transform:uppercase;font-family:var(--font)}
.coupon input:focus{border-color:var(--gold)}
.coupon-msg{font-size:.74rem;margin:-8px 0 14px}
.coupon-msg.ok{color:var(--green)}
.coupon-msg.err{color:var(--red)}
.empty-state{text-align:center;padding:70px 20px;color:var(--g4)}
.empty-state i{font-size:3.5rem;color:var(--g3);display:block;margin-bottom:16px}
.empty-state h2{font-family:var(--font-alt);color:var(--black);margin-bottom:8px}
@media(max-width:900px){.cart-layout{grid-template-columns:1fr}.summary{position:static}}

/* ============ CHECKOUT ============ */
.ck-steps{display:flex;gap:8px;padding:8px 0 24px;flex-wrap:wrap}
.ck-step{display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:700;color:var(--g4);padding:8px 14px;border-radius:30px;background:var(--g1);border:1px solid var(--g2)}
.ck-step b{width:22px;height:22px;border-radius:50%;background:var(--g3);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem}
.ck-step.on{color:var(--grafite);border-color:var(--gold);background:var(--gold-xlt)}
.ck-step.on b{background:var(--gold);color:var(--grafite)}
.ck-step.done b{background:var(--green)}
.ck-layout{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start;padding-bottom:40px}
.ck-card{border:1px solid var(--g2);border-radius:var(--r-lg);padding:22px;margin-bottom:18px}
.ck-card h3{font-family:var(--font-alt);font-size:1.05rem;margin-bottom:4px;display:flex;align-items:center;gap:9px}
.ck-card h3 b{width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--grafite);display:flex;align-items:center;justify-content:center;font-size:.78rem}
.ck-card .sub{font-size:.76rem;color:var(--g5);margin-bottom:16px}
/* ══ RESUMO DA IDENTIFICACAO (cliente logado com cadastro completo) ═════════════════════════════
   O passo 1 do checkout nascia com quatro campos de formulario abertos mesmo para quem estava logado e
   tinha tudo cadastrado — a tela pedia de novo o que ja sabia. Aqui o dado aparece como TEXTO, e o
   formulario fica a um clique em "Editar".
   Fundo cinza claro, nao dourado: dourado no site significa preco/acao, e este bloco e informacao. */
.ck-ok-tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--font);font-size:.63rem;font-weight:800;
  letter-spacing:.02em;color:#15803D;background:#E8F6EC;border:1px solid rgba(21,128,61,.22);border-radius:20px;padding:2px 8px}
.ck-res{border:1px solid var(--g2);border-radius:var(--r);background:#FAFAF9;padding:14px 16px;margin-top:12px}
.ck-res-top{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.ck-res-quem{display:flex;align-items:center;gap:11px;min-width:0}
.ck-res-av{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--gold);color:var(--grafite);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}
.ck-res-quem b{display:block;font-size:.9rem;line-height:1.2;overflow-wrap:anywhere}
.ck-res-quem span:not(.ck-res-av){display:block;font-size:.74rem;color:var(--g5);margin-top:2px}
.ck-res-edit{background:none;border:1px solid var(--g2);border-radius:var(--r-sm,8px);color:var(--g6);
  font-family:var(--font);font-size:.76rem;font-weight:700;padding:7px 13px;cursor:pointer;transition:.15s}
.ck-res-edit:hover{border-color:var(--gold);color:var(--gold-dk);background:#fff}
/* O MESMO RESUMO SERVE O PASSO 2 (endereço de entrega). Diferenças de proposito:
   - o circulo leva um alfinete em cinza, e nao a inicial em dourado: dourado marca a PESSOA (passo 1) e um
     segundo circulo dourado no mesmo card faria os dois blocos disputarem a leitura;
   - a segunda linha e cidade/UF/CEP, e nao rotulo+valor, porque endereco se le como endereco. */
.ck-res-av-end{background:var(--g1,#F1F0EC);color:var(--g6,#4A4741);font-size:.88rem}
/* "Usar este endereço": o caminho de volta ao resumo depois de editar. Alinhado a direita e discreto — a
   acao principal da tela e "Finalizar pedido", e um botao cheio aqui competiria com ela. */
.ck-res-acao{display:flex;justify-content:flex-end;margin-top:12px}
.ck-res-usar{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--g2);
  border-radius:var(--r-sm,8px);color:var(--g6);font-family:var(--font);font-size:.78rem;font-weight:700;
  padding:9px 15px;cursor:pointer;transition:.15s}
.ck-res-usar:hover{border-color:var(--gold);color:var(--gold-dk);box-shadow:0 1px 3px rgba(26,26,26,.06)}
.ck-res-usar i{font-size:.72rem;color:#15803D}
/* PASSO 2 FECHADO: ENDERECO E FRETE VIRAM UM BLOCO SO.
   Com o resumo na tela eram DUAS caixas com borda, uma embaixo da outra, dentro de um card que ja tem
   borda — caixa dentro de caixa dentro de caixa. Endereco e frete sao a mesma informacao ("para onde,
   quando e quanto"), entao passam a ser um bloco continuo com um fio de 1px no meio: o resumo perde o
   raio de baixo, o frete perde a borda de cima e o raio, e os dois compartilham o mesmo fundo.
   `:has()` limita isto ao passo FECHADO — com o formulario aberto o frete volta a ser a sua propria caixa,
   separada dos campos. */
.ck-card:has(#ck-res-entrega) #ck-res-entrega{border-bottom-left-radius:0;border-bottom-right-radius:0}
.ck-card:has(#ck-res-entrega) #ck-freight{margin-top:0}
.ck-card:has(#ck-res-entrega) #ck-freight .freight-opt{border-top-left-radius:0;border-top-right-radius:0;
  border-top:0;background:#FAFAF9;padding:12px 16px}
.ck-res-li{display:flex;gap:12px;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--g1);margin-top:11px;padding-top:9px}
.ck-res-li span{font-size:.74rem;color:var(--g5)}
.ck-res-li b{font-size:.82rem;font-weight:600;text-align:right;overflow-wrap:anywhere}
.ck-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ck-field{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.ck-field.full{grid-column:1/-1}
.ck-field label{font-size:.74rem;font-weight:700;color:var(--g5)}
.ck-field input,.ck-field select{height:46px;border:1px solid var(--g2);border-radius:var(--r);padding:0 14px;outline:none;font-size:.9rem;background:#fff;font-family:var(--font)}
.ck-field input:focus,.ck-field select:focus{border-color:var(--gold)}
.ck-field input.invalid,.ck-field select.invalid{border-color:var(--red);background:#FEF2F2}
.ck-err{font-size:.72rem;font-weight:600;color:var(--red);min-height:0;display:none}
.ck-err.on{display:block}
.toggle-pf-pj{display:flex;gap:10px;margin-bottom:16px}
.toggle-pf-pj button{flex:1;height:46px;border:1.5px solid var(--g2);border-radius:var(--r);font-weight:700;color:var(--g5)}
.toggle-pf-pj button.on{border-color:var(--gold);background:var(--gold-xlt);color:var(--gold-dk)}
.pay-methods{display:flex;flex-direction:column;gap:10px}
.pay-opt{border:1.5px solid var(--g2);border-radius:var(--r-lg);padding:14px 16px;cursor:pointer;transition:.15s}
.pay-opt.on{border-color:var(--gold);background:var(--gold-xlt)}
.pay-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* HOVER — faltava. O cartao tinha `transition` e nada para transicionar: passar o mouse numa forma de
   pagamento nao dava resposta nenhuma, e numa tela de pagar isso deixa a duvida de "isso aqui clica?".
   Cinza, nao dourado: dourado aqui significa ESCOLHIDO, e adiantar a cor no hover faria a opcao parecer
   selecionada antes do clique. */
.pay-opt:hover:not(.on){border-color:var(--g3);background:#FCFCFB}
/* A MARCA DE ESCOLHIDO, na ponta direita da linha do titulo.
   Antes a selecao era so borda dourada + fundo creme. Funciona, mas so por COMPARACAO: para saber qual
   esta marcada o cliente precisa olhar as quatro e ver qual difere. A bolinha responde por si — e o padrao
   de todo checkout grande. Vem DEPOIS da etiqueta (-5% a vista / ate 10x) para nao empurrar o icone nem o
   nome, que e o que aconteceria se ela entrasse na esquerda: a linha `.det` esta alinhada aos 34px do
   icone e passaria a mentir o alinhamento.
   Desenhada em CSS (::after), e nao com <i> do Font Awesome, porque `.pay-opt .ph i` ja tem cor e largura
   proprias — um icone aninhado herdaria as duas e sairia dourado de 22px dentro de uma bolinha de 20. */
.pay-opt .ph .pay-mark{flex:0 0 20px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--g2);
  background:#fff;position:relative;transition:.15s}
.pay-opt:hover:not(.on) .ph .pay-mark{border-color:var(--g3)}
.pay-opt.on .ph .pay-mark{background:var(--gold);border-color:var(--gold-dk)}
.pay-opt.on .ph .pay-mark::after{content:'';position:absolute;left:5px;top:5px;width:8px;height:4px;
  border-left:2px solid var(--grafite);border-bottom:2px solid var(--grafite);transform:rotate(-45deg)}
/* aviso de mock discreto na tela de sucesso (ponto unico; flag MOCK_NOTICE no checkout.html) */
.ck-mock-note{font-size:.74rem;color:var(--g4);margin-top:6px}
/* garante Inter em TODO campo do site (evita cair em Arial/3a fonte) */
input,select,textarea{font-family:var(--font)}
.pay-opt .ph{display:flex;align-items:center;gap:12px;font-weight:700}
.pay-opt .ph i{color:var(--gold-dk);width:22px;text-align:center;font-size:1.1rem;flex:0 0 22px}
/* O NOME e a unica coluna que estica; o resto tem largura propria. Antes o `margin-left:auto` da
   etiqueta e que empurrava tudo — e isso so funciona ENQUANTO EXISTE etiqueta. Com a coluna elastica
   no nome, meio de pagamento sem etiqueta (o Mercado Pago) mantem a bolinha na ponta direita. */
.pay-opt .ph .pn{flex:1 1 auto;min-width:0}
/* `nowrap`: "-5% a vista" quebrava dentro da propria pastilha e virava um losango de duas linhas,
   mais alto que a linha do titulo. Etiqueta e rotulo curto — ou cabe inteira, ou nao e etiqueta. */
.pay-opt .ph .tag{flex:0 0 auto;white-space:nowrap;font-size:.7rem;font-weight:800;color:var(--green);background:var(--green-bg);padding:3px 8px;border-radius:20px}
.pay-opt .det{font-size:.78rem;color:var(--g5);margin-top:8px;padding-left:34px}
/* MERCADO PAGO — a marca dele aparece SO no icone e na etiqueta, e o resto do cartao segue igual aos
   outros meios. O azul do MP (#009EE3) e reconhecivel e ajuda o cliente a achar a opcao; pintar o cartao
   inteiro de azul brigaria com o dourado da LD e faria o meio de terceiro parecer o dono da tela.
   Selecionado, quem manda e a borda dourada de sempre (`.pay-opt.on`): a tela continua nossa. */
.pay-opt.pay-mp .ph i{color:#009EE3}
/* A etiqueta do MP fica na cor da MARCA, e nao no verde dos outros meios. O verde ali significa dinheiro
   economizado (-5% a vista, ate 10x) — no MP nao ha desconto, entao verde prometeria vantagem que nao
   existe. Azul do MP, um tom mais escuro no texto para o contraste aguentar letra de 0.7rem. */
.pay-opt.pay-mp .ph .tag{color:#0b6d94;background:#e8f6fd;font-weight:700;letter-spacing:.01em}
/* O SELO: circulo amarelo do MP com o aperto de mao em azul-marinho da marca.
   Ocupa a MESMA caixa de 22px dos icones dos outros meios, senao a coluna de nomes desalinha — o circulo
   e desenhado por dentro (20px) para caber sem empurrar a linha. */
/* A CAIXA tem 22px, igual a dos outros meios — e o que mantem a coluna de nomes alinhada.
   O SIMBOLO tem 26px e transborda 2px de cada lado (margem negativa): medido, a marca do MP a 22px vira
   borrao e a 26px lê. Crescer por fora resolve os dois: lê e nao empurra o texto. */
.ld-mp-selo{flex:0 0 22px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
.ld-mp-selo svg{width:26px;height:26px;margin:-2px;display:block}
.ck-success{text-align:center;padding:50px 24px;border:1px solid var(--g2);border-radius:var(--r-xl);max-width:620px;margin:20px auto}
.ck-success .ic{width:84px;height:84px;border-radius:50%;background:var(--green-bg);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:2.4rem;margin:0 auto 18px}
.ck-success h2{font-family:var(--font-alt);font-size:1.7rem;margin-bottom:10px}
.ck-success .num{display:inline-block;background:var(--g1);border:1px dashed var(--g3);border-radius:var(--r);padding:8px 16px;font-weight:800;margin:12px 0}
@media(max-width:900px){.ck-layout{grid-template-columns:1fr}.ck-grid{grid-template-columns:1fr}}

/* ============ PAGINAS INSTITUCIONAIS ============ */
.inst-wrap{padding:8px 0 56px;max-width:920px}
.inst-card{background:var(--white);border:1px solid var(--g2);border-radius:var(--r-lg);padding:34px 38px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.inst-title{font-family:var(--font-alt);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.03em;color:var(--black);margin-bottom:18px;padding-bottom:16px;border-bottom:2px solid var(--gold)}
.inst-body{font-size:.96rem;color:var(--g6);line-height:1.75}
.inst-body p{margin-bottom:14px}
.inst-body strong,.inst-body b{color:var(--black);font-weight:700}
.inst-body h2{font-family:var(--font-alt);font-weight:700;font-size:1.2rem;color:var(--black);margin:22px 0 10px}
.inst-body h3{font-weight:800;font-size:1rem;color:var(--black);margin:18px 0 8px}
.inst-body ul,.inst-body ol{margin:0 0 14px 22px}
.inst-body li{margin-bottom:8px}
.inst-body a{color:var(--gold-dk);font-weight:700;text-decoration:underline}
.inst-body a:hover{color:var(--gold)}
.inst-body table{width:100%;border-collapse:collapse;margin:6px 0 16px;font-size:.9rem}
.inst-body th,.inst-body td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--g2)}
.inst-body thead th{background:var(--g1);color:var(--black);font-weight:800;font-size:.76rem;letter-spacing:.03em;text-transform:uppercase}
.inst-body tbody td{color:var(--g6)}
.inst-body tbody tr:last-child td{border-bottom:none}
.inst-back{margin-top:20px}
.inst-back a{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--gold-dk)}
.inst-back a:hover{color:var(--gold)}
/* Hero da pagina SOBRE (so institucional.html?p=sobre) — foto com fade para o branco, emendando no texto */
.sobre-hero{position:relative;margin:-34px -38px 0;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;aspect-ratio:16/9;background:var(--g1)}
.sobre-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.sobre-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,#fff 100%);pointer-events:none}
@media(max-width:640px){.sobre-hero{margin:-24px -20px 0}}
@media(max-width:640px){.inst-card{padding:24px 20px}}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   POLÍTICA DE PRIVACIDADE — selo de garantia e listas (27/07)

   A informação mais importante da página é "seus dados estão seguros", e ela tem que ser a primeira
   coisa que o cliente vê, não um parágrafo perdido no meio. Daí o selo destacado no topo.

   As listas ganharam respiro e marcador dourado: no print do Gabriel os itens ("Cadastro:",
   "Entrega:"...) apareciam colados e sem marcador visível, parecendo texto quebrado.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.priv-selo{display:flex;flex-direction:column;gap:8px;background:linear-gradient(135deg,#FDF9EC,#FBF4DE);
  border:1px solid #EBD9A4;border-left:4px solid var(--gold);border-radius:14px;
  padding:18px 20px;margin:0 0 22px}
.priv-selo strong{font-family:var(--font-alt);font-size:1.12rem;font-weight:700;color:#0D0D0D;letter-spacing:-.01em}
.priv-selo span{font-size:.9rem;color:#4A4A4A;line-height:1.65}
.priv-selo b{color:#0D0D0D;font-weight:800}

/* marcador dourado e respiro entre os itens (antes ficavam colados, parecendo texto cortado) */
.inst-body ul{list-style:none;margin:0 0 16px;padding:0}
.inst-body ul li{position:relative;padding:0 0 0 20px;margin-bottom:9px;line-height:1.7}
.inst-body ul li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}
.inst-body ol{margin:0 0 16px 22px}
.inst-body ol li{margin-bottom:9px;line-height:1.7}
.inst-body a{color:#8A6508;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.inst-body a:hover{color:var(--gold)}

.priv-rodape{margin-top:22px;padding-top:16px;border-top:1px solid var(--g2);
  font-size:.88rem;color:var(--g5);font-style:normal}