/* Tema claro fixo, nas cores da marca Mapet — vermelho da logo só em detalhes,
     cinza escuro para o resto da interface. Escolha deliberada: sem modo escuro. */
  :root{
    color-scheme: light;
    --ink:#3a3a3d;
    --ink-soft:#8a8a8e;
    --paper:#f7f6f5;
    --surface:#ffffff;
    --surface-alt:#efedec;
    --line:#e2dfde;
    --accent:#4a4a4d;
    --accent-strong:#242426;
    --accent-ink:#ffffff;
    --accent-soft:#eceaea;
    --warm:#c62a2f;
    --warm-soft:#f7e2e2;
    --shadow: 0 10px 26px -14px rgba(60,40,40,.22);
    --radius: 10px;
  }

  *{box-sizing:border-box;}
  /* Barra de rolagem horizontal reportada pelo Valle (06/10/2026): a página inteira ficava mais
     larga que a tela em telas estreitas por causa do .diagram-row (foto do produto + caixinha da
     tampa lado a lado, largura fixa, sem quebrar linha) — nada travava esse overflow na raiz, então
     aparecia rolagem horizontal na página toda. O .diagram-row saiu (tampa virou overlay em cima da
     foto, ver .side-cap), mas isso aqui fica como rede de segurança pra qualquer outro elemento que
     um dia force largura além da tela — overflow vertical continua normal/esperado (página mais alta
     que a viewport), só o horizontal é que não deveria existir. */
  html,body{margin:0;padding:0;overflow-x:hidden;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Barlow Condensed',system-ui,sans-serif;
    font-weight:700;
    text-wrap:balance;
    letter-spacing:.2px;
    margin:0;
  }
  .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}
  a{color:inherit;}
  button{font:inherit;}
  ::selection{background:var(--accent-soft);}


  /* ---------- app shell ---------- */
  .app{
    max-width:1180px;
    margin:0 auto 80px;
    padding:0 24px;
  }
  /* Espaço reservado embaixo da grade no mobile — sem isso a última linha de cards (e o botão
     "Configurar pedido" deles) fica embaixo do pkg-fab/exclusive-bubble fixos no rodapé da
     tela, mesmo com os dois em cantos opostos (a sombra/área de toque de ambos ainda cobre a
     faixa final da página ao rolar até o fim). */
  @media (max-width:640px){
    .app{padding-bottom:96px;}
  }
  .toolbar-wrap{
    background:linear-gradient(135deg,#d63a3f 0%,var(--warm) 55%,#a3181d 100%);
    border-radius:0 0 22px 22px;
    padding:16px 24px 20px;
    position:sticky;
    top:0; /* encostado na borda da tela — a aba do glossário agora fica presa em cima dela */
    z-index:40;
    box-shadow:0 10px 22px -16px rgba(140,20,20,.45);
  }
  .toolbar-inner{
    max-width:1180px;
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .toolbar{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    width:100%;
  }
  .toolbar .brand{border-right:1px solid rgba(255,255,255,.35);}
  .toolbar .brand img{display:block;height:36px;width:auto;}
  @media (min-width:701px){
    .toolbar .brand img{height:46px;}
  }
  .toolbar .searchwrap input{
    border:none;
    border-radius:999px;
    background:#fff;
    padding:12px 16px 12px 40px;
    box-shadow:0 6px 16px -8px rgba(0,0,0,.3);
  }
  .toolbar .searchwrap svg{color:var(--ink-soft);}
  .toolbar .btn{
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.4);
    color:#fff;
    border-radius:999px;
  }
  .toolbar .btn:hover{background:rgba(255,255,255,.28);border-color:#fff;}
  .cat-strip-wrap{
    background:var(--paper);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:var(--toolbar-h, 76px);
    z-index:39;
    display:flex;align-items:stretch;
    max-width:1180px;margin:0 auto;
  }
  .cat-strip{
    flex:1 1 auto;min-width:0;
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding:10px 24px;
    scrollbar-width:none;
    /* rolagem horizontal "limpa" (pedido 03/10/2026): snap suave por chip em vez de parar
       no meio de um botão, sem barra de rolagem visível (scrollbar-width acima + regra
       webkit abaixo), com inércia nativa no touch (-webkit-overflow-scrolling). */
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .cat-strip::-webkit-scrollbar{display:none;}
  .cat-strip button{
    flex:none;
    scroll-snap-align:start;
    background:var(--surface);
    color:var(--ink-soft);
    border:1px solid var(--line);
    border-radius:999px;
    padding:6px 14px;
    font-weight:500;
    font-size:.78rem;
    font-family:'IBM Plex Sans',sans-serif;
    cursor:pointer;
    white-space:nowrap;
  }
  .cat-strip button.active{background:var(--warm-soft);color:var(--warm);border-color:var(--warm-soft);font-weight:600;}
  /* chip "Tipos" (abre o mesmo dock do glossário) — só existe visualmente no mobile; no
     desktop o gatilho original (.gloss-tab) continua no header, então o chip fica oculto
     pra não duplicar a ação dos dois lugares ao mesmo tempo. */
  .gloss-chip{
    display:none;
    flex:none;align-items:center;gap:5px;
    background:var(--surface);color:var(--accent-strong);
    border:1px dashed var(--line);border-radius:999px;
    padding:6px 12px 6px 10px;margin:10px 0 10px 16px;
    font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap;
  }
  .gloss-chip:hover{border-color:var(--accent);}
  @media (max-width:640px){
    .gloss-chip{display:inline-flex;}
    .cat-strip{padding-left:8px;}
  }
  .brand{
    display:flex;
    align-items:baseline;
    gap:6px;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:1.25rem;
    padding-right:8px;
    border-right:1px solid var(--line);
    margin-right:4px;
    white-space:nowrap;
  }
  .brand-home{
    background:none;border-top:none;border-left:none;border-bottom:none;
    padding-left:0;padding-top:0;padding-bottom:0;
    cursor:pointer;opacity:1;transition:opacity .15s ease;
  }
  .brand-home:hover{opacity:.82;}
  .brand-home:focus-visible{outline:2px solid #fff;outline-offset:2px;}
  .brand .ma{
    color:var(--accent-ink);
    background:var(--warm);
    border-radius:6px;
    padding:1px 6px 2px;
  }
  .brand .pet{color:var(--accent-strong);}
  .searchwrap{
    position:relative;
    flex:1 1 260px;
    min-width:180px;
  }
  .searchwrap input{
    width:100%;
    padding:10px 14px 10px 36px;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--surface-alt);
    color:var(--ink);
    font-size:.92rem;
  }
  .searchwrap input:focus{outline:2px solid var(--accent);outline-offset:1px;}
  .searchwrap svg{
    position:absolute;left:11px;top:50%;transform:translateY(-50%);
    width:16px;height:16px;color:var(--ink-soft);
  }
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    border:1px solid var(--line);
    background:var(--surface-alt);
    color:var(--ink);
    padding:9px 14px;
    border-radius:8px;
    cursor:pointer;
    font-size:.86rem;
    font-weight:500;
    white-space:nowrap;
  }
  .btn:hover{border-color:var(--accent);}
  .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .btn.primary{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--accent-ink);
    font-weight:600;
  }
  .btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);}
  .cartbtn{position:relative;}
  /* ícone + rótulo nos botões utilitários do header (Filtros/Orçamento) — no desktop os dois
     aparecem, no mobile (ver @media 640px abaixo) só o ícone + badge ficam, pra caber tudo
     numa linha só com a busca. */
  .icon-btn{gap:7px;}
  .btn-icon{flex:none;display:block;}
  .badge{
    position:absolute;
    top:-7px;right:-7px;
    background:var(--warm);
    color:#fff;
    font-size:.68rem;
    font-weight:700;
    min-width:18px;height:18px;
    border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    padding:0 4px;
    font-family:'IBM Plex Mono',monospace;
  }

  .layout{
    display:grid;
    grid-template-columns:250px 1fr;
    gap:20px;
    margin-top:28px;
    align-items:start;
  }
  .layout[hidden],
  .product-page[hidden]{display:none;}
  .layout main{min-width:0;}
  @media (max-width:820px){
    .layout{grid-template-columns:1fr;}
    .filters{display:none;}
    .filters.open{display:block;}
  }
  /* Header mobile em LINHA ÚNICA (refino de UX 03/10/2026, pedido do Valle: a versão anterior
     (logo em linha própria + busca em linha própria + 3 botões embaixo) ocupava >40% da altura
     da tela antes de mostrar um produto sequer. Agora: logo compacta + busca + 2 ícones
     (Filtros com badge, Orçamento com badge) tudo numa linha só. "Entenda os tipos" sai daqui
     e vira um chip fixo no início da barra de categorias (.gloss-chip, ver cat-strip-wrap
     abaixo) — continua o mesmo painel/estado, só muda de onde o gatilho mora. */
  @media (max-width:640px){
    .toolbar-wrap{padding:10px 12px;border-radius:0 0 16px 16px;}
    .toolbar{gap:8px;flex-wrap:nowrap;}
    .toolbar .brand{
      border-right:none;margin-right:0;padding-right:0;
      width:auto;justify-content:flex-start;flex:none;
    }
    .toolbar .brand img{height:32px;}
    .toolbar .searchwrap{flex:1 1 auto;min-width:0;}
    .toolbar .searchwrap input{padding:9px 12px 9px 34px;font-size:.84rem;}
    /* o painel do glossário continua no DOM (precisa do mesmo ancestral posicionado pra abrir
       corretamente), só o botão-gatilho de dentro do header some — o chip na cat-strip assume. */
    .toolbar .gloss-dock .gloss-tab{display:none;}
    .toolbar .gloss-dock{width:0;}
    .toolbar > .btn{flex:none;padding:9px 10px;}
    .toolbar > .btn .btn-label{display:none;}
    .toolbar > .btn .badge{top:-5px;right:-5px;}
  }

  /* ---------- filters ---------- */
  .filters{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px;
    position:sticky;
    top:70px;
  }
  .filters h3{
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.09em;
    color:var(--ink-soft);
    font-family:'IBM Plex Mono',monospace;
    font-weight:500;
    margin:16px 0 8px;
  }
  .filters h3:first-child{margin-top:0;}
  .cat-tree{list-style:none;margin:0;padding:0;font-size:.88rem;}
  .cat-tree > li{margin-bottom:2px;}
  .cat-btn{
    display:flex;justify-content:space-between;align-items:center;
    width:100%;
    background:none;border:none;text-align:left;
    padding:7px 8px;
    border-radius:6px;
    color:var(--ink);
    cursor:pointer;
    font-weight:500;
  }
  .cat-btn:hover{background:var(--surface-alt);}
  .cat-btn.active{background:var(--accent-soft);color:var(--accent-strong);}
  .cat-btn .n{color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;font-size:.74rem;}
  .sub-list{list-style:none;margin:2px 0 6px;padding-left:14px;}
  .sub-btn{
    display:flex;justify-content:space-between;
    width:100%;background:none;border:none;text-align:left;
    padding:5px 8px;border-radius:6px;color:var(--ink-soft);
    cursor:pointer;font-size:.83rem;
  }
  .sub-btn:hover{background:var(--surface-alt);color:var(--ink);}
  .sub-btn.active{color:var(--accent-strong);font-weight:600;}

  .facet{margin-bottom:4px;}
  .chiprow{display:flex;flex-wrap:wrap;gap:6px;}
  .chip{
    border:1px solid var(--line);
    background:var(--surface-alt);
    color:var(--ink);
    font-size:.78rem;
    padding:5px 10px;
    border-radius:999px;
    cursor:pointer;
  }
  .chip:hover{border-color:var(--accent);}
  .chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
  .swatch{
    width:20px;height:20px;border-radius:999px;
    border:1px solid var(--line);
    cursor:pointer;
    display:inline-block;
    position:relative;
  }
  .swatch.active::after{
    content:"";position:absolute;inset:-4px;
    border:2px solid var(--accent);border-radius:999px;
  }
  .range-out{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--ink-soft);margin-top:6px;}
  input[type=range]{width:100%;accent-color:var(--accent);}
  .clearall{
    margin-top:14px;width:100%;
    background:none;border:1px dashed var(--line);
    color:var(--ink-soft);border-radius:8px;
    padding:8px;font-size:.8rem;cursor:pointer;
  }
  .clearall:hover{color:var(--accent-strong);border-color:var(--accent-strong);}

  /* ---------- results ---------- */
  .results-head{
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:10px;
    margin-bottom:14px;
    font-size:.85rem;color:var(--ink-soft);
  }
  .activechips{display:flex;flex-wrap:wrap;gap:6px;flex:1;}
  .activechip{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--accent-soft);color:var(--accent-strong);
    border-radius:999px;padding:4px 6px 4px 10px;font-size:.76rem;
  }
  .activechip button{background:none;border:none;color:inherit;cursor:pointer;font-size:.9rem;line-height:1;padding:2px;}

  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:14px;
  }
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:18px;
    padding:14px;
    display:flex;flex-direction:column;
    min-width:0;
    transition:border-color .15s, transform .15s ease, box-shadow .15s ease;
  }
  .card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow);}
  .card .card-link{display:block;color:inherit;text-decoration:none;}
  .card .thumb{
    aspect-ratio:1/1;
    display:flex;align-items:center;justify-content:center;
    background:var(--surface-alt);
    border-radius:14px;
    margin-bottom:12px;
    color:var(--ink-soft);
    overflow:hidden;
  }
  .card .thumb svg{max-height:70%;width:auto;}
  .card .thumb img{max-height:88%;max-width:88%;width:auto;height:auto;object-fit:contain;}
  .card .code{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--ink-soft);}
  .stockrow{
    display:flex;align-items:center;gap:6px;margin-top:5px;
    font-size:.72rem;color:var(--ink-soft);
  }
  .stockdot{width:7px;height:7px;border-radius:999px;background:#5a8f63;flex:none;}
  .stockdot.off{background:var(--warm);}
  .card .name{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;font-size:1.12rem;
    margin-top:2px;
  }
  .spectags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
  .spectag{
    font-family:'IBM Plex Mono',monospace;
    font-size:.68rem;
    background:var(--surface-alt);
    border:1px solid var(--line);
    border-radius:999px;
    padding:2px 8px;
    color:var(--ink-soft);
  }
  .cardfoot{
    margin-top:auto;padding-top:12px;
    display:flex;gap:8px;
  }
  .cardfoot .btn{flex:1;justify-content:center;padding:8px 10px;font-size:.8rem;border-radius:999px;}
  .empty{
    text-align:center;padding:60px 20px;color:var(--ink-soft);
  }
  @media (max-width:600px){
    .grid{grid-template-columns:repeat(2,1fr);gap:10px;}
    .card{padding:10px;border-radius:14px;}
    .card .thumb{border-radius:10px;margin-bottom:8px;}
    .card .name{font-size:.98rem;}
    .card .code{font-size:.64rem;}
    .spectags{gap:4px;margin-top:6px;}
    .spectag{font-size:.62rem;padding:2px 6px;}
    .cardfoot{gap:6px;padding-top:8px;}
    .cardfoot .btn{padding:7px 6px;font-size:.72rem;gap:4px;min-width:0;white-space:normal;text-align:center;line-height:1.15;}
    .stockrow{font-size:.66rem;}
  }

  /* ---------- modal detail ---------- */
  .veil{
    position:fixed;inset:0;background:rgba(10,16,19,.55);
    display:none;align-items:flex-start;justify-content:center;
    padding:5vh 16px;overflow-y:auto;z-index:100;
  }
  .veil.show{display:flex;}

  /* ---------- product page (ficha própria dentro do app, com URL e botão voltar de verdade,
     ver openModal/closeModal, não é mais uma caixa flutuante por cima do catálogo) ---------- */
  .product-page{padding:22px 0 60px;}
  .product-page-inner{
    max-width:1020px;margin:0 auto;
    background:var(--surface);
    border-radius:14px;
    box-shadow:var(--shadow);
    border:1px solid var(--line);
  }
  .pdp-topbar{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:16px 26px 0;
  }
  .pdp-back{
    display:inline-flex;align-items:center;gap:6px;
    background:none;border:none;color:var(--ink-soft);cursor:pointer;
    font-size:.86rem;font-weight:500;padding:4px 0;
  }
  .pdp-back:hover{color:var(--accent-strong);}
  .pdp-share{
    background:var(--surface-alt);border:1px solid var(--line);color:var(--ink-soft);
    border-radius:999px;width:34px;height:34px;cursor:pointer;flex:none;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .pdp-share:hover{border-color:var(--accent);color:var(--ink);}
  .pdp-share.copied{color:#3a7d44;border-color:#3a7d44;}
  /* título + código do produto: fica no topo da coluna direita (specs), alinhado com o topo da
     foto, em vez de numa faixa própria de largura total que só empurrava tudo pra baixo e deixava
     um vazio grande acima da imagem. */
  .pdp-title-block{margin-bottom:18px;}
  .pdp-title-block .code{font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--accent-strong);}
  .pdp-title-block h2{font-size:1.5rem;margin-top:2px;}
  /* Coluna da foto reduzida (22/09/2026, combinado com o Valle): a imagem estava dominando a
     página inteira (proporção maior que as specs + altura mínima de 460px), empurrando tudo pra
     baixo mesmo em produtos com pouca personalização. Agora a coluna de specs é a maior, e a foto
     vira referência visual rápida, não o elemento principal da tela. */
  .product-page-inner .modal-body{
    grid-template-columns:1fr 1.35fr;gap:28px;padding:18px 26px 26px;
    /* align-items:start (22/09/2026): por padrão o grid ESTICA as colunas pra terem a mesma altura —
       como a coluna de specs ficou mais alta (cartões de personalização), a caixa da foto virava um
       retângulo cinza gigante com o produto pequeno flutuando no meio. Agora cada coluna só ocupa a
       altura do próprio conteúdo, e a foto fica "grudada" no topo ao rolar a página (sticky), sempre
       visível enquanto se mexe nas opções ao lado. */
    align-items:start;
  }
  .product-page-inner .diagram-col{
    position:sticky;top:16px;
  }
  @media (max-width:700px){
    .product-page-inner .diagram-col{position:static;}
  }
  @media (max-width:700px){
    .product-page-inner .modal-body{grid-template-columns:1fr;gap:0;}
  }
  .product-page-inner .diagram{
    min-height:320px;
    background:radial-gradient(circle at 50% 52%, #ffffff 0%, var(--surface-alt) 88%);
  }
  @media (max-width:700px){
    .product-page-inner .diagram{min-height:240px;}
  }
  @media (max-width:520px){
    .pdp-topbar{padding:14px 16px 0;}
    .product-page-inner .modal-body{padding:14px 16px 20px;}
  }

  .modal{
    background:var(--surface);
    border-radius:14px;
    max-width:760px;width:100%;
    box-shadow:var(--shadow);
    border:1px solid var(--line);
  }
  .modal-head{
    display:flex;justify-content:space-between;align-items:flex-start;
    padding:20px 22px 0;
  }
  .modal-head .code{font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--accent-strong);}
  .modal-head h2{font-size:1.7rem;margin-top:2px;}
  .modal-close{
    background:var(--surface-alt);border:1px solid var(--line);
    width:30px;height:30px;border-radius:999px;cursor:pointer;
    color:var(--ink-soft);font-size:1rem;flex:none;
  }
  .modal-body{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    padding:18px 22px 22px;
  }
  @media (max-width:600px){.modal-body{grid-template-columns:1fr;}}
  .diagram{
    background:var(--surface-alt);
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    min-height:260px;
    min-width:0;
    overflow:hidden;
  }
  .diagram svg{max-height:230px;}
  .diagram img{max-height:280px;max-width:100%;width:auto;height:auto;object-fit:contain;}
  .product-page-inner .diagram svg{max-height:270px;}
  .product-page-inner .diagram img{max-height:300px;filter:drop-shadow(0 14px 20px rgba(0,0,0,.1));}
  .diagram-stage{
    position:relative;width:min(100%,260px);aspect-ratio:1/1;
    display:flex;align-items:center;justify-content:center;
    flex:0 1 auto;min-width:0;
  }
  .product-page-inner .diagram-stage{width:min(100%,290px);}
  /* Tampa avulsa (06/10/2026, pedido do Valle): decisão registrada é a tampa aparecer EM CIMA do
     produto, proporcional ao tamanho dele — não do lado numa caixinha própria (jeito antigo, tirado
     daqui). Agora é só mais uma zona posicionada como friso/metalização/serigrafia (ver
     TAMPA_CAP_ZONES + data-zt/zl/zw/zh em tampaPreviewHtml()/positionOverlays()): positionOverlays()
     aplica left/top/width/height em px por cima do .side-cap (que virou um overlay absoluto), então
     o tamanho dele já escala junto com o tamanho da foto do produto na tela — isso é o "proporcional".
     Calibração das zonas por categoria é a olho (mesmo método já usado nas outras zonas), pode
     precisar de ajuste fino depois de ver ao vivo. */
  .side-cap{
    position:absolute;width:30%;aspect-ratio:1/1;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;z-index:3;
  }
  .side-cap img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));}
  .side-cap img.cap-base{position:relative;z-index:1;}
  /* metalização na tampa avulsa: em vez de simular a fita em CSS por cima da foto (nunca fica
     nítida numa peça fotografada em perspectiva 3D), troca pra foto real da tampa já com o friso
     metalizado aplicado, com crossfade suave entre as duas fotos — ver tampaPreviewHtml(). */
  .side-cap img.cap-metal{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;
    opacity:0;transition:opacity .25s ease;}
  .side-cap img.cap-metal.show{opacity:1;}
  .ov-friso{
    position:absolute;
    border-radius:3px;background:var(--warm);
    box-shadow:0 1px 2px rgba(0,0,0,.15) inset, 0 1px 0 rgba(255,255,255,.25) inset;
    opacity:0;transition:opacity .2s ease;pointer-events:none;
  }
  .ov-friso.show{opacity:.92;}
  .ov-metal{
    position:absolute;pointer-events:none;border-radius:8px;
    opacity:0;transition:opacity .25s ease;
    background:
      linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.85) 47%, rgba(255,255,255,0) 64%),
      linear-gradient(180deg, #cfd3d6, #9aa0a6 45%, #cfd3d6 55%, #7d838a 80%, #cfd3d6);
    background-size:220% 220%, 100% 100%;
    background-position:0% 0%, 0 0;
    mix-blend-mode:multiply;
  }
  .ov-metal.show{opacity:.85;animation:metalShine 2.8s ease-in-out infinite;}
  @keyframes metalShine{
    0%{background-position:-40% -40%, 0 0;}
    50%{background-position:140% 140%, 0 0;}
    100%{background-position:-40% -40%, 0 0;}
  }
  .ov-seri{
    position:absolute;transform:scale(.85);border-radius:50%;
    pointer-events:none;background:none;
    border:1.5px dashed var(--ink-soft);
    display:flex;align-items:center;justify-content:center;
    font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.76rem;
    color:var(--ink-soft);text-align:center;line-height:1.15;letter-spacing:.02em;
    opacity:0;transition:opacity .2s ease, transform .2s ease;
  }
  .ov-seri.show{opacity:1;transform:scale(1);}
  @media (prefers-reduced-motion: reduce){
    .ov-metal.show{animation:none;}
  }
  .spectable{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:4px;}
  .spectable td{padding:7px 4px;border-bottom:1px solid var(--line);}
  .spectable td:first-child{color:var(--ink-soft);width:40%;}
  .spectable td:last-child{font-family:'IBM Plex Mono',monospace;text-align:right;}
  .modal-specs{padding-left:20px;}
  @media (max-width:600px){.modal-specs{padding-left:0;padding-top:16px;}}
  .modal-cta{margin-top:16px;display:flex;gap:8px;}
  /* No mobile o botão de adicionar ficava lá embaixo, depois de rolar foto + specs +
     personalização inteira — vira sticky no rodapé da tela pra ficar sempre alcançável
     (22/09/2026, combinado com o Valle: "deixar navegável e amigável pro mobile"). */
  @media (max-width:700px){
    .modal-cta{
      position:sticky;bottom:0;padding:10px 0 calc(10px + env(safe-area-inset-bottom));
      background:var(--surface);border-top:1px solid var(--line);z-index:5;
    }
  }
  .modal-cta .btn{flex:1;justify-content:center;}

  /* ---------- kit builder (corpo + tampa) ---------- */
  .kit-diagram{display:flex;flex-direction:column;align-items:center;}
  .kit-diagram .kit-cap svg{display:block;margin-bottom:-16px;position:relative;z-index:2;}
  .kit-diagram .kit-body svg{display:block;position:relative;z-index:1;}
  .kit-carousel, .tampa-carousel{
    display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin:8px 0 12px;
    scroll-snap-type:x proximity;
  }
  .kit-cap-card{
    flex:none;scroll-snap-align:start;
    display:flex;flex-direction:column;align-items:center;gap:4px;
    width:78px;padding:8px 6px;border-radius:10px;
    border:1px solid var(--line);background:var(--surface-alt);cursor:pointer;
    font-size:.66rem;color:var(--ink-soft);text-align:center;line-height:1.2;
  }
  .kit-cap-card svg{width:34px;height:34px;}
  .kit-cap-card img{width:34px;height:34px;object-fit:contain;}
  .kit-cap-card.active{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);}
  .kit-swatchrow{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap;}
  .kit-swatch-label{font-size:.78rem;color:var(--ink-soft);min-width:100px;}
  .kit-swatches{display:flex;gap:6px;flex-wrap:wrap;}
  .kit-label{font-size:.8rem;color:var(--ink);margin-top:6px;}
  .kit-label b{font-family:'IBM Plex Mono',monospace;font-weight:600;}

  /* ---------- tampa avulsa (opcional) ---------- */
  .tampa-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
  .tampa-toggle{padding:0;}
  .tampa-toggle span{font-weight:600;font-size:.9rem;}
  .tampa-body{margin-top:10px;padding:12px;background:var(--surface-alt);border-radius:10px;}
  .tampa-carousel{margin-bottom:10px;}
  .tampa-generic-note{padding-left:0;color:var(--ink-soft);margin-bottom:10px;}
  .tampa-qty{margin-top:0;padding-top:10px;border-top:1px dashed var(--line);}
  /* número em destaque (23/09/2026, pedido do Valle): a quantidade de tampas usa a cor "quente"
     do tema de personalização (mesma de .custom-hint/.side-btn.active) e fica um pouco maior,
     pra chamar mais atenção que é um campo de produção (mínimo/múltiplo) quando friso/metalização
     estão marcados — não só mais um campo genérico. */
  .tampa-qty input[type="number"]{
    width:76px;font-size:1.05rem;font-weight:700;
    color:var(--warm);border-color:var(--warm);
  }
  .tampa-qty label{font-weight:600;}

  /* ---------- cor (primeiro bloco, escolha de cor do produto) ---------- */
  .color-block{margin-bottom:16px;}
  .color-block .color-select{justify-content:flex-start;}
  .color-block .color-select-name{text-align:left;}

  /* ---------- características (depois da personalização, é referência fixa) ---------- */
  .specs-block{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}

  /* ---------- personalizations ---------- */
  .custom-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
  .custom-title{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;}
  .modal-foot-note{margin-top:14px;font-size:.72rem;color:var(--ink-soft);line-height:1.4;}
  .custom-opt{display:flex;align-items:center;gap:8px;font-size:.86rem;padding:6px 0;flex-wrap:wrap;}
  .custom-opt input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);flex:none;}
  .custom-opt.disabled{opacity:.6;}
  .custom-opt input[type="checkbox"]:disabled{cursor:not-allowed;}
  .custom-hint{
    flex-basis:100%;
    font-size:.74rem;color:var(--warm);
    padding-left:24px;margin-top:-2px;
  }
  /* Personalizações viram "cartões" empilhados (22/09/2026, combinado com o Valle) em vez de uma
     linha só tentando caber checkbox + seletor + cor + aviso, que quebrava feio e deixava swatch
     cinza sem função visível mesmo desabilitado. Cada opção é um cartão com título; o conteúdo
     extra (onde aplicar, cor) só aparece DEPOIS de marcar o checkbox (ver opt-card-body[hidden],
     alternado em JS no cb.addEventListener('change') de cada opção). */
  .opt-card{
    border:1px solid var(--line);border-radius:10px;
    padding:10px 12px;margin-bottom:8px;background:var(--surface);
  }
  .opt-card:last-child{margin-bottom:0;}
  .opt-card.opt-gated{background:var(--surface-alt);}
  .opt-card-head{
    display:flex;align-items:center;gap:9px;cursor:pointer;
    font-size:.88rem;font-weight:600;
  }
  .opt-card-head input[type="checkbox"]{width:17px;height:17px;accent-color:var(--accent);flex:none;}
  .opt-card-head input[type="checkbox"]:disabled{cursor:not-allowed;}
  .opt-card.opt-gated .opt-card-head{color:var(--ink-soft);}
  .opt-gate-note{font-size:.74rem;color:var(--ink-soft);margin-top:5px;padding-left:26px;line-height:1.4;}
  .opt-card-body{
    margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
    display:flex;flex-direction:column;gap:10px;
  }
  .opt-card-body[hidden]{display:none;}
  .opt-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .opt-row-label{font-size:.78rem;color:var(--ink-soft);min-width:84px;}
  .opt-hint{font-size:.74rem;color:var(--warm);}
  .custom-where{
    font-size:.78rem;border:1px solid var(--line);border-radius:6px;padding:5px 7px;
    background:var(--surface);color:var(--ink);
  }
  .custom-color{
    width:32px;height:30px;padding:2px;border:1px solid var(--line);border-radius:6px;
    background:var(--surface);cursor:pointer;
  }
  /* cor da metalização: dourado ou prata (fotos reais da tampa em cada cor, ver
     tampa-01-metal.webp / tampa-01-metal-prata.webp), swatches em vez de picker livre porque só
     existem essas opções de fábrica. */
  .metal-swatch-row{display:flex;align-items:center;gap:7px;}
  .metal-swatch-label{font-size:.74rem;color:var(--ink-soft);}
  .metal-swatch{width:22px;height:22px;}
  .side-picker{display:flex;gap:6px;flex-wrap:wrap;}
  .side-btn{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    border:1px solid var(--line);background:var(--surface);border-radius:8px;
    padding:5px 8px 4px;cursor:pointer;font-family:'IBM Plex Mono',monospace;
    font-size:.58rem;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-soft);
    transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .side-btn.active{border-color:var(--warm);color:var(--warm);background:var(--warm-soft);}
  .side-btn svg{width:18px;height:22px;display:block;}
  /* alvo de toque maior no mobile (WCAG recomenda ~44px) sem aumentar o desenho visualmente
     no desktop — cresce a área clicável com um pseudo-elemento em vez do próprio swatch. */
  @media (max-width:700px){
    .metal-swatch, .color-select .swatch{width:24px;height:24px;position:relative;}
    .metal-swatch::after, .color-select .swatch::after{
      content:"";position:absolute;inset:-8px;
    }
    .side-btn{padding:7px 10px 6px;font-size:.62rem;}
    .opt-card{padding:11px 13px;}
    .opt-row-label{min-width:100%;}
  }
  .color-select{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;}
  .color-select .swatch{width:22px;height:22px;}
  .color-select-name{
    margin-top:4px;text-align:right;font-size:.72rem;color:var(--ink-soft);
    font-family:'IBM Plex Sans',sans-serif;letter-spacing:0;
  }
  .custom-qty{
    margin-top:8px;padding-top:10px;border-top:1px dashed var(--line);
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  }
  .custom-qty[hidden]{display:none;}
  .custom-qty label{font-size:.84rem;color:var(--ink);}
  .custom-qty input[type="number"]{
    width:80px;font-size:.86rem;border:1px solid var(--line);border-radius:6px;
    padding:5px 8px;background:var(--surface);color:var(--ink);
  }
  .custom-qty-hint{flex-basis:100%;font-size:.72rem;color:var(--ink-soft);}
  .qitem .qcustom{font-size:.68rem;color:var(--accent-strong);margin-top:2px;}
  .qedit{background:none;border:none;color:var(--accent-strong);cursor:pointer;font-size:.7rem;text-decoration:underline;padding:0;margin-top:3px;display:block;}
  .qedit:hover{color:var(--warm);}

  /* ---------- exclusivos: balão flutuante ---------- */
  .exclusive-bubble{
    position:fixed;left:24px;bottom:24px;z-index:69;
  }
  /* Mesmo raciocínio do pkg-fab logo acima: na ficha de um produto específico o convite pra
     "formato exclusivo" compete com o CTA de adicionar ao orçamento (sticky no rodapé do
     mobile) e fica sem função ali — esconde junto. */
  body:has(#productPage:not([hidden])) .exclusive-bubble{display:none;}
  .exclusive-toggle{
    width:46px;height:46px;border-radius:999px;flex:none;
    background:var(--warm);border:1px solid var(--warm);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 18px -8px rgba(198,42,47,.55);
    cursor:pointer;
    position:relative;
    transition:border-color .15s ease, background .15s ease, transform .15s ease;
    animation:exclusiveIn .55s cubic-bezier(.34,1.56,.64,1) 1.1s backwards,
              exclusivePulse 1.8s ease-out 2.4s 3;
  }
  .exclusive-toggle::after{
    content:"";
    position:absolute;inset:0;border-radius:999px;
    box-shadow:0 0 0 0 rgba(198,42,47,.45);
    animation:exclusiveRing 1.8s ease-out 2.4s 3;
    pointer-events:none;
  }
  .exclusive-toggle svg{width:20px;height:20px;}
  .exclusive-toggle:hover{background:#a92227;border-color:#a92227;transform:translateY(-1px);}
  .exclusive-bubble.open .exclusive-toggle{background:var(--accent-strong);border-color:var(--accent-strong);}
  @keyframes exclusiveIn{
    from{transform:translateY(18px) scale(.7);opacity:0;}
    to{transform:translateY(0) scale(1);opacity:1;}
  }
  @keyframes exclusivePulse{
    0%,100%{transform:scale(1);}
    12%{transform:scale(1.08);}
    24%{transform:scale(1);}
  }
  @keyframes exclusiveRing{
    0%{box-shadow:0 0 0 0 rgba(198,42,47,.45);}
    100%{box-shadow:0 0 0 14px rgba(198,42,47,0);}
  }
  @media (prefers-reduced-motion: reduce){
    .exclusive-toggle{animation:none;}
    .exclusive-toggle::after{animation:none;}
  }
  .exclusive-pop{
    position:absolute;left:0;bottom:58px;
    width:280px;max-width:calc(100vw - 48px);
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:16px 16px 14px;box-shadow:var(--shadow);
    transform-origin:0 100%;
    transform:scale(.92) translateY(6px);
    opacity:0;pointer-events:none;
    transition:transform .18s ease, opacity .18s ease;
  }
  .exclusive-bubble.open .exclusive-pop{transform:scale(1) translateY(0);opacity:1;pointer-events:auto;}
  .exclusive-pop p{margin:0 0 12px;font-size:.84rem;color:var(--ink-soft);}
  .exclusive-pop b{color:var(--ink);}
  .exclusive-pop .btn{width:100%;justify-content:center;}
  .exclusive-close{
    position:absolute;top:8px;right:8px;
    width:22px;height:22px;border-radius:999px;border:none;background:none;
    color:var(--ink-soft);cursor:pointer;font-size:1.1rem;line-height:1;
  }
  .exclusive-close:hover{color:var(--ink);}
  @media (max-width:520px){
    .exclusive-bubble{left:16px;bottom:16px;}
  }

  /* ---------- quote drawer ---------- */
  .drawer-veil{
    position:fixed;inset:0;background:rgba(10,16,19,.4);
    display:none;z-index:90;
  }
  .drawer-veil.show{display:block;}
  .drawer{
    position:fixed;top:0;right:0;bottom:0;width:min(400px,100%);
    background:var(--surface);
    border-left:1px solid var(--line);
    box-shadow:var(--shadow);
    z-index:95;
    transform:translateX(100%);
    transition:transform .22s ease;
    display:flex;flex-direction:column;
  }
  .drawer.show{transform:translateX(0);}
  .drawer-head{
    padding:18px 20px;border-bottom:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;
  }
  .drawer-items{flex:1;overflow-y:auto;padding:10px 16px;}
  .qitem{
    display:flex;gap:10px;align-items:center;
    padding:10px 4px;border-bottom:1px solid var(--line);
  }
  .qitem .qthumb{flex:none;width:40px;height:52px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);}
  .qitem .qthumb svg{max-height:48px;width:auto;}
  .qitem .qthumb img{max-height:48px;max-width:100%;width:auto;object-fit:contain;}
  .qitem .qname{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.98rem;}
  .qitem .qcode{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--ink-soft);}
  .qty{
    display:flex;align-items:center;gap:6px;margin-left:auto;
  }
  .qty button{
    width:24px;height:24px;border-radius:6px;border:1px solid var(--line);
    background:var(--surface-alt);cursor:pointer;color:var(--ink);
  }
  .qty .n{font-family:'IBM Plex Mono',monospace;min-width:18px;text-align:center;font-size:.82rem;}
  .qremove{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:.9rem;padding:2px 6px;}
  .qremove:hover{color:var(--warm);}
  .drawer-foot{padding:16px 20px;border-top:1px solid var(--line);}
  .drawer-empty{padding:40px 20px;text-align:center;color:var(--ink-soft);font-size:.9rem;}

  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

  @media (prefers-reduced-motion: reduce){
    .drawer{transition:none;}
  }

  /* ---------------- floating helper: embalagem que se transforma ---------------- */
  /* Não é chat, não é assistente — é a própria embalagem do catálogo funcionando
     como CTA. Entra aberta, mostra 2-3 formatos "morphing", recolhe sozinha e
     some virando um selo circular; expande de novo no hover/toque. Clicar em
     qualquer estado abre o wizard direto — sem etapa intermediária. */
  .pkg-fab{
    position:fixed;right:24px;bottom:24px;z-index:70;
    display:flex;align-items:center;
    background:var(--surface);border:1px solid var(--line);
    border-radius:999px;
    padding:7px;
    box-shadow:var(--shadow);
    cursor:pointer;font:inherit;color:var(--ink);
    -webkit-tap-highlight-color:transparent;
    animation:pkgFabIn .55s cubic-bezier(.34,1.56,.64,1) .9s backwards;
    transition:border-color .15s ease;
  }
  .pkg-fab:hover{border-color:var(--accent);}
  .pkg-fab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .pkg-fab-icon{
    width:44px;height:44px;border-radius:999px;flex:none;
    background:var(--accent-soft);color:var(--accent-strong);
    display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;
  }
  .pkg-fab-icon svg{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%) scale(1);
    opacity:1;
    transition:opacity .4s ease, transform .4s ease;
  }
  .pkg-fab-icon svg.pkg-out{opacity:0;transform:translate(-50%,-50%) scale(.72) rotate(8deg);}
  .pkg-fab-icon svg.pkg-in{opacity:0;transform:translate(-50%,-50%) scale(1.2);}
  .pkg-fab-text{
    display:flex;align-items:center;gap:7px;
    max-width:240px;overflow:hidden;white-space:nowrap;
    transition:max-width .32s ease, opacity .22s ease, padding .32s ease;
    padding:0 14px 0 10px;
  }
  .pkg-fab-label{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.1px;}
  .pkg-fab-arrow{font-weight:700;color:var(--warm);transition:transform .2s ease;flex:none;}
  .pkg-fab:hover .pkg-fab-arrow{transform:translateX(3px);}
  .pkg-fab.collapsed .pkg-fab-text{max-width:0;opacity:0;padding:0;}
  @media (hover:hover) and (pointer:fine){
    .pkg-fab.collapsed:hover .pkg-fab-text{max-width:240px;opacity:1;padding:0 14px 0 10px;}
  }
  @keyframes pkgFabIn{
    from{transform:translateY(18px) scale(.7);opacity:0;}
    to{transform:translateY(0) scale(1);opacity:1;}
  }
  @media (max-width:520px){
    .pkg-fab{right:16px;bottom:16px;}
  }
  /* Dentro da ficha de produto o botão fixo "Ache a embalagem certa" não faz sentido — o cliente
     já escolheu o produto, está no fluxo de configurar ESTE item. Esconde em qualquer largura
     (03/10/2026: antes só escondia <700px; no desktop ele também ficava sobrando/competindo com
     o resto da tela). Volta a aparecer sozinho ao fechar a ficha e voltar pro catálogo. */
  body:has(#productPage:not([hidden])) .pkg-fab{display:none;}
  @media (prefers-reduced-motion: reduce){
    .pkg-fab{animation:none;}
    .pkg-fab-icon svg{transition:none;}
  }

  /* ---------------- glossário: aba fixa no topo + painel deslizante ---------------- */
  /* Não é accordion que empurra o conteúdo — é uma guia grudada no topo (sticky),
     sempre alcançável. Ao clicar, o painel desliza pra baixo colado nela mesma
     (sem véu escuro), os 4 cards entram em sequência, e cada card já filtra o
     catálogo pela categoria — vira atalho de navegação, não só explicação. */
  .gloss-dock{
    position:static;
    display:flex;align-items:center;
  }
  .gloss-tab{
    display:flex;align-items:center;gap:7px;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:999px;
    padding:11px 16px;cursor:pointer;
    font-family:'IBM Plex Mono',monospace;font-size:.68rem;text-transform:uppercase;
    letter-spacing:.09em;color:#fff;font-weight:500;
    transition:background .15s ease, border-color .15s ease;
    white-space:nowrap;
  }
  .gloss-tab:hover{background:rgba(255,255,255,.28);border-color:#fff;}
  .gloss-tab .chev{flex:none;transition:transform .2s ease;color:#fff;}
  .gloss-dock.open .gloss-tab .chev{transform:rotate(180deg);}
  .gloss-panel-wrap{
    position:absolute;top:100%;left:50%;transform:translateX(-50%);
    width:min(1180px, calc(100vw - 32px));
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .32s ease;
    z-index:60;
  }
  .gloss-dock.open .gloss-panel-wrap{grid-template-rows:1fr;}
  .gloss-panel-inner{overflow:hidden;}
  .gloss-panel{
    background:var(--surface);border:1px solid var(--line);border-top:none;
    border-radius:0 0 14px 14px;box-shadow:var(--shadow);
    padding:18px 20px 20px;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;
  }
  .gloss-card{
    background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--radius);
    padding:14px;display:flex;flex-direction:column;gap:6px;
    text-align:left;cursor:pointer;color:inherit;font:inherit;width:100%;
    opacity:0;transform:translateY(-8px);
    transition:opacity .28s ease, transform .28s ease, border-color .15s ease;
  }
  .gloss-card:hover{border-color:var(--accent);}
  .gloss-dock.open .gloss-card{opacity:1;transform:translateY(0);}
  .gloss-dock.open .gloss-card:nth-child(1){transition-delay:.03s;}
  .gloss-dock.open .gloss-card:nth-child(2){transition-delay:.09s;}
  .gloss-dock.open .gloss-card:nth-child(3){transition-delay:.15s;}
  .gloss-dock.open .gloss-card:nth-child(4){transition-delay:.21s;}
  .gloss-card .gicon{
    height:64px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
  }
  .gloss-card .gicon img{max-height:58px;width:auto;max-width:100%;object-fit:contain;}
  .gloss-card .gname{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.2rem;}
  .gloss-card .gwhen{
    font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-strong);
    font-family:'IBM Plex Mono',monospace;
  }
  .gloss-card .gdesc{color:var(--ink-soft);font-size:.83rem;}
  .gloss-card .gsee{margin-top:auto;padding-top:6px;font-size:.76rem;color:var(--accent-strong);font-weight:600;}
  @media (prefers-reduced-motion: reduce){
    .gloss-panel-wrap, .gloss-tab .chev, .gloss-card{transition:none;}
  }
  @media (max-width:600px){
    .gloss-panel{grid-template-columns:1fr 1fr;padding:14px;}
  }
  @media (max-width:420px){
    .gloss-panel{grid-template-columns:1fr;}
  }

  /* ---------------- wizard ---------------- */
  .wizard{max-width:520px;}
  .wiz-progress{display:flex;gap:6px;padding:18px 22px 0;}
  .wiz-dot{flex:1;height:4px;border-radius:3px;background:var(--line);}
  .wiz-dot.done{background:var(--accent);}
  .wiz-body{padding:18px 22px 4px;}
  .wiz-q{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.5rem;margin-bottom:4px;}
  .wiz-sub{color:var(--ink-soft);font-size:.86rem;margin-bottom:16px;}
  .wiz-options{display:grid;gap:10px;}
  .wiz-opt{
    display:flex;align-items:center;gap:12px;
    text-align:left;
    background:var(--surface-alt);border:1.5px solid var(--line);border-radius:10px;
    padding:12px 14px;cursor:pointer;color:var(--ink);
  }
  .wiz-opt:hover{border-color:var(--accent);}
  .wiz-opt .oi{flex:none;color:var(--accent-strong);}
  .wiz-opt .ot{font-weight:600;font-size:.94rem;}
  .wiz-opt .od{font-size:.78rem;color:var(--ink-soft);font-weight:400;}
  /* seletor de vendedor no checkout (25/09/2026 → refeito em 28/09/2026, pedido do Valle: "seletor
     de vendedor poderia ser mais imponente... grid 3 colunas foto maiorzinha... valorizar o
     vendedor"; ajustado de novo em 28/09/2026: "fotos em círculo como perfil de redes sociais,
     remove Vendas Mapet, adiciona Editar Pedido/Cancelar embaixo à direita e Fechar em cima à
     direita"). Foto vira avatar circular (como ícone de perfil), sem o cargo embaixo do nome;
     modal ganhou um X de fechar no canto superior (reaproveitando .modal-close) e o rodapé virou
     dois botões alinhados à direita — ver openSellerPicker() mais abaixo. */
  #sellerModal{position:relative;}
  .seller-close{position:absolute;top:14px;right:14px;z-index:2;}
  .seller-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;
  }
  .seller-card{
    display:flex;flex-direction:column;align-items:center;gap:8px;
    background:var(--surface-alt);border:1.5px solid var(--line);border-radius:14px;
    padding:16px 10px;cursor:pointer;color:var(--ink);font:inherit;text-align:center;
  }
  .seller-card:hover{border-color:var(--accent);}
  .seller-photo{
    width:96px;height:96px;margin:0 auto;border-radius:999px;overflow:hidden;flex:none;
    background:var(--accent-soft);
  }
  .seller-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .seller-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.02rem;line-height:1.15;}
  .seller-foot{justify-content:flex-end;gap:10px;}
  @media (max-width:420px){
    .seller-grid{gap:8px;}
    .seller-card{padding:12px 6px;}
    .seller-photo{width:72px;height:72px;}
    .seller-name{font-size:.9rem;}
    .seller-foot{gap:6px;}
    .seller-foot .btn{padding:8px 10px;font-size:.78rem;}
  }
  .wiz-foot{
    display:flex;justify-content:space-between;align-items:center;
    padding:18px 22px 22px;
  }
  .wiz-link{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:.84rem;text-decoration:underline;}
  .wizard.wide{max-width:640px;}

  /* ---------------- wizard: funil "ache a embalagem certa" ---------------- */
  .funnel-progress{height:4px;background:var(--line);border-radius:3px;margin:18px 22px 0;overflow:hidden;}
  .funnel-progress-bar{height:100%;background:var(--accent);border-radius:3px;width:0%;transition:width .3s ease;}
  .funnel-counter{
    font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--ink-soft);
    padding:10px 22px 0;
  }
  .funnel-head{display:flex;align-items:center;gap:12px;padding:14px 22px 0;}
  .funnel-head .fh-icon{
    width:52px;height:52px;border-radius:12px;flex:none;
    background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent-strong);
  }
  .funnel-head .fh-icon svg{height:32px;width:auto;}
  .funnel-head .fh-icon img{height:32px;width:auto;max-width:100%;object-fit:contain;}
  .funnel-head .fh-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.3rem;}

  /* tela 1: grid de famílias */
  .fam-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;
  }
  .fam-card{
    background:var(--surface-alt);border:1.5px solid var(--line);border-radius:12px;
    padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    text-align:left;cursor:pointer;color:var(--ink);font:inherit;
  }
  .fam-card:hover{border-color:var(--accent);}
  .fam-icon{
    width:100%;height:64px;display:flex;align-items:center;justify-content:center;
    color:var(--ink-soft);position:relative;overflow:visible;
  }
  .fam-icon svg{height:56px;width:auto;position:relative;z-index:1;}
  .fam-icon img{height:56px;width:auto;max-width:100%;object-fit:contain;position:relative;z-index:1;}
  .fam-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;}
  .fam-examples{font-size:.78rem;color:var(--ink-soft);line-height:1.35;}
  @keyframes famIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
  .fam-grid.animate .fam-card{opacity:0;}
  .fam-grid.animate .fam-card:nth-child(1){animation:famIn .35s ease .05s forwards;}
  .fam-grid.animate .fam-card:nth-child(2){animation:famIn .35s ease .13s forwards;}
  .fam-grid.animate .fam-card:nth-child(3){animation:famIn .35s ease .21s forwards;}
  .fam-grid.animate .fam-card:nth-child(4){animation:famIn .35s ease .29s forwards;}
  /* microanimações por família — disparam só na primeira abertura, logo após a entrada do card */
  .fam-grid.animate .fam-card:nth-child(1) .fam-lid{animation:famLid .45s ease .42s backwards;}
  .fam-lid{position:absolute;top:2px;left:50%;width:26px;height:8px;margin-left:-13px;border-radius:999px;background:var(--accent-strong);opacity:.85;}
  @keyframes famLid{
    0%{transform:translateY(-14px) rotate(-16deg);opacity:0;}
    60%{transform:translateY(1px) rotate(4deg);opacity:1;}
    100%{transform:translateY(0) rotate(0);opacity:1;}
  }
  .fam-grid.animate .fam-card:nth-child(2) .fam-fill{animation:famFill .5s ease .5s both;}
  .fam-fill{position:absolute;left:50%;bottom:6px;width:22px;height:0;margin-left:-11px;background:var(--warm-soft);border-radius:0 0 6px 6px;opacity:.8;}
  @keyframes famFill{from{height:0;}to{height:24px;}}
  .fam-grid.animate .fam-card:nth-child(3) .fam-icon svg,
  .fam-grid.animate .fam-card:nth-child(3) .fam-icon img{animation:famTilt .5s ease .58s backwards;}
  @keyframes famTilt{
    0%{transform:rotate(0);}
    45%{transform:rotate(-16deg);}
    100%{transform:rotate(0);}
  }
  .fam-grid.animate .fam-card:nth-child(4) .fam-icon svg,
  .fam-grid.animate .fam-card:nth-child(4) .fam-icon img{animation:famCarry .5s ease .66s backwards;}
  @keyframes famCarry{
    0%{transform:translateX(0);}
    30%{transform:translateX(-4px) rotate(-3deg);}
    65%{transform:translateX(3px) rotate(2deg);}
    100%{transform:translateX(0) rotate(0);}
  }
  @media (prefers-reduced-motion: reduce){
    .fam-grid.animate .fam-card, .fam-lid, .fam-fill, .fam-grid.animate .fam-card .fam-icon svg, .fam-grid.animate .fam-card .fam-icon img{animation:none;opacity:1;}
  }
  .fam-unsure{
    display:block;width:100%;margin-top:14px;
    background:none;border:1.5px dashed var(--line);border-radius:10px;
    padding:12px 14px;text-align:left;cursor:pointer;color:var(--ink-soft);font:inherit;
  }
  .fam-unsure:hover{border-color:var(--accent);color:var(--ink);}
  .fam-unsure b{display:block;color:var(--ink);font-size:.92rem;}
  .fam-unsure span{font-size:.82rem;}

  /* tela 2A: pergunta de faceta */
  .facet-opts{display:grid;gap:10px;margin-top:14px;}
  .facet-opt{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:var(--surface-alt);border:1.5px solid var(--line);border-radius:10px;
    padding:12px 14px;cursor:pointer;color:var(--ink);text-align:left;font:inherit;
  }
  .facet-opt:hover{border-color:var(--accent);}
  .facet-opt .fo-t{font-weight:600;font-size:.94rem;}
  .facet-opt .fo-d{font-size:.78rem;color:var(--ink-soft);font-weight:400;}
  .facet-opt .fo-n{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--ink-soft);flex:none;}

  /* tela 3: resultado */
  .result-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px;}
  .result-chip{
    background:var(--accent-soft);color:var(--accent-strong);
    border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:600;
    border:none;cursor:pointer;
  }
  .result-chip.readonly{cursor:default;}
  .result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;max-height:320px;overflow-y:auto;padding-bottom:2px;}
  .result-card{
    background:var(--surface-alt);border:1px solid var(--line);border-radius:10px;
    padding:10px;display:flex;flex-direction:column;gap:6px;
  }
  .result-card .rc-thumb{height:60px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);}
  .result-card .rc-thumb svg{height:48px;width:auto;}
  .result-card .rc-thumb img{height:48px;width:auto;max-width:100%;object-fit:contain;}
  .result-card .rc-name{font-size:.8rem;font-weight:600;line-height:1.25;}
  .result-card .rc-see{background:none;border:none;color:var(--accent-strong);font-size:.74rem;font-weight:600;cursor:pointer;padding:0;text-align:left;}
  .result-empty{color:var(--ink-soft);font-size:.88rem;padding:20px 0;}
  .result-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
  .result-actions .btn{width:100%;justify-content:center;}
  .result-links{display:flex;justify-content:space-between;margin-top:4px;}

  .reco-banner{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    background:var(--accent-soft);border:1px solid var(--line);
    border-left:3px solid var(--warm);
    border-radius:10px;padding:12px 16px;margin-bottom:14px;
    font-size:.88rem;color:var(--accent-strong);
  }
  .reco-banner b{color:var(--ink);}
  .reco-banner button{
    margin-left:auto;background:none;border:none;color:var(--accent-strong);
    text-decoration:underline;cursor:pointer;font-size:.82rem;
  }

