/* Gerado a partir dos `<style>` que viviam dentro do HTML (29/09/2026).
   Arquivo .css em /styles E SERVIDO pela plataforma, e ao contrario do CSS inline ele
   tem ETag, entao a segunda visita revalida com 304 em vez de baixar tudo de novo.
   NAO passa pela compiladora: sem `@apply`, e `rgb(a b c / d)` aqui funciona.
   A ORDEM DOS BLOCOS ABAIXO E A ORDEM QUE ELES TINHAM NO DOCUMENTO. Nao reordenar. */

  .hc-faixa{grid-column:1 / -1;position:relative;display:flex;align-items:center;min-height:96px;padding:20px 30px;border-radius:20px;background:#33299e;overflow:hidden}
  .hc-faixa-arco{position:absolute;left:6%;top:-152px;width:360px;height:360px;opacity:.5}
  .hc-faixa-pontos{position:absolute;right:26px;top:0;bottom:0;width:210px;background-image:radial-gradient(#645cfa 2px,transparent 2.1px);background-size:13px 13px;opacity:.4}
  /* Anula o `.hc-heading` do core.css, que nasceu para um titulo solto na pagina: flex em
     linha, margem de 28px e fonte de 26px. Dentro da faixa ele e uma pilha sem margem. */
  .how-catalog .hc-faixa .hc-heading{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0;min-width:0}
  .how-catalog .hc-faixa .hc-heading h1{font-size:clamp(22px,2.4vw,28px);line-height:1.15;font-weight:800;letter-spacing:-.02em;color:#fff}
  .hc-faixa-sub{margin:0;font-size:13.5px;line-height:20px;color:#dad7ff}
  /* Quem separava a barra da grade era o proprio `.hc-heading`, com a margem dele. Ele
       foi para dentro da faixa e levou o respiro junto, entao a margem passou para ca. */
  .how-catalog .hc-toolbar{margin-bottom:22px}

  /* ===================================================================
       AS DUAS GAVETAS DE BAIXO DO CELULAR
       **Nao ha maquina de estado nova.** Quem abre continua sendo o `open` do
       `<details>` da ordem e o `aria-expanded` do botao, que o `catalog.js` ja mexia; um
       `MutationObserver` observa os dois e cuida do veu, da trava de rolagem e do
       atributo que o CSS le. Foi de proposito: esses dois estados mudam em cinco lugares
       (clique, clique fora, Escape, setas, troca de largura).
       A gaveta desliza por ANIMACAO, nao transicao: fechada ela e `display:none`, e de
       `none` nao ha transicao possivel.
       =================================================================== */
  @media(max-width:800px){
    /* ---- 1. faixa mais curta, e com ar embaixo ---- */
    .hc-faixa-dica{display:none}
    /* No celular `.how-catalog` vira `display:block` e o `gap` da grade, que era quem
       separava a faixa no computador, deixa de existir. Daqui vem o respiro. */
    .how-catalog .hc-faixa{margin-bottom:18px}

    /* ---- 2. a barra deixa de ser cartao ---- */
    .how-catalog .hc-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;
      min-height:0;padding:0;border:0;background:none;border-radius:0;margin-bottom:18px}
    .how-catalog .hc-search-field{grid-column:1 / -1;width:100%}
    /* `z-index:auto` E OBRIGATORIO, nao e limpeza. Com `z-index` proprio o `.hc-filters`
       abre contexto de empilhamento, e a gaveta `position:fixed` de dentro NAO consegue
       sair dele: ficaria presa no nivel 10 e o cabecalho do site passaria por cima. */
    .how-catalog .hc-filters{width:auto;z-index:auto}
    .how-catalog .hc-filters summary{width:100%;justify-content:flex-start}
    .how-catalog .hc-mobile-categories{width:100%;height:44px;justify-content:flex-start;
      gap:9px;font-weight:600;background:#272727;border-color:#3a3a3a}
    .how-catalog .hc-mobile-categories svg{width:16px;height:16px;color:#bababa}
    /* O aside fica so com a gaveta dentro, que e `fixed`: sem altura e sem margem ele
       para de reservar espaco na coluna. */
    .how-catalog .hc-sidebar{margin:0;z-index:auto}

    /* ---- 3. as duas gavetas ---- */
    .how-catalog :is(.hc-category-list,.hc-filter-panel){
      position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;
      max-height:min(78dvh,640px);overflow-y:auto;overscroll-behavior:contain;
      margin:0;padding:0 16px calc(18px + env(safe-area-inset-bottom,0px));
      border:0;border-radius:20px 20px 0 0;background:var(--hc-gaveta);
      box-shadow:0 -12px 40px rgb(0 0 0 / .5);z-index:10050;
      animation:hc-gaveta-sobe .28s cubic-bezier(.32,.72,0,1)}
    .how-catalog{--hc-gaveta:#161619;--hc-gaveta-linha:#2a2a2f}
    .how-catalog[data-hc-sheet="filtros"] .hc-category-list{display:block}
    /* A ordem continua sendo aberta pelo `<details>`, entao aqui nao ha regra de display:
       o proprio navegador ja mostra o painel quando o `open` entra. */

    /* `touch-action:none` E O QUE PERMITE ARRASTAR A GAVETA PARA FECHAR. Sem ele o
       navegador trata o gesto no cabecalho como rolagem da lista e o `pointermove` nem
       chega ao script. So no cabecalho: o corpo continua rolando nativamente. */
    .hc-sheet-topo{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:10px;
      padding:20px 0 12px;background:var(--hc-gaveta);touch-action:none;cursor:grab}
    .hc-sheet-topo:active{cursor:grabbing}
    /* O X nao arrasta, clica. */
    .hc-sheet-x{cursor:pointer;touch-action:auto}
    .hc-sheet-topo p{margin:0;font-size:15px;font-weight:700;color:#fff}
    .hc-sheet-alca{position:absolute;left:50%;top:8px;width:40px;height:4px;margin-left:-20px;
      border-radius:99px;background:#3a3a40}
    .hc-sheet-x{margin-left:auto;display:grid;place-items:center;width:32px;height:32px;
      flex:none;padding:0;border:0;border-radius:99px;background:#2a2a2e;color:#fff}
    .hc-sheet-x svg{width:16px;height:16px}

    /* Alvo de toque de 44px nas opcoes de ordem, que na gaveta ficam soltas e nao mais
       numa listinha de menu. */
    .how-catalog .hc-sort-option{min-height:48px;border-radius:10px}
    .how-catalog .hc-category{min-height:46px}
    .how-catalog .hc-price-filter{border-block-color:var(--hc-gaveta-linha)}
  }

  /* A gaveta desliza de baixo. Com `display:none` no estado fechado nao ha transicao
     possivel, entao quem faz o movimento e uma animacao, que roda quando o elemento passa
     a ser desenhado. */
  @keyframes hc-gaveta-sobe{from{transform:translateY(100%)}to{transform:none}}

  /* O veu e criado pelo `scripts/catalog.js` e vive no `body`, fora do `#how-catalog`:
     preso aqui dentro ele herdaria o recorte e o empilhamento da pagina. */
  .hc-veu{position:fixed;inset:0;z-index:10040;background:rgb(0 0 0 / .55);
    opacity:0;pointer-events:none;transition:opacity .24s ease}
  .hc-veu.is-aberto{opacity:1;pointer-events:auto}
  html.hc-travado,html.hc-travado body{overflow:hidden}

  .hc-sheet-topo{display:none}

  html[data-how-theme=light] .how-catalog{--hc-gaveta:#ffffff;--hc-gaveta-linha:#e4e4e7}
  html[data-how-theme=light] .hc-sheet-topo p{color:#191919}
  html[data-how-theme=light] .hc-sheet-alca{background:#d6d6d6}
  html[data-how-theme=light] .hc-sheet-x{background:#ececed;color:#191919}
  html[data-how-theme=light] .how-catalog .hc-mobile-categories{background:#f0f0f2;border-color:#d6d6d6}

  @media(max-width:800px){.hc-sheet-topo{display:flex}}
  @media(prefers-reduced-motion:reduce){
    .how-catalog :is(.hc-category-list,.hc-filter-panel){animation:none}
    .hc-veu{transition:none}
  }

  @media(max-width:700px){
    .hc-faixa{min-height:0;padding:18px 20px;border-radius:16px}
    /* A reticula sai no celular: com a faixa estreita ela passaria por baixo do texto, e
       o subtitulo em #dad7ff sobre os pontos nao tem folga de contraste. */
    .hc-faixa-pontos{display:none}
    .hc-faixa-arco{left:auto;right:-90px;top:-120px;width:280px;height:280px}
  }