/* Catálogo Grifith — v2 (docs/design/direcao-v2.md): Inter, foto dominante sobre branco puro, preço. */
@layer reset, tokens, base, layout, components, utilities;

/* Inter (OFL), auto-hospedada. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-700.woff2") format("woff2"); }

/* ================= reset ================= */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, ul, dl, dd { margin: 0; }
  ul { padding: 0; list-style: none; }
  button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  img { display: block; }
  picture { display: block; }
  [hidden] { display: none !important; }
}

/* ================= tokens ================= */
@layer tokens {
  :root {
    /* a foto é sempre sobre branco puro, nos dois temas */
    --foto: #FFFFFF;
    --bg: #F4F4F3; --surface: #FFFFFF; --surface-2: #EDEDEB; --ink: #141414; --muted: #646464;
    --line: #E1E1DE; --accent: #7A5C24; --stock: #2E6B45; --err: #A3291F; --warn: #8A4B00;
    --on-ink: #FFFFFF; --scrim: rgba(10, 10, 10, .48);

    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-17: 17px;
    --fs-16: 16px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-48: 48px; --fs-72: 72px;
    /* visor de foto e foto vazia: sempre sobre claro/escuro fixos, nos dois temas */
    --foto-ink: #141414; --foto-ink-fundo: #F1F1F1; --foto-vazio: #D9D9D9; --foto-vazio-txt: #6E6E6E;
    --sombra-barra: 0 -8px 24px rgba(0, 0, 0, .08); --op-desab: .5; --r-pill: 999px; --r-xs: 3px;

    --r-sm: 6px; --r-md: 10px; --r-lg: 18px;
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
    --sombra-folha: 0 -8px 32px rgba(10, 10, 10, .16);
    --sombra-modal: 0 24px 64px -16px rgba(10, 10, 10, .32);

    --gutter: 16px; --max: 1440px; --lateral-w: 272px; --topo-h: 64px;
    --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
    --z-sticky: 20; --z-topo: 30;
    --ease: cubic-bezier(.2, .8, .2, 1);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #101011; --surface: #1A1A1C; --surface-2: #242427; --ink: #F2F2F2; --muted: #A6A6A6;
      --line: #2E2E31; --accent: #D9B872; --stock: #7FC79A; --err: #F0958C; --warn: #E0A64B;
      --on-ink: #101011; --scrim: rgba(0, 0, 0, .64);
      --sombra-folha: 0 -8px 32px rgba(0, 0, 0, .5); --sombra-modal: 0 24px 64px -16px rgba(0, 0, 0, .7);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #101011; --surface: #1A1A1C; --surface-2: #242427; --ink: #F2F2F2; --muted: #A6A6A6;
    --line: #2E2E31; --accent: #D9B872; --stock: #7FC79A; --err: #F0958C; --warn: #E0A64B;
    --on-ink: #101011; --scrim: rgba(0, 0, 0, .64);
    --sombra-folha: 0 -8px 32px rgba(0, 0, 0, .5); --sombra-modal: 0 24px 64px -16px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
  @media (min-width: 600px) { :root { --gutter: 24px; } }
  @media (min-width: 1024px) { :root { --gutter: 32px; } }
}

/* ================= base ================= */
@layer base {
  body {
    background: var(--bg); color: var(--ink);
    font: 400 var(--fs-15)/1.45 var(--sans);
    font-feature-settings: "cv11", "ss01"; /* Inter: "a" de um andar e dígitos mais legíveis */
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
  .sobrelinha { font: 600 var(--fs-12)/1.3 var(--sans); letter-spacing: .02em; color: var(--muted); }
  .num, .cod { font-variant-numeric: tabular-nums; }
}

/* ================= layout ================= */
@layer layout {
  .topo { background: var(--bg); padding-top: var(--safe-t); }
  .topo-in {
    max-width: var(--max); margin: 0 auto; height: 56px;
    padding: 0 calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  }
  .corpo { max-width: var(--max); margin: 0 auto; padding: 0 calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }
  main { min-width: 0; padding-bottom: calc(var(--sp-12) + var(--safe-b)); }

  .barra {
    position: sticky; z-index: var(--z-sticky);
    background: var(--bg);
    margin: 0 calc(var(--gutter) * -1); padding: var(--sp-2) var(--gutter) 0;
    top: var(--safe-t);
    box-shadow: 0 calc(var(--safe-t) * -1) 0 var(--bg);
    transition: box-shadow .2s;
  }
  [data-rolou] .barra { box-shadow: 0 calc(var(--safe-t) * -1) 0 var(--bg), 0 1px 0 var(--line); }

  .grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-3); }
  @media (min-width: 600px) {
    .grade { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-8) var(--sp-4); }
  }
  @media (min-width: 1024px) {
    .topo { position: sticky; top: 0; z-index: var(--z-topo); }
    .topo-in { height: var(--topo-h); }
    [data-rolou] .topo { box-shadow: 0 1px 0 var(--line); }
    .corpo { display: grid; grid-template-columns: var(--lateral-w) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
    .lateral {
      display: block; position: sticky; top: var(--topo-h);
      max-height: calc(100dvh - var(--topo-h)); overflow-y: auto; overscroll-behavior: contain;
      padding: var(--sp-4) var(--sp-3) var(--sp-8) 0;
    }
    .barra { top: var(--topo-h); margin: 0; padding: var(--sp-2) 0 0; box-shadow: none; }
    [data-rolou] .barra { box-shadow: 0 1px 0 var(--line); }
    /* cards de até ~280 px: a foto do ERP (≈180×276) não passa de ~1,3× */
    .grade { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-8) var(--sp-6); }
  }

  /* tamanho do card (P/M/G): celular 3/2/1 colunas; a partir de 600 px, largura mínima 150/210/300 px */
  .grade[data-tamanho="p"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-2); }
  .grade[data-tamanho="g"] { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 600px) {
    .grade[data-tamanho="p"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-6) var(--sp-3); }
    .grade[data-tamanho="g"] { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  }
  @media (min-width: 1024px) {
    .grade[data-tamanho="p"] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-6) var(--sp-4); }
    .grade[data-tamanho="g"] { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  }
  /* lista: uma peça por linha (foto à esquerda); em tela larga, duas colunas de linhas */
  .grade[data-vista="lista"] { grid-template-columns: minmax(0, 1fr); gap: 0 var(--sp-6); }
  @media (min-width: 1280px) { .grade[data-vista="lista"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
}

/* ================= componentes ================= */
@layer components {
  /* ---------- logo ---------- */
  .logo-topo img { height: 24px; width: auto; }
  .logo-login img { width: 220px; height: auto; margin: 0 auto; }
  .vazio-logo img { height: 22px; width: auto; opacity: .35; }

  /* ---------- controles básicos ---------- */
  .input {
    width: 100%; min-height: 48px; padding: 0 14px;
    font-size: var(--fs-16); /* evita o zoom do iOS */
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
    transition: border-color .15s, box-shadow .15s;
  }
  .input::placeholder { color: var(--muted); opacity: 1; }
  .input:hover { border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); }
  .input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .input[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
  .input[type="search"]::-webkit-search-cancel-button { display: none; }

  .btn {
    min-height: 48px; padding: 0 var(--sp-6);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink); border-radius: var(--r-sm);
    font-size: var(--fs-15); font-weight: 600; white-space: nowrap; text-decoration: none;
    transition: opacity .15s, background .15s;
  }
  .btn:hover { opacity: .9; }
  .btn:active { opacity: .75; }
  .btn.sec { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
  .btn.sec:hover { opacity: 1; border-color: var(--ink); }
  .btn:disabled { opacity: var(--op-desab); cursor: default; }
  .btn .ic { display: grid; }
  .btn-link {
    min-height: 44px; padding: 0 var(--sp-2);
    color: var(--ink); font-size: var(--fs-14); font-weight: 600;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  }
  .btn-link:hover { text-decoration-thickness: 2px; }

  .icon-btn {
    min-width: 44px; min-height: 44px; display: grid; place-items: center;
    border-radius: var(--r-sm); color: var(--muted); transition: color .15s, background .15s;
  }
  .icon-btn:hover { color: var(--ink); background: var(--surface-2); }
  .ic { display: grid; place-items: center; }

  .erro { color: var(--err); font-size: var(--fs-13); min-height: 1.3em; }
  .erro:empty { min-height: 0; }
  .erro-campo { color: var(--err); font-size: var(--fs-13); }
  .erro-campo:empty { display: none; }
  .dica { color: var(--muted); font-size: var(--fs-13); }

  /* ---------- login ---------- */
  .login {
    min-height: 100dvh; display: grid; align-items: center; justify-items: center;
    padding: calc(var(--sp-8) + var(--safe-t)) var(--gutter) calc(var(--sp-8) + var(--safe-b));
  }
  .login-card { width: 100%; max-width: 360px; display: grid; gap: var(--sp-4); margin-bottom: 8vh; }
  .marca { margin-bottom: var(--sp-4); font-size: inherit; }
  .boas-vindas { text-align: center; color: var(--muted); font-size: var(--fs-14); margin: calc(var(--sp-2) * -1) 0 var(--sp-2); }
  .field { display: grid; gap: 6px; }
  .field label { font-size: var(--fs-13); font-weight: 600; color: var(--ink); }
  .login .btn { margin-top: var(--sp-2); }

  /* ---------- topo ---------- */
  .marca-topo { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
  .sub-topo { display: none; font-size: var(--fs-13); font-weight: 500; color: var(--muted); white-space: nowrap; }
  .acoes-topo { display: flex; align-items: center; gap: var(--sp-1); margin-right: -10px; }
  .loja-btn {
    min-height: 44px; padding: 0 var(--sp-2) 0 var(--sp-3);
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-14); font-weight: 600; color: var(--ink);
    border-radius: var(--r-sm);
  }
  .loja-btn .ic { color: var(--muted); }
  .loja-btn[data-ativa] span:first-child { color: var(--accent); }
  .loja-btn:hover { background: var(--surface-2); }
  @media (min-width: 1024px) {
    .sub-topo { display: inline; padding-left: var(--sp-4); border-left: 1px solid var(--line); }
    .logo-topo img { height: 26px; }
  }

  /* ---------- busca ---------- */
  .busca { display: flex; gap: var(--sp-2); }
  .busca-campo { position: relative; flex: 1; min-width: 0; }
  .busca-campo > .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
  .busca-campo .input { padding-left: 44px; padding-right: 46px; text-overflow: ellipsis; }
  .busca-campo .limpar { position: absolute; right: 2px; top: 2px; }
  /* botão da câmera dentro do campo, à direita; o "limpar" vai para a esquerda dele */
  .busca-campo.com-camera .input { padding-right: 92px; }
  .busca-campo.com-camera .limpar { right: 46px; }
  .busca-campo .camera-btn { position: absolute; right: 2px; top: 2px; color: var(--ink); }
  .filtro-btn {
    position: relative; flex: none; width: 48px; height: 48px; display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink);
  }
  .filtro-btn:hover { border-color: var(--ink); }
  .filtro-btn .n { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
  @media (min-width: 1024px) {
    .filtro-btn { display: none; }
    .busca { max-width: 560px; }
  }

  /* ---------- abas de seção e chips de categoria ---------- */
  .abas, .chips {
    display: flex; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  .abas::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
  .abas { margin-top: var(--sp-1); box-shadow: inset 0 -1px var(--line); }
  .aba {
    flex: none; min-height: 44px; padding: 0 10px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-15); font-weight: 500; color: var(--muted); white-space: nowrap;
    transition: color .15s, box-shadow .15s;
  }
  .aba:first-child { padding-left: 0; }
  .aba:hover { color: var(--ink); }
  .aba[aria-pressed="true"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px var(--ink); }
  .aba small { font-size: var(--fs-12); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
  .aba:focus-visible { outline-offset: -2px; }

  .chips { gap: var(--sp-2); padding: 6px 0; }
  .chip {
    position: relative; flex: none; min-height: 34px; padding: 0 var(--sp-3);
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-13); font-weight: 500; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
    transition: border-color .15s, background .15s;
  }
  .chip::after { content: ""; position: absolute; inset: -5px 0; } /* alvo de 44 px */
  .chip:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); }
  .chip:active { opacity: .7; }
  .chip small { font-size: var(--fs-11); color: var(--muted); font-variant-numeric: tabular-nums; }
  .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
  .chip[aria-pressed="true"] small { color: inherit; opacity: .75; }
  .chip:focus-visible { outline-offset: -1px; }

  /* ---------- resumo da lista ---------- */
  .resumo { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-4); color: var(--muted); font-size: var(--fs-13); }
  .resumo-linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-3); min-height: 44px; }
  .contagem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); min-width: 0; }
  .contagem > span:first-child { color: var(--ink); font-weight: 600; }
  .atualizado { font-size: var(--fs-12); }
  .atualizado:not(:empty)::before { content: "·"; margin-right: var(--sp-2); color: var(--muted); }
  .atualizado.atrasado { color: var(--warn); font-weight: 600; }
  .ordem {
    flex: none; min-height: 44px; padding: 0 28px 0 var(--sp-3); margin-right: -4px;
    font-size: var(--fs-13); font-weight: 600; color: var(--ink);
    background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
  }
  .ordem:hover { background-color: var(--surface-2); }
  .ordem option { color: CanvasText; background: Canvas; }
  .ativos { display: flex; gap: 6px; flex-wrap: wrap; }
  .tag {
    position: relative; min-height: 32px; padding: 0 var(--sp-2) 0 var(--sp-3);
    display: inline-flex; align-items: center; gap: 2px;
    font-size: var(--fs-13); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums;
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  }
  .tag::after { content: ""; position: absolute; inset: -6px 0; }
  .tag span { color: var(--muted); }
  .tag:hover { border-color: var(--ink); }

  /* ---------- card ---------- */
  .card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; text-align: left; color: inherit; border-radius: var(--r-sm); }
  .card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  /*
   * 4:5 e não quadrado: a foto do ERP é retrato (~2:3). Num 4:5 ela ocupa ~81% da largura (no quadrado, ~65%),
   * ~25% mais foto no mesmo card; é também o formato da imagem de compartilhar.
   */
  .foto {
    position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
    background: var(--foto); border-radius: var(--r-sm);
  }
  /* de ponta a ponta: 2% de respiro por lado; o teto de 2× o tamanho natural vem do JS (max-width/height) */
  .foto img {
    position: absolute; inset: 0; margin: auto;
    width: 96%; height: 96%; object-fit: contain;
    transition: transform .3s var(--ease);
  }
  @media (hover: hover) { .card:hover .foto img { transform: scale(1.03); } }
  .card:active .foto { opacity: .92; }
  .card[data-saldo="0"] .foto img { opacity: .5; }
  .vazia::before { /* "G" claro no lugar da foto */
    content: "G"; position: absolute; inset: 0; display: grid; place-items: center;
    font: 600 var(--fs-48)/1 var(--sans); color: var(--foto-vazio);
  }
  .vazia .sem { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: var(--fs-12); color: var(--foto-vazio-txt); }

  .card-t { display: grid; gap: 2px; min-width: 0; }
  .desc {
    font-size: var(--fs-14); font-weight: 600; line-height: 1.3; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  }
  .meta { font-size: var(--fs-13); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .meta:empty { display: none; }
  .preco { margin-top: 4px; font-size: var(--fs-17); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .preco[data-consulta] { font-size: var(--fs-14); font-weight: 500; color: var(--muted); letter-spacing: 0; }
  .card .cod { margin-top: 4px; font-size: var(--fs-12); color: var(--muted); overflow-wrap: anywhere; }
  .saldos {
    font-size: var(--fs-12); line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .saldos .ponto { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--stock); margin-right: 6px; vertical-align: 1px; }
  .saldos .minha { font-weight: 700; }
  .saldos.zero { color: var(--muted); }
  /* Peça só em consignação/conserto etc.: rótulo de alerta discreto, sem cor de saldo. */
  .card[data-sem-venda] .saldos.zero { color: var(--warn); font-weight: 600; }
  .outros-est {
    font-size: var(--fs-12); line-height: 1.4; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  @media (min-width: 600px) { .desc { font-size: var(--fs-15); } .preco { font-size: var(--fs-20); } }

  /* esqueleto: pulso lento de opacidade */
  .esqueleto { pointer-events: none; }
  .esqueleto .foto, .esqueleto .l { background: var(--surface-2); animation: pulso 1.8s ease-in-out infinite alternate; }
  .esqueleto .l { display: block; height: 12px; border-radius: var(--r-xs); margin-top: 4px; }
  .esqueleto .l-curta { width: 40%; }
  .esqueleto .l-media { width: 70%; }
  .esqueleto .l-ficha { height: 14px; margin-bottom: 10px; }
  .esqueleto .l-ficha:nth-child(odd) { width: 80%; }
  @keyframes pulso { from { opacity: .5; } to { opacity: .9; } }

  /* ---------- vazio / falha ---------- */
  .vazio { grid-column: 1 / -1; display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-12) var(--sp-4); text-align: center; color: var(--muted); }
  .vazio h2 { font-size: var(--fs-20); font-weight: 600; line-height: 1.3; color: var(--ink); max-width: 32ch; overflow-wrap: anywhere; }
  .vazio p { font-size: var(--fs-14); max-width: 46ch; }
  .vazio-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); }
  .n-saida { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
  /* ---------- exibição: grade/lista e tamanho ---------- */
  .resumo-acoes { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
  .exibir { display: flex; align-items: center; gap: 2px; }
  .exibir-btn {
    min-width: 36px; min-height: 36px; padding: 0 6px; display: inline-grid; place-items: center;
    font-size: var(--fs-12); font-weight: 700; color: var(--muted); border-radius: var(--r-sm);
  }
  .exibir-btn:hover { color: var(--ink); background: var(--surface-2); }
  .exibir-btn[aria-pressed="true"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
  .exibir-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .exibir-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }

  /* ---------- card em lista ---------- */
  .grade[data-vista="lista"] .card { flex-direction: row; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .grade[data-vista="lista"] .card .foto { flex: none; width: 88px; }
  .grade[data-vista="lista"][data-tamanho="p"] .card .foto { width: 64px; }
  .grade[data-vista="lista"][data-tamanho="g"] .card .foto { width: 128px; }
  .grade[data-vista="lista"] .card-t { flex: 1; min-width: 0; }
  .grade[data-vista="lista"] .card.esqueleto { border-bottom: 0; }
  .grade[data-vista="lista"] .vazia::before { font-size: var(--fs-28); }
  .grade[data-vista="lista"] .vazia .sem { display: none; }

  /* ---------- estado das fotos e paginação ---------- */
  .fotos-estado { min-height: 0; margin-top: var(--sp-4); text-align: center; font-size: var(--fs-13); color: var(--muted); }
  .fotos-estado:empty { display: none; }
  .fotos-estado .btn-link { min-height: 36px; font-size: inherit; }
  .paginacao { display: grid; justify-items: center; gap: var(--sp-3); margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
  .paginacao[hidden] { display: none; }
  .pg-info { font-size: var(--fs-13); color: var(--muted); font-variant-numeric: tabular-nums; }
  .pg-botoes { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); max-width: 100%; }
  .pg-nums { display: flex; align-items: center; gap: 2px; }
  .pg {
    min-width: 44px; min-height: 44px; padding: 0 var(--sp-3); display: inline-grid; place-items: center;
    font-size: var(--fs-14); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
    border: 1px solid transparent; border-radius: var(--r-sm);
  }
  .pg:hover:not(:disabled) { background: var(--surface-2); }
  .pg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .pg:disabled { color: var(--muted); opacity: var(--op-desab); cursor: default; }
  .pg[aria-current="page"] { background: var(--ink); color: var(--bg); }
  .pg-nav { border-color: var(--line); white-space: nowrap; }
  .pg-gap { min-width: 24px; text-align: center; color: var(--muted); }
  .pg-extra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); }
  .pg-form { display: flex; align-items: center; gap: var(--sp-1); }
  .pg-ir { width: 76px; min-height: 44px; padding: 0 var(--sp-2); text-align: center; }
  .pg-por { margin: 0; }
  /* celular: só a página atual entre "Anterior" e "Próxima" (o "Ir para" cobre os saltos) */
  @media (max-width: 599px) {
    .pg-num:not([aria-current]), .pg-gap { display: none; }
    .pg-nav { flex: 1; }
    .pg-botoes { width: 100%; }
  }

  /* ---------- filtros (folha e lateral) ---------- */
  .bloco-filtro { display: grid; gap: var(--sp-3); }
  .segmentos { display: flex; flex-wrap: wrap; gap: 6px; }
  .seg {
    position: relative; min-height: 36px; padding: 0 14px; font-size: var(--fs-13); font-weight: 500;
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  }
  .seg::after { content: ""; position: absolute; inset: -4px -1px; } /* alvo de 44 px */
  .seg:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); }
  .seg[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
  .seg:focus-visible { outline-offset: 1px; }
  .filtro-busca { min-height: 44px; }
  .opcoes-lista { display: grid; max-height: 288px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); }
  .opcao {
    min-height: 44px; padding: 0 var(--sp-2) 0 24px; position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    text-align: left; font-size: var(--fs-14); border-bottom: 1px solid var(--line);
  }
  .opcao::before {
    content: ""; position: absolute; left: 2px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
    border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink) 40%, var(--line));
  }
  .opcao:hover { background: var(--surface-2); }
  .opcao[aria-pressed="true"] { font-weight: 600; }
  .opcao[aria-pressed="true"]::before { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--surface); }
  .opcao small { color: var(--muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
  .opcao:focus-visible { outline-offset: -2px; }
  .nada { color: var(--muted); font-size: var(--fs-13); padding: var(--sp-3) 0; }

  /* ---------- faixa de preço: dois ranges sobrepostos ---------- */
  .faixa-trilho { position: relative; height: 44px; --a: 0%; --b: 100%; margin: 0 2px; }
  .faixa-trilho::before, .faixa-cheio {
    content: ""; position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: var(--r-xs); pointer-events: none;
  }
  .faixa-trilho::before { left: 0; right: 0; background: var(--line); }
  .faixa-cheio { left: var(--a); right: calc(100% - var(--b)); background: var(--ink); }
  .faixa-r {
    position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; background: none;
    appearance: none; -webkit-appearance: none; pointer-events: none; z-index: 1;
  }
  .faixa-r.topo { z-index: 2; }
  .faixa-r::-webkit-slider-runnable-track { height: 44px; background: none; }
  .faixa-r::-moz-range-track { height: 4px; background: none; }
  /* alça de 24 px visíveis com área de toque de 44 px (borda transparente) */
  .faixa-r::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto; cursor: grab;
    width: 44px; height: 44px; border-radius: 50%; border: 10px solid transparent;
    background: var(--surface) padding-box; box-shadow: inset 0 0 0 2px var(--ink);
  }
  .faixa-r::-moz-range-thumb {
    pointer-events: auto; cursor: grab;
    width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface);
  }
  .faixa-r:active::-webkit-slider-thumb { cursor: grabbing; }
  .faixa-r:focus { outline: none; }
  .faixa-r:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); background-clip: padding-box; }
  .faixa-r:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
  .faixa-campos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--sp-2); }
  .faixa-campo { display: grid; gap: 4px; min-width: 0; }
  .faixa-rot { font-size: var(--fs-12); color: var(--muted); }
  .faixa-in { position: relative; display: block; }
  .faixa-in > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: var(--fs-14); pointer-events: none; }
  .faixa-t { min-height: 44px; padding-left: 38px; padding-right: 8px; font-variant-numeric: tabular-nums; }
  .faixa-sep { padding-bottom: 12px; color: var(--muted); }
  .faixa .dica { font-size: var(--fs-12); }

  .interruptor { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 48px; font-size: var(--fs-15); cursor: pointer; }
  .interruptor input {
    appearance: none; -webkit-appearance: none; margin: 0; flex: none; position: relative; cursor: pointer;
    width: 46px; height: 28px; border-radius: 14px;
    background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--ink) 35%, var(--line));
    transition: background .2s, border-color .2s;
  }
  .interruptor input::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--muted); transition: transform .2s var(--ease), background .2s;
  }
  .interruptor input:checked { background: var(--ink); border-color: var(--ink); }
  .interruptor input:checked::after { transform: translateX(18px); background: var(--on-ink); }

  .lateral { display: grid; gap: var(--sp-6); align-content: start; }
  .lateral-topo { display: flex; align-items: center; justify-content: space-between; min-height: 44px; border-bottom: 1px solid var(--line); }
  .lateral-topo .sobrelinha { font-size: var(--fs-15); color: var(--ink); }
  @media (max-width: 1023px) { .lateral { display: none; } }

  /* ---------- folhas (diálogos) ---------- */
  dialog {
    padding: 0; border: 0; margin: 0; max-width: none; max-height: none;
    color: var(--ink); background: var(--surface);
  }
  dialog::backdrop { background: var(--scrim); }
  .folha[open] {
    position: fixed; inset: auto 0 0 0; width: 100%; max-height: 92dvh;
    display: flex; flex-direction: column;
    border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sombra-folha);
    animation: sobe .28s var(--ease);
  }
  .folha::backdrop { animation: aparece .2s ease-out; }
  @keyframes sobe { from { transform: translateY(32px); opacity: 0; } }
  @keyframes aparece { from { opacity: 0; } }
  .folha-topo {
    position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    padding: 14px var(--sp-2) 2px var(--sp-6);
  }
  .alca { position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px; border-radius: var(--r-xs); background: var(--line); }
  .folha-topo h2 { font-size: var(--fs-20); font-weight: 600; line-height: 1.25; }
  .folha-corpo {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--sp-3) var(--sp-6) var(--sp-6); display: grid; gap: var(--sp-6); align-content: start;
  }
  .folha-pe {
    flex: none; display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-6) calc(var(--sp-3) + var(--safe-b));
    border-top: 1px solid var(--line); background: var(--surface);
  }
  .folha-pe .btn { flex: 1; padding: 0 var(--sp-4); }
  .folha-pe .btn-link { flex: none; }
  .folha.pequena .folha-corpo { gap: var(--sp-4); padding-bottom: calc(var(--sp-6) + var(--safe-b)); }

  .lojas-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .loja-op {
    min-height: 56px; padding: 6px var(--sp-2); display: grid; place-content: center; gap: 2px; text-align: center;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  }
  .loja-op:first-child { grid-column: 1 / -1; }
  .loja-op b { font-size: var(--fs-15); font-weight: 600; }
  .loja-op small { font-size: var(--fs-12); color: var(--muted); overflow-wrap: anywhere; }
  .loja-op:hover { border-color: var(--ink); }
  .loja-op[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
  .loja-op[aria-pressed="true"] small { color: inherit; opacity: .8; }
  .quem { display: grid; gap: 2px; }
  .quem small { color: var(--muted); font-size: var(--fs-13); }
  .com-icone { gap: var(--sp-2); }

  /* ---------- detalhe ---------- */
  .folha.detalhe .folha-topo { justify-content: flex-end; padding: 10px var(--sp-2) 0; }
  .folha.detalhe .folha-corpo { padding-top: 0; gap: var(--sp-6); }
  .det-cab { display: grid; gap: var(--sp-4); }
  .det-foto {
    position: relative; display: block; width: calc(100% + var(--sp-6) * 2); margin: 0 calc(var(--sp-6) * -1);
    height: min(100vw, 52dvh); background: var(--foto); overflow: hidden;
  }
  button.det-foto { cursor: zoom-in; }
  .det-foto img { position: absolute; inset: 0; margin: auto; width: 96%; height: 96%; object-fit: contain; }
  .det-foto.vazia::before { font-size: var(--fs-72); }
  .det-foto .ampliar {
    position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; display: grid; place-items: center;
    border-radius: 50%; color: var(--foto-ink); background: var(--foto-ink-fundo);
  }
  .det-foto:focus-visible { outline-offset: -3px; outline-color: var(--foto-ink); }
  .det-t { min-width: 0; display: grid; gap: 6px; }
  .det-t .cod { font-size: var(--fs-13); color: var(--muted); }
  .cod-rot { color: var(--muted); }
  .det-t h3 { font-size: var(--fs-20); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
  .det-preco { margin: 2px 0 2px; }
  .det-preco .valor { font-size: var(--fs-28); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .det-preco .valor[data-consulta] { font-size: var(--fs-17); font-weight: 500; color: var(--muted); letter-spacing: 0; }
  .det-resumo { font-size: var(--fs-15); color: var(--muted); }
  .det-resumo:empty { display: none; }
  .det-saldo-slot { margin-top: var(--sp-3); }
  .col { display: grid; gap: var(--sp-6); align-content: start; }
  .bloco { display: grid; gap: var(--sp-2); }
  .bloco.esqueleto { gap: 0; }
  .det-desc { color: var(--ink); font-size: var(--fs-15); overflow-wrap: anywhere; }

  .lojas { border-top: 1px solid var(--line); }
  .lojas li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .loja-n { display: grid; gap: 1px; min-width: 0; }
  .loja-nome { font-size: var(--fs-15); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
  .loja-n small { font-size: var(--fs-12); color: var(--muted); }
  .loja-n .sua { font-size: var(--fs-11); font-weight: 600; color: var(--accent); }
  .lojas li[data-minha] .loja-nome { font-weight: 600; }
  .lojas .q { font-size: var(--fs-17); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  .lojas li[data-zero] .q { color: var(--muted); font-weight: 400; }
  .lojas li.sem { justify-content: center; color: var(--muted); font-size: var(--fs-13); }
  .total { display: flex; justify-content: space-between; padding-top: var(--sp-1); color: var(--muted); font-size: var(--fs-13); }
  .total b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .det-saldo .btn-link { justify-self: start; padding-left: 0; }

  .tamanhos { border-top: 1px solid var(--line); }
  .tamanhos li { display: flex; align-items: baseline; gap: var(--sp-3); min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-15); }
  .tam { flex: none; min-width: 72px; font-weight: 600; }
  .tam-lojas { color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .tam-lojas .minha { color: var(--ink); font-weight: 700; }

  .ficha { display: grid; grid-template-columns: minmax(112px, auto) 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-15); }
  .ficha dt { color: var(--muted); font-size: var(--fs-14); padding-top: 1px; }
  .ficha dd { overflow-wrap: anywhere; }
  .ficha dd.pequeno { font-size: var(--fs-13); color: var(--muted); }

  .pedras { border-top: 1px solid var(--line); }
  .pedras li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--sp-3); min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-15); font-variant-numeric: tabular-nums; }
  .pedras li small { font-size: var(--fs-12); font-weight: 600; letter-spacing: .02em; color: var(--muted); }
  .outros .tam { min-width: 0; flex: 0 1 auto; font-weight: 500; }
  .det-outros { margin-top: var(--sp-4); }

  .folha.detalhe .folha-pe .btn.compartilhar { flex: 1.4; }

  /* ---------- compartilhar ---------- */
  .comp-previa {
    position: relative; justify-self: center; width: min(100%, 300px); aspect-ratio: 1080 / 1350;
    background: var(--foto); border-radius: var(--r-sm); overflow: hidden;
    box-shadow: 0 0 0 1px var(--line), 0 8px 24px -12px rgba(0, 0, 0, .25);
  }
  .comp-img { width: 100%; height: 100%; object-fit: contain; }
  .comp-img:not([src]) { visibility: hidden; }
  .comp-gerando { position: absolute; inset: 0; display: none; place-items: center; font-size: var(--fs-13); color: var(--foto-vazio-txt); background: rgba(255, 255, 255, .7); }
  .comp-previa[aria-busy="true"] .comp-gerando { display: grid; }
  .comp-valor { margin-left: 6px; color: var(--muted); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
  .folha.compartilhar .folha-corpo { gap: var(--sp-4); }

  /* ---------- visualizador de foto (branco puro) ---------- */
  dialog.visor[open] {
    position: fixed; inset: 0; width: 100%; height: 100%;
    background: var(--foto); color: var(--foto-ink); display: block;
    animation: aparece .18s ease-out;
  }
  .visor::backdrop { background: var(--foto); }
  .visor-palco {
    position: absolute; inset: 0; display: grid; place-items: center;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    padding: calc(56px + var(--safe-t)) var(--sp-4) calc(var(--sp-6) + var(--safe-b));
    cursor: zoom-out;
  }
  .visor-palco img { width: 100%; height: 100%; object-fit: contain; }
  .visor-fechar {
    position: absolute; z-index: 1; top: calc(var(--sp-2) + var(--safe-t)); right: var(--sp-2);
    color: var(--foto-ink); background: var(--foto-ink-fundo);
  }
  .visor-fechar:hover { color: var(--foto-ink); background: #E4E4E4; }
  .visor :focus-visible { outline-color: var(--foto-ink); }

  /* ---------- leitor de código de barras (câmera em tela cheia) ---------- */
  dialog.leitor[open] {
    position: fixed; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden;
    background: #000; color: var(--foto); animation: aparece .18s ease-out;
  }
  .leitor::backdrop { background: #000; }
  .leitor-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* moldura clean: cantos brancos e o resto da imagem escurecido */
  .leitor-mira {
    position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
    width: min(84vw, 440px); aspect-ratio: 16 / 9; border-radius: 4px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
    background:
      linear-gradient(#FFF, #FFF) left top / 28px 3px, linear-gradient(#FFF, #FFF) left top / 3px 28px,
      linear-gradient(#FFF, #FFF) right top / 28px 3px, linear-gradient(#FFF, #FFF) right top / 3px 28px,
      linear-gradient(#FFF, #FFF) left bottom / 28px 3px, linear-gradient(#FFF, #FFF) left bottom / 3px 28px,
      linear-gradient(#FFF, #FFF) right bottom / 28px 3px, linear-gradient(#FFF, #FFF) right bottom / 3px 28px;
    background-repeat: no-repeat;
    outline: 1px solid rgba(255, 255, 255, .28);
  }
  .leitor-linha {
    position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; border-radius: 1px;
    background: var(--foto); opacity: .85; box-shadow: 0 0 10px rgba(255, 255, 255, .6);
    animation: varre 2.2s ease-in-out infinite alternate;
  }
  @keyframes varre { from { top: 14%; } to { top: 86%; } }
  .leitor:not([data-estado="procurando"]) .leitor-linha { display: none; }
  .leitor-topo {
    position: absolute; z-index: 1; top: calc(var(--sp-2) + var(--safe-t)); left: calc(var(--sp-2) + var(--safe-l)); right: calc(var(--sp-2) + var(--safe-r));
    display: flex; flex-direction: row-reverse; justify-content: space-between;
  }
  .leitor-ic { min-width: 48px; min-height: 48px; border-radius: 50%; color: var(--foto); background: rgba(0, 0, 0, .45); }
  .leitor-ic:hover { color: var(--foto); background: rgba(0, 0, 0, .65); }
  .leitor-ic[aria-pressed="true"] { color: var(--foto-ink); background: var(--foto); }
  .leitor-base {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    display: grid; gap: var(--sp-3); justify-items: center; text-align: center;
    padding: var(--sp-8) calc(var(--gutter) + var(--safe-r)) calc(var(--sp-6) + var(--safe-b)) calc(var(--gutter) + var(--safe-l));
    background: linear-gradient(transparent, rgba(0, 0, 0, .72) 40%);
  }
  .leitor-dica { font: 600 var(--fs-17)/1.35 var(--sans); max-width: 30ch; }
  .leitor-estado { font-size: var(--fs-14); color: rgba(255, 255, 255, .82); max-width: 44ch; min-height: 1.45em; overflow-wrap: anywhere; }
  .leitor-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
  .leitor-acoes:empty { display: none; }
  .leitor .btn { min-height: 48px; background: var(--foto); color: var(--foto-ink); border-color: var(--foto); }
  .leitor .btn.sec { background: transparent; color: var(--foto); border-color: rgba(255, 255, 255, .6); }
  .leitor .btn.sec:hover { border-color: var(--foto); }
  .leitor :focus-visible { outline-color: var(--foto); }
  /* sem câmera rodando (erro, não encontrado, pausa): sem mira, mensagem no centro */
  .leitor:is([data-estado="erro"], [data-estado="nao-encontrado"], [data-estado="pausado"]) .leitor-mira,
  .leitor:is([data-estado="erro"], [data-estado="nao-encontrado"], [data-estado="pausado"]) .leitor-dica { display: none; }
  .leitor:is([data-estado="erro"], [data-estado="nao-encontrado"], [data-estado="pausado"]) .leitor-base { top: 0; align-content: center; background: none; }
  .leitor:is([data-estado="erro"], [data-estado="nao-encontrado"], [data-estado="pausado"], [data-estado="lido"]) .leitor-estado {
    font: 600 var(--fs-17)/1.4 var(--sans); color: var(--foto);
  }

  /* ---------- folhas viram modal ---------- */
  @media (min-width: 760px) {
    .folha[open] {
      inset: 0; margin: auto; height: fit-content; width: min(920px, 92vw); max-height: 88dvh;
      border-radius: var(--r-md); box-shadow: var(--sombra-modal);
      animation: surge .2s ease-out;
    }
    @keyframes surge { from { transform: translateY(8px); opacity: 0; } }
    .folha.filtros[open] { width: min(520px, 92vw); }
    .folha.pequena[open] { width: min(440px, 92vw); }
    .folha.compartilhar[open] { width: min(460px, 92vw); }
    .alca { display: none; }
    .folha-topo { padding-top: var(--sp-2); }
    .folha-pe { padding-bottom: var(--sp-3); }

    .folha.detalhe .folha-corpo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-6) var(--sp-8); padding: 0 var(--sp-8) var(--sp-8); }
    .det-cab { display: contents; }
    .folha.detalhe .det-foto {
      grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 0; align-self: start;
      width: auto; margin: 0; height: auto; aspect-ratio: 4 / 5; max-height: 72dvh; border-radius: var(--r-sm);
    }
    .folha.detalhe .det-t, .folha.detalhe .col { grid-column: 2; }
    .det-t h3 { font-size: var(--fs-24); }
    .det-preco .valor { font-size: var(--fs-32); }
    .comp-previa { width: 340px; }
  }

  /* ---------- toast (popover na top layer) ---------- */
  #toast {
    position: fixed; inset: auto auto calc(24px + var(--safe-b)) 50%; margin: 0;
    transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
    max-width: min(90vw, 420px); padding: 12px 18px; border: 0; border-radius: var(--r-md);
    background: var(--ink); color: var(--on-ink); font: 500 var(--fs-14)/1.4 var(--sans); text-align: center;
    box-shadow: 0 8px 24px -8px rgba(10, 10, 10, .4); overflow: visible;
    transition: opacity .16s ease-out, transform .16s ease-out;
  }
  #toast.on { opacity: 1; transform: translate(-50%, 0); }
  body:has(dialog.folha[open]) #toast { bottom: calc(96px + var(--safe-b)); }
}

/* ================= utilitários ================= */
@layer utilities {
  .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after, ::backdrop {
      animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
    .card:hover .foto img { transform: none; }
    #toast { transition: opacity .16s !important; transform: translate(-50%, 0); }
    #toast.on { transform: translate(-50%, 0); }
    .leitor-linha { animation: none !important; top: 50%; }
  }
}

/* ---------- complementos (seleção, catálogo em PDF, exibição, offline, revisões) ---------- */
@layer components {
/* ---------- seleção e catálogo em PDF ---------- */

  .exibir-sel { padding: 0 var(--sp-3); }
  .sel-marca {
    display: none; position: absolute; top: 8px; left: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,.92); border: 2px solid var(--ink); place-items: center;
  }
  .grade[data-selecionando] .sel-marca { display: grid; }
  .card[data-sel] .sel-marca { background: var(--ink); }
  .card[data-sel] .sel-marca::after {
    content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(0, -1px) rotate(45deg);
  }
  .card[data-sel] .foto { outline: 2px solid var(--ink); outline-offset: -2px; }
  .grade[data-selecionando] .card { cursor: pointer; }
  .grade[data-vista="lista"] .sel-marca { top: 50%; left: auto; right: 4px; margin-top: -13px; }

  .barra-sel {
    position: fixed; z-index: var(--z-sticky); left: 0; right: 0; bottom: 0;
    display: grid; gap: var(--sp-2); max-width: 720px; margin: 0 auto;
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-b));
    background: var(--bg); border-top: 1px solid var(--line); box-shadow: var(--sombra-barra);
  }
  .barra-sel[hidden] { display: none; }
  .sel-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .sel-info { display: grid; gap: 2px; font-size: var(--fs-14); min-width: 0; }
  .sel-info small { color: var(--warn); font-size: var(--fs-12); }
  .sel-acoes { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
  .sel-acoes .btn { min-height: 44px; padding: 0 var(--sp-4); }
  [data-barra-sel] main { padding-bottom: calc(160px + var(--safe-b)); }
  .marcar { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: var(--fs-14); cursor: pointer; }
  .marcar input { width: 20px; height: 20px; accent-color: var(--ink); }

/* correções da revisão: controles em celular estreito, seleção no tema escuro, barra fixa sobre toast/lateral */

  .resumo-acoes, .exibir { flex-wrap: wrap; justify-content: flex-end; }
  .sel-marca { background: color-mix(in srgb, var(--surface) 92%, transparent); }
  .card[data-sel] .sel-marca::after { border-color: var(--on-ink); }
  .pg[aria-current="page"] { color: var(--on-ink); }
  [data-barra-sel] #toast { bottom: calc(128px + var(--safe-b)); }
  [data-barra-sel] .lateral { padding-bottom: 140px; }


  .aviso-saldo { margin: -4px 0 var(--sp-3); font-size: var(--fs-12); color: var(--muted); }


  .sel-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 50vh; overflow: auto; }
  .sel-lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
  .sel-nome { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-14); }
  .sel-nome b { overflow-wrap: anywhere; font-weight: 600; }
  .sel-nome small { color: var(--muted); font-size: var(--fs-12); }
  .novidades { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--surface); font-size: var(--fs-13); }
  .novidades p { margin: 0; }