/* ---------------- rodapé (todas as páginas públicas) ---------------- */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--surface);
  margin-top:40px;
}
.site-footer-inner{
  max-width:1180px;
  margin:0 auto;
  padding:28px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.site-footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.site-footer-brand img{height:48px;width:auto;display:block;}
.site-footer-info{font-size:.8rem;color:var(--ink-soft);line-height:1.5;}
.site-footer-info b{color:var(--ink);}
.site-footer-social{display:flex;gap:10px;}
.site-footer-social a{
  width:38px;height:38px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-alt);border:1px solid var(--line);color:var(--ink);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.site-footer-social a:hover{border-color:var(--warm);color:var(--warm);background:var(--warm-soft);}
.site-footer-social svg{width:18px;height:18px;}
@media (max-width:600px){
  .site-footer-inner{flex-direction:column;align-items:flex-start;text-align:left;}
  .site-footer-social{align-self:flex-start;}
}

/* ---------------- paginação do grid de produtos ---------------- */
.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  margin:28px 0 10px;
}
.pagebtn{
  min-width:36px;
  height:36px;
  padding:0 10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  font-size:.86rem;
  font-weight:600;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.pagebtn:hover:not(:disabled):not(.active){border-color:var(--warm);color:var(--warm);}
.pagebtn.active{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;cursor:default;}
.pagebtn:disabled{opacity:.4;cursor:default;}
.pagegap{color:var(--ink-soft);padding:0 2px;font-size:.86rem;}
@media (max-width:600px){
  .pagebtn{min-width:32px;height:32px;padding:0 8px;font-size:.8rem;}
}

/* ---------------- páginas de SEO: /produto/[slug] e /categoria/[slug] ---------------- */
.seo-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:28px 24px 10px;
  font-family:'IBM Plex Sans',sans-serif;
  color:var(--ink);
}
.seo-breadcrumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.82rem;color:var(--ink-soft);margin-bottom:20px;
}
.seo-breadcrumb a{color:var(--ink-soft);text-decoration:none;}
.seo-breadcrumb a:hover{color:var(--warm);text-decoration:underline;}
.seo-breadcrumb [aria-current="page"]{color:var(--ink);font-weight:600;}