/* topo compacto no celular: só a busca fica fixa; abas e categorias rolam com a página; exibição atrás de um botão */

  .exibir-mais { display: none; }
  @media (max-width: 599px) {
    .exibir-mais { display: inline-grid; }
    .exibir > .exibir-btn:not(.exibir-sel):not(.exibir-mais), .exibir > .exibir-sep-tam { display: none; }
    .barra { display: contents; }
    .barra > .busca {
      position: sticky; top: var(--safe-t); z-index: var(--z-sticky); background: var(--bg);
      margin: 0 calc(var(--gutter) * -1); padding: var(--sp-2) var(--gutter);
    }
    [data-rolou] .barra > .busca { box-shadow: 0 1px 0 var(--line); }
    .barra > .abas, .barra > .chips { background: var(--bg); }
  }


  .faixa-offline {
    position: sticky; top: 0; z-index: 40; padding: 6px var(--gutter); text-align: center;
    font-size: var(--fs-13); font-weight: 600; background: var(--warn); color: #fff;
  }
  .faixa-offline[hidden] { display: none; }
  @media (max-width: 599px) { .exibir-btn { min-height: 44px; min-width: 44px; } }
}

@layer components {
  .grade[data-tamanho="p"] .preco { font-size: var(--fs-15); }
  @media (min-width: 1024px) {
    .barra-sel { border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; }
  }
  .mostrar-senha { justify-self: end; min-height: 36px; }
}

/* modo cliente (html[data-cliente]): nada de saldo, lojas, estoques nem dados internos na tela */
@layer components {
  [data-cliente] .saldos, [data-cliente] .outros-est, [data-cliente] .det-saldo-slot, [data-cliente] .det-tamanhos,
  [data-cliente] .loja-btn, [data-cliente] .atualizado, [data-cliente] [data-interno] { display: none !important; }
  [data-cliente] .card[data-saldo="0"] .foto img { opacity: 1; }
  .pilula-cliente {
    position: fixed; z-index: 50; left: 50%; bottom: calc(var(--sp-3) + var(--safe-b)); transform: translateX(-50%);
    display: flex; align-items: center; gap: var(--sp-3); max-width: calc(100vw - 2 * var(--gutter)); padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-size: var(--fs-13); box-shadow: var(--sombra-modal);
  }
  .pilula-cliente[hidden] { display: none; }
  .pilula-cliente .btn-link { color: var(--on-ink); min-height: 36px; font-size: var(--fs-13); }
  [data-barra-sel] .pilula-cliente { bottom: calc(150px + var(--safe-b)); }
}

/* consignado de terceiros: marca interna (some no modo cliente junto com o saldo) */
@layer components {
  .saldos .consig { font-size: 0.7em; font-weight: 700; color: var(--muted); margin-left: 1px; cursor: help; }
  .loja-n .consig-nota { font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
  .loja-n .consig-nota::before { content: "● "; font-size: 0.7em; color: var(--accent); }
}

/* filtros: escolha múltipla (caixa com ✓) × escolha única (controle segmentado) */
@layer components {
  .bloco-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 24px; }
  .bloco-cab .varias { font-weight: 500; text-transform: none; }
  .limpar-grupo, .ver-todas { min-height: 44px; justify-self: start; font-size: var(--fs-13); }
  .bloco-cab .limpar-grupo { min-height: 32px; }
  .chip-m {
    position: relative; min-height: 40px; padding: 0 var(--sp-3) 0 var(--sp-2); display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--fs-13); font-weight: 500; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  }
  .chip-m::after { content: ""; position: absolute; inset: -2px 0; } /* alvo de 44 px */
  .chip-m::before, .opcao-m::before {
    content: ""; flex: none; width: 16px; height: 16px; display: grid; place-items: center; box-sizing: border-box;
    border: 1.5px solid color-mix(in srgb, var(--ink) 40%, var(--line)); border-radius: var(--r-xs); font: 700 11px/1 var(--sans);
  }
  .chip-m[aria-pressed="true"]::before, .opcao-m[aria-pressed="true"]::before { content: "✓"; background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
  .chip-m[aria-pressed="true"] { background: var(--surface-2); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
  .chip-m:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); }
  .chip-m:focus-visible { outline-offset: 2px; }
  .chip-m small, .opcao-m small { color: var(--muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
  .opcao-m {
    min-height: 44px; padding: 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-3); text-align: left;
    font-size: var(--fs-14); border-bottom: 1px solid var(--line);
  }
  .opcao-m span { flex: 1; }
  .opcao-m:hover { background: var(--surface-2); }
  .opcao-m[aria-pressed="true"] { font-weight: 600; }
  .opcao-m:focus-visible { outline-offset: -2px; }
  .segmentos.unico {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 2px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  }
  .segmentos.unico .seg { min-height: 40px; padding: 0 var(--sp-2); border: 0; border-radius: var(--r-xs); background: transparent; line-height: 1.2; }
  .segmentos.unico .seg::after { display: none; }
  .segmentos.unico .seg[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); font-weight: 600; }
}

@layer components {
  /* listas de escolha múltipla: no celular crescem com "Ver todas" (sem rolagem aninhada); na lateral rolam */
  .bloco-filtro .opcoes-lista { max-height: none; overflow: visible; }
  .lateral .bloco-filtro .opcoes-lista { max-height: 380px; overflow-y: auto; }
}