.seo-product{
  display:grid;
  grid-template-columns:minmax(0,440px) 1fr;
  gap:36px;
  align-items:start;
}
/* Palco limpo (03/10/2026): degradê radial sutil centralizado no produto em vez da caixa
   cinza achatada — mesmo tratamento que a ficha interativa da SPA já usa
   (.product-page-inner .diagram), só replicado aqui porque esta página SEO é renderizada
   fora do catalogo.js/css de classes .diagram*. */
.seo-product-media{
  aspect-ratio:1/1;
  max-height:460px;
  background:radial-gradient(circle at 50% 50%, #ffffff 0%, #edeae8 90%);
  border:1px solid var(--line);
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.seo-product-media img{max-width:88%;max-height:88%;object-fit:contain;filter:drop-shadow(0 14px 20px rgba(0,0,0,.1));}
.seo-product-placeholder{
  color:var(--ink-soft);
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.4rem;
  text-transform:capitalize;
}
.seo-product-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.seo-product-info h1{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:2rem;
  line-height:1.1;
  margin:0;
}
.seo-product-code{font-size:.8rem;color:var(--ink-soft);margin:0 0 4px;}
.seo-share{
  flex:none;
  background:var(--surface-alt);border:1px solid var(--line);color:var(--ink-soft);
  border-radius:999px;width:34px;height:34px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.seo-share:hover{border-color:var(--accent);color:var(--ink);}
.seo-share.copied{color:#3a7d44;border-color:#3a7d44;}
.seo-stockrow{display:flex;align-items:center;gap:7px;font-size:.84rem;color:var(--ink-soft);margin:14px 0 18px;}
.seo-specs{margin:0 0 18px;border-top:1px solid var(--line);}
.seo-spec-row{
  display:flex;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--line);
  font-size:.88rem;
}
.seo-spec-row dt{color:var(--ink-soft);margin:0;}
.seo-spec-row dd{margin:0;font-weight:600;text-align:right;}
.seo-colors{margin-bottom:22px;}
.seo-colors-label{display:block;font-size:.8rem;color:var(--ink-soft);margin-bottom:8px;}
.seo-colors-list{display:flex;flex-wrap:wrap;gap:8px;}
.seo-color-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface-alt);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;font-size:.78rem;
}
.seo-color-dot{width:11px;height:11px;border-radius:999px;border:1px solid var(--line);}
.seo-cta-dock{margin-top:4px;}
.seo-cta{margin-bottom:8px;text-decoration:none;}
.seo-cta-note{font-size:.78rem;color:var(--ink-soft);max-width:420px;margin:0;}
/* Barra fixa no rodapé no mobile (mesmo padrão do CTA da ficha interativa) — o polegar
   sempre alcança sem precisar rolar até o fim da coluna de specs. */
@media (max-width:700px){
  .seo-cta-dock{
    position:sticky;bottom:0;
    margin:20px -24px 0;padding:12px 24px calc(12px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -8px 20px -16px rgba(0,0,0,.25);
  }
  .seo-cta{display:flex;justify-content:center;width:100%;margin-bottom:4px;}
  .seo-cta-note{display:none;}
}

.seo-cat-head{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  margin-bottom:22px;
}
.seo-cat-head h1{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:2rem;margin:0;
}
.seo-cat-head .btn{text-decoration:none;}
.seo-empty{color:var(--ink-soft);padding:20px 0;}
.seo-cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
  padding-bottom:20px;
}
.seo-cat-card{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  color:inherit;
  text-decoration:none;
  transition:border-color .15s, transform .15s ease;
}
.seo-cat-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.seo-cat-card-media{
  aspect-ratio:1/1;
  background:var(--surface-alt);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);
  font-family:'Barlow Condensed',sans-serif;
  text-transform:capitalize;
  overflow:hidden;
  margin-bottom:10px;
}
.seo-cat-card-media img{max-width:88%;max-height:88%;object-fit:contain;}
.seo-cat-card-code{font-size:.7rem;color:var(--ink-soft);}
.seo-cat-card-name{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:1rem;margin-top:2px;}
.seo-cat-card-tag{font-size:.74rem;color:var(--ink-soft);margin-top:4px;}

@media (max-width:760px){
  .seo-product{grid-template-columns:1fr;}
  .seo-product-media{max-width:320px;margin:0 auto 10px;}
}