/* ==========================================================================
   Catálogo — sistema de design "sala de máquinas"
   --------------------------------------------------------------------------
   O escuro é o teatro (hero, telemetria, barra de comando, rodapé).
   O claro é o palco onde a peça fica (grade e cards).
   Nenhuma dependência: sem Bootstrap, sem jQuery. Só tokens + componentes.

   Ordem das seções (use como índice ao editar):
     01 tokens · 02 base · 03 utilitários · 04 ícones · 05 abertura
     06 hero   · 06b letreiro de marcas · 07 telemetria
     08 barra de comando · 09 títulos
     10 ofertas · 11 grade de produtos · 12 sacola flutuante
     13 diálogos (base) · 14 diálogo do produto · 15 lightbox
     16 diálogo da sacola · 17 formulários · 18 rodapé · 19 movimento
   ========================================================================== */

/* -- 01 tokens ------------------------------------------------------------ */
:root {
    /* superfícies escuras — o teatro */
    --graphite: #0a0d0c;
    --machine: #141a17;
    --machine-up: #1e2622;
    --edge-dark: rgba(255, 255, 255, .11);
    --edge-dark-soft: rgba(255, 255, 255, .06);

    /* superfícies claras — o palco */
    --bone: #f4f3ef;
    --plate: #ffffff;
    --plate-sunk: #eceae3;
    --line: #e1dfd7;
    --line-soft: #eeece5;

    /* tinta */
    --ink: #101412;
    --ink-soft: #3c443e;
    --muted: #69736e;
    --on-dark: #eef0ec;
    --on-dark-muted: #96a09a;

    /* sinal — âmbar de painel de instrumento, o único acento */
    --signal: #e8912c;
    --signal-deep: #92550a;   /* mesma cor legível sobre fundo claro (5.6:1) */
    --signal-wash: rgba(232, 145, 44, .13);
    --field: #2f8a53;         /* status positivo: loja aberta, frete grátis */
    --alert: #b8391f;

    /* marca do lojista — injetada pelo PHP, usada só nas ações principais */
    --brand: #14231c;
    --brand-on: #ffffff;

    /* forma */
    --r-xs: 3px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-full: 999px;
    --shell: min(1240px, calc(100% - 32px));

    /* tipografia */
    --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
    --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

    /* movimento */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --fast: 150ms;
    --base: 260ms;
    --slow: 520ms;

    /* o navegador precisa saber o esquema para pintar controles e scrollbar */
    color-scheme: light;

    /* elevação */
    --lift-1: 0 1px 2px rgba(16, 20, 18, .05), 0 2px 8px rgba(16, 20, 18, .04);
    --lift-2: 0 2px 4px rgba(16, 20, 18, .06), 0 12px 28px rgba(16, 20, 18, .10);
    --lift-3: 0 18px 60px rgba(6, 12, 9, .30);
}

/* -- 02 base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bone);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    /* mata o atraso de 300ms no toque e o flash cinza padrão do Android */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
a, label, select, [role="tab"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-stretch: 112%;
    letter-spacing: -.01em;
    line-height: 1.02;
    text-wrap: balance;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

::selection { background: var(--signal); color: var(--graphite); }

/* -- 03 utilitários ------------------------------------------------------- */
.shell { width: var(--shell); margin-inline: auto; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.sr-only:focus-visible {
    top: 12px; left: 12px;
    z-index: 3100;
    width: auto; height: auto;
    margin: 0;
    padding: 11px 18px;
    overflow: visible;
    clip-path: none;
    border-radius: var(--r-sm);
    background: var(--signal);
    color: var(--graphite);
    font-weight: 600;
}

[hidden], .is-oculto { display: none !important; }

/* números que precisam alinhar em coluna: preço, cotação, contador */
.num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'zero' 1;
}

/* rótulo de instrumento: pequeno, espaçado, caixa-alta */
.rotulo {
    font-family: var(--mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* textura de filme, só sobre o escuro */
.grao::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* -- 04 ícones ------------------------------------------------------------ */
.ico {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ico-sm { width: 1em; height: 1em; }
.ico-lg { width: 1.5em; height: 1.5em; }
.ico-cheio { fill: currentColor; stroke: none; }

/* -- 05 abertura ---------------------------------------------------------- */
.abertura {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    background: var(--graphite);
    color: var(--on-dark);
    transition: opacity var(--base) var(--ease), visibility var(--base);
}
.abertura.saiu { opacity: 0; visibility: hidden; pointer-events: none; }
.abertura-inner { display: grid; justify-items: center; gap: 18px; }
.abertura-marca {
    width: 42px; height: 42px;
    border: 2px solid var(--edge-dark);
    border-top-color: var(--signal);
    border-radius: 50%;
    animation: girar 900ms linear infinite;
}
.abertura-txt { color: var(--on-dark-muted); }
@keyframes girar { to { transform: rotate(360deg); } }

/* -- 06 hero -------------------------------------------------------------- */
/* Letterbox: o formato largo é o que dá o corte cinematográfico. */
.hero {
    position: relative;
    isolation: isolate;
    min-height: clamp(400px, 44vw, 600px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--graphite);
    color: var(--on-dark);
}

.hero-quadro {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.06);
    background-position: center;
    background-size: cover;
    transition: opacity 1.1s var(--ease);
}
.hero-quadro.ativo {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1.1s var(--ease), transform 9s linear;
}

/* Vinheta em duas camadas: escurece a base para o texto e fecha as bordas. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(100deg, rgba(6, 9, 8, .95) 0%, rgba(6, 9, 8, .84) 28%, rgba(6, 9, 8, .46) 62%, rgba(6, 9, 8, .3) 100%),
        linear-gradient(to top, rgba(6, 9, 8, .92) 0%, rgba(6, 9, 8, .34) 46%, transparent 76%),
        radial-gradient(125% 85% at 45% 45%, transparent 28%, rgba(6, 9, 8, .5) 100%);
}
.hero::after { z-index: 2; }

.hero-conteudo {
    position: relative;
    z-index: 3;
    width: var(--shell);
    margin-inline: auto;
    padding: 0 0 clamp(34px, 5vw, 58px);
}

.hero-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--signal);
}
.hero-linha::after {
    content: "";
    height: 1px;
    flex: 1;
    max-width: 120px;
    background: linear-gradient(to right, var(--signal), transparent);
}

.hero-titulo {
    max-width: 14ch;
    margin: 0 0 16px;
    font-size: clamp(2.5rem, 6.2vw, 5rem);
    font-weight: 800;
    font-stretch: 118%;
    line-height: .86;
    letter-spacing: -.028em;
    text-transform: uppercase;
}

.hero-desc {
    max-width: 56ch;
    margin: 0;
    color: rgba(238, 240, 236, .8);
    font-size: clamp(.9rem, 1.1vw, 1.02rem);
    line-height: 1.6;
}

.hero-marcas {
    position: absolute;
    z-index: 4;
    right: max(16px, calc((100vw - 1240px) / 2));
    bottom: clamp(34px, 5vw, 58px);
    display: flex;
    gap: 8px;
}
.hero-marca {
    width: 26px; height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .3);
    transition: background var(--base) var(--ease);
}
.hero-marca.ativo { background: var(--signal); }

/* -- 06b letreiro de marcas -----------------------------------------------
   Mesma faixa da vitrine de máquinas: só logos, em laço contínuo. Sem nome
   escrito — a logo do fabricante já é reconhecida por quem compra a peça. */
.letreiro {
    background: var(--plate);
    border-block: 1px solid var(--line);
    overflow: hidden;
    padding-block: 24px;
    /* as bordas somem em fade — o letreiro não tem começo nem fim */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.letreiro-trilha {
    display: flex;
    width: max-content;
    animation: correr-letreiro var(--letreiro-duracao, 32s) linear infinite;
    will-change: transform;
}
.letreiro:hover .letreiro-trilha { animation-play-state: paused; }

.letreiro-lista {
    flex: none;
    display: flex;
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
    list-style: none;
    margin: 0;
    padding: 0 clamp(12px, 1.5vw, 24px);
}

.letreiro-lista li {
    width: clamp(170px, 14vw, 230px);
    height: 84px;
    display: grid;
    place-items: center;
    padding: 13px 22px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--logo-bg, linear-gradient(145deg, #fff, var(--plate-sunk)));
    box-shadow: var(--lift-1);
}

.letreiro-lista img {
    height: 54px;
    min-height: 54px;
    width: 100%;
    max-width: 190px;
    object-fit: contain;
    filter: saturate(.9) contrast(1.04);
    opacity: .88;
    transition: filter var(--base) var(--ease), opacity var(--base) var(--ease), transform var(--base) var(--ease);
}
.letreiro-lista li:hover img { filter: none; opacity: 1; transform: scale(1.06); }

@keyframes correr-letreiro {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--letreiro-distancia, 50%))); }
}

/* -- 07 telemetria -------------------------------------------------------- */
/* Dados reais (clima, cotação, câmbio) tratados como leitura de instrumento. */
.telemetria {
    position: relative;
    z-index: 5;
    background: var(--machine);
    border-block: 1px solid var(--edge-dark-soft);
    color: var(--on-dark);
    overflow: hidden;
}
.telemetria-inner {
    width: var(--shell);
    margin-inline: auto;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
}
.telemetria-inner::-webkit-scrollbar { display: none; }
.telemetria-trilha {
    display: flex;
    align-items: stretch;
    min-width: max-content;
    min-height: 42px;
}
.telemetria-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border-right: 1px solid var(--edge-dark-soft);
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}
.telemetria-item:first-child { padding-left: 0; }
button.telemetria-item { transition: background var(--fast) var(--ease); }
button.telemetria-item:hover { background: rgba(255, 255, 255, .05); }
button.telemetria-item[aria-busy="true"] .ico { animation: girar 900ms linear infinite; }

.telemetria-rotulo { color: var(--on-dark-muted); }
.telemetria-valor { font-size: .78rem; font-weight: 600; }
.telemetria-fonte {
    margin-left: auto;
    padding-left: 20px;
    border: 0;
    color: rgba(150, 160, 154, .75);
    font-size: .6rem;
    text-decoration: none;
}
.telemetria-fonte:hover { color: var(--on-dark-muted); }

/* -- 08 barra de comando -------------------------------------------------- */
/* Assinatura da página: busca e categorias numa faixa escura que gruda no
   topo. É o painel que o cliente usa o tempo todo para achar a peça. */
.comando {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--graphite);
    border-bottom: 1px solid var(--edge-dark-soft);
    transition: box-shadow var(--base) var(--ease), padding var(--base) var(--ease);
}
.comando.encostado { box-shadow: 0 14px 34px rgba(6, 12, 9, .28); }

.comando-inner {
    width: var(--shell);
    margin-inline: auto;
    padding: 16px 0 12px;
    transition: padding var(--base) var(--ease);
}
.comando.encostado .comando-inner { padding: 10px 0 8px; }

.busca {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 8px 0 16px;
    border: 1px solid var(--edge-dark);
    border-radius: var(--r-md);
    background: var(--machine);
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.busca:focus-within {
    border-color: var(--signal);
    background: var(--machine-up);
}
.busca .ico { color: var(--on-dark-muted); }
.busca:focus-within .ico { color: var(--signal); }

.busca input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--on-dark);
    font-size: .95rem;
    font-weight: 500;
}
.busca input:focus { outline: 0; }
.busca input::placeholder { color: rgba(150, 160, 154, .8); font-weight: 400; }
.busca input::-webkit-search-cancel-button { display: none; }

.busca-contagem {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .06);
    color: var(--on-dark-muted);
    font-size: .68rem;
}
.busca-limpar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .07);
    color: var(--on-dark);
    transition: background var(--fast) var(--ease);
}
.busca-limpar:hover { background: rgba(255, 255, 255, .14); }

/* Gatilho do celular: a barra de comando inteira recolhida numa linha só.
   No computador não existe — lá sobra largura, e esconder a busca atrás de um
   toque seria perder um clique à toa. */
.comando-gatilho,
.vitrine-chip { display: none; }

/* No computador a linha do topo e o painel são display:contents: os filhos
   continuam sendo os mesmos blocos da barra, sem mudança de layout. */
/* No computador a linha de cima é a faixa flexível de sempre: busca elástica
   + atalho para a outra vitrine. */
.comando-topo {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.comando-topo > .busca { flex: 1 1 auto; min-width: 0; }

/* display:contents mantém os filhos como blocos diretos da .comando-inner: no
   computador o layout é exatamente o de antes de o painel existir. */
.comando-painel { display: contents; }

/* Troca de vitrine (peças ⇄ máquinas).
   Mesma altura da busca, borda da barra escura e o âmbar de sinal só no hover:
   é um caminho alternativo, não a ação principal da página. */
.troca {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--edge-dark);
    border-radius: var(--r-md);
    background: var(--machine);
    color: var(--on-dark);
    text-decoration: none;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.troca:hover, .troca:focus-visible {
    background: var(--machine-up);
    border-color: var(--signal);
}
.troca-ico { flex: 0 0 auto; color: var(--signal); }

.troca-txt { display: grid; line-height: 1.15; text-align: left; }
.troca-rotulo { color: var(--on-dark-muted); font-size: .6rem; }
.troca-nome { font-size: .86rem; font-weight: 600; white-space: nowrap; }

.troca-num {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .06);
    color: var(--on-dark-muted);
    font-size: .66rem;
}
.troca-seta { flex: 0 0 auto; color: var(--on-dark-muted); transition: transform var(--fast) var(--ease); }
.troca:hover .troca-seta { transform: translateX(3px); color: var(--signal); }

.categorias {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.categorias-seta {
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border: 1px solid var(--edge-dark);
    border-radius: var(--r-sm);
    color: var(--on-dark);
    transition: background var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.categorias-seta:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.categorias-seta:disabled { opacity: .22; cursor: default; }

.categorias-trilha {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 2px 1px 3px;
    scrollbar-width: none;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
}
.categorias-trilha::-webkit-scrollbar { display: none; }

.pilula {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1px solid var(--edge-dark);
    border-radius: var(--r-full);
    background: transparent;
    color: rgba(238, 240, 236, .82);
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pilula:hover { background: rgba(255, 255, 255, .08); color: var(--on-dark); }
.pilula.ativa {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--graphite);
    font-weight: 600;
}

/* -- 09 títulos de seção -------------------------------------------------- */
.secao { margin-top: clamp(34px, 5vw, 54px); }

.secao-cabeca {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 18px;
}
.secao-titulo {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 700;
    font-stretch: 108%;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.secao-cabeca::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
    transform: translateY(-4px);
}
.secao-conta { color: var(--muted); font-size: .68rem; }

/* identificação da loja, logo abaixo da barra de comando */
.identidade {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: clamp(22px, 3vw, 34px) 0 0;
}
.identidade-logo {
    width: 62px; height: 62px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--plate);
    object-fit: contain;
    box-shadow: var(--lift-1);
}
.identidade-kicker { color: var(--signal-deep); }
.identidade-titulo {
    margin-top: 3px;
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    text-transform: uppercase;
}

/* -- 10 ofertas ----------------------------------------------------------- */
.rail { position: relative; }
.rail-trilha {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 3px 1px 14px;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
}
.rail-trilha::-webkit-scrollbar { display: none; }

.rail-seta {
    position: absolute;
    top: calc(50% - 14px);
    z-index: 4;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--plate);
    color: var(--ink);
    box-shadow: var(--lift-2);
    transform: translateY(-50%);
    transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.rail-seta:hover { transform: translateY(-50%) scale(1.06); }
.rail-seta:disabled { opacity: 0; pointer-events: none; }
.rail-seta.anterior { left: -18px; }
.rail-seta.proxima { right: -18px; }

.oferta {
    position: relative;
    flex: 0 0 auto;
    width: 320px;
    max-width: 84vw;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--plate);
    overflow: hidden;
    box-shadow: var(--lift-1);
    text-align: left;
    transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.oferta:hover {
    transform: translateY(-4px);
    border-color: #cfccc0;
    box-shadow: var(--lift-2);
}
.oferta-figura {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--plate-sunk);
    overflow: hidden;
}
.oferta-figura img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--slow) var(--ease);
}
.oferta:hover .oferta-figura img { transform: scale(1.045); }
.oferta-vazia { display: grid; place-items: center; height: 100%; color: #b3aea1; }

.selo {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--r-full);
    background: var(--signal);
    color: var(--graphite);
    font-weight: 600;
}
.selo, .selo-desconto { z-index: 3; }
.selo-desconto {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    padding: 5px 9px;
    border-radius: var(--r-sm);
    background: rgba(10, 13, 12, .84);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
}

.oferta-corpo { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 16px; }
.oferta-corpo .preco { margin-top: auto; padding-top: 8px; }
.oferta-nome {
    font-family: var(--sans);
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -- 11 grade de produtos ------------------------------------------------- */
.grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
@media (min-width: 560px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 880px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .grade { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.grupo-titulo { scroll-margin-top: 128px; }

/* A "placa": card que imita uma ficha de catálogo de peças. */
.placa {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--plate);
    overflow: hidden;
    text-align: left;
    box-shadow: var(--lift-1);
    transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.placa:hover {
    transform: translateY(-3px);
    border-color: #cdcabd;
    box-shadow: var(--lift-2);
}
.placa.indisponivel { opacity: .55; }
.placa.indisponivel:hover { transform: none; box-shadow: var(--lift-1); }

.placa-figura {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--plate-sunk);
    border-bottom: 1px solid var(--line-soft);
    overflow: hidden;
    cursor: zoom-in;
}
.placa-figura img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--slow) var(--ease);
}
.placa:hover .placa-figura img { transform: scale(1.05); }
.placa-vazia { display: grid; place-items: center; height: 100%; color: #b3aea1; }

/* faixa de código: o detalhe que faz o card ler como ficha técnica */
.placa-codigo {
    display: block;
    padding: 9px 12px 0;
    color: var(--muted);
    font-size: .6rem;
}
.placa-corpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    padding: 6px 12px 12px;
}
.placa-nome {
    font-family: var(--sans);
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.placa-rodape {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

/* preço — sempre mono e tabular para alinhar entre cards */
.preco { display: flex; flex-direction: column; line-height: 1.2; }
.preco-de {
    color: var(--muted);
    font-size: .66rem;
    text-decoration: line-through;
}
.preco-valor {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.02em;
}
.preco-valor.oferta-ativa { color: var(--signal-deep); }

.btn-add {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    background: var(--brand);
    color: var(--brand-on);
    transition: transform var(--fast) var(--ease), filter var(--fast) var(--ease);
}
.btn-add:hover { filter: brightness(1.22); transform: translateY(-1px); }

.tag-esgotado {
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--plate-sunk);
    color: var(--muted);
}

/* estado vazio da busca */
.vazio {
    margin: 40px 0;
    padding: 52px 20px;
    border: 1px dashed #c8c4b6;
    border-radius: var(--r-lg);
    text-align: center;
}
.vazio .ico { margin-inline: auto; color: #b3aea1; }
.vazio h3 { margin: 14px 0 6px; font-size: 1.15rem; text-transform: uppercase; }
.vazio p { margin: 0; color: var(--muted); font-size: .87rem; }

/* botão do nome esticado sobre o card inteiro — evita botão dentro de botão */
.placa-abrir,
.oferta-nome .placa-abrir {
    display: inline;
    font: inherit;
    color: inherit;
    text-align: left;
    letter-spacing: inherit;
}
.placa-abrir::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.placa-abrir:focus-visible { outline: 0; }
.placa-abrir:focus-visible::after {
    outline: 2px solid var(--signal);
    outline-offset: -2px;
}

/* a lupa da foto fica acima da camada esticada */
.placa-zoom {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}
.placa-rodape .btn-add { position: relative; z-index: 2; }
.oferta.indisponivel { opacity: .55; }
.oferta.indisponivel:hover { transform: none; box-shadow: var(--lift-1); }

/* aviso flutuante — substitui os alert() bloqueantes do fluxo antigo */
.toast {
    position: fixed;
    left: 50%;
    bottom: 88px;
    z-index: 2000;
    max-width: min(420px, calc(100% - 32px));
    padding: 13px 18px;
    border-radius: var(--r-md);
    background: var(--graphite);
    color: var(--on-dark);
    font-size: .88rem;
    font-weight: 500;
    box-shadow: var(--lift-3);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 14px);
    transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.toast[data-tipo="erro"] { border-left: 3px solid var(--alert); }
.toast[data-tipo="ok"] { border-left: 3px solid var(--field); }

/* -- 12 sacola flutuante -------------------------------------------------- */
.sacola-barra {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(620px, calc(100% - 24px));
    padding: 12px 12px 12px 18px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-lg);
    background: rgba(10, 13, 12, .93);
    backdrop-filter: blur(18px);
    color: var(--on-dark);
    box-shadow: var(--lift-3);
    transform: translate(-50%, 120%);
    transition: transform var(--base) var(--ease);
}
.sacola-barra.visivel { display: flex; transform: translate(-50%, 0); }
.sacola-barra-rotulo { color: var(--on-dark-muted); }
.sacola-barra-total {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--r-sm);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter var(--fast) var(--ease), transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--brand); color: var(--brand-on); }
.btn-primario:hover { filter: brightness(1.22); }
.btn-sinal { background: var(--signal); color: var(--graphite); }
.btn-sinal:hover { filter: brightness(1.06); }
.btn-fechar-pedido { background: var(--field); color: #fff; }
.btn-fechar-pedido:hover { filter: brightness(1.12); }
.btn-contorno {
    border: 1px solid var(--line);
    background: var(--plate);
    color: var(--ink);
}
.btn-contorno:hover { background: var(--plate-sunk); }
.btn-largo { width: 100%; }
.btn:disabled { opacity: .6; pointer-events: none; }

.subir {
    position: fixed;
    right: 18px;
    bottom: 96px;
    z-index: 70;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--plate);
    color: var(--ink);
    box-shadow: var(--lift-2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
}
.subir.visivel { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* -- 13 diálogos (base) --------------------------------------------------- */
/* <dialog> nativo: foco preso, Esc fecha e camada superior sem z-index. */
dialog {
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    overflow: visible;
}
dialog::backdrop {
    background: rgba(6, 10, 8, .74);
    backdrop-filter: blur(6px);
}
dialog[open] { animation: dlg-entra var(--base) var(--ease); }
dialog[open]::backdrop { animation: dlg-fundo var(--base) var(--ease); }
@keyframes dlg-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes dlg-fundo { from { opacity: 0; } }

.dlg-fechar {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(10, 13, 12, .58);
    backdrop-filter: blur(10px);
    color: #fff;
    transition: background var(--fast) var(--ease);
}
.dlg-fechar:hover { background: rgba(10, 13, 12, .85); }

/* -- 14 diálogo do produto ------------------------------------------------ */
#dlgProduto {
    width: min(1080px, calc(100vw - 32px));
    margin: auto;
}
.produto-painel {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
    grid-template-rows: minmax(0, 1fr);
    height: min(88vh, 760px);
    max-height: min(88vh, 760px);
    border-radius: var(--r-lg);
    background: var(--plate);
    overflow: hidden;
    box-shadow: var(--lift-3);
}

.produto-palco {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    overflow: hidden;
    padding: 34px;
    background: var(--plate-sunk);
    border-right: 1px solid var(--line);
    touch-action: pan-y;
}
.produto-palco-figura {
    position: relative;
    width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    background: var(--plate);
    border-radius: var(--r-md);
    overflow: hidden;
}
.produto-palco img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 22px;
    cursor: zoom-in;
}
.produto-palco-seta {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--ink);
    box-shadow: var(--lift-1);
    transform: translateY(-50%);
}
.produto-palco-seta.anterior { left: 10px; }
.produto-palco-seta.proxima { right: 10px; }

.produto-marcas {
    position: absolute;
    left: 50%; bottom: 12px;
    z-index: 3;
    display: flex;
    gap: 6px;
    transform: translateX(-50%);
}
.produto-marca {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #c6c2b5;
    transition: width var(--fast) var(--ease), background var(--fast) var(--ease);
}
.produto-marca.ativo { width: 20px; border-radius: 4px; background: var(--signal); }

.produto-ficha {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 34px 32px 0;
    scrollbar-gutter: stable;
}
.produto-ficha-kicker { color: var(--signal-deep); }
.produto-ficha-codigo { margin-top: 8px; color: var(--muted); font-size: .62rem; }
.produto-ficha-nome {
    margin: 8px 0 14px;
    font-size: clamp(1.35rem, 2.1vw, 1.95rem);
    text-transform: uppercase;
}
.produto-ficha-desc {
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .88rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}
.produto-ficha-preco {
    margin: 0 0 20px;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    font-weight: 600;
    font-stretch: normal;
    letter-spacing: -.03em;
}
/* "De" precisa de linha própria: inline, colava no preço vigente. */
.produto-ficha-preco .preco-de {
    display: block;
    margin-bottom: 2px;
    font-size: .8rem;
    font-weight: 500;
}
.produto-ficha-obs { margin-bottom: 20px; }

.produto-ficha-rodape {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    /* margens negativas anulam o padding lateral da ficha, para a barra
       encostar nas bordas do painel */
    margin: auto -32px 0;
    padding: 14px 32px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--plate);
}
.produto-ficha-rodape .qtd-controle { flex: 0 0 auto; }
.produto-ficha-rodape .btn { flex: 1; min-width: 0; }

/* opcionais */
.opcional-grupo {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bone);
}
.opcional-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.opcional-nome { font-family: var(--sans); font-size: .95rem; font-weight: 600; letter-spacing: 0; }
.opcional-regra { margin: 0 0 12px; color: var(--muted); font-size: .76rem; }
.opcional-lista { display: grid; gap: 6px; }
.opcional-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--plate);
    font-size: .87rem;
    cursor: pointer;
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.opcional-item:hover { border-color: #c9c5b8; }
.opcional-item:has(input:checked) {
    border-color: var(--signal);
    background: var(--signal-wash);
}
.opcional-item:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.opcional-item input { accent-color: var(--signal-deep); width: 17px; height: 17px; margin: 0 10px 0 0; }
.opcional-item-esq { display: flex; align-items: center; min-width: 0; }
.opcional-preco { flex: 0 0 auto; color: var(--ink-soft); font-size: .78rem; font-weight: 600; }

.tag {
    padding: 4px 9px;
    border-radius: var(--r-full);
    font-family: var(--mono);
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.tag-obrigatorio { background: var(--ink); color: #fff; }
.tag-opcional { background: var(--plate-sunk); color: var(--muted); }

.qtd-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.qtd-controle {
    display: grid;
    grid-template-columns: 44px 52px 44px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--plate);
    overflow: hidden;
}
.qtd-controle button {
    display: grid;
    place-items: center;
    height: 42px;
    transition: background var(--fast) var(--ease);
}
.qtd-controle button:hover { background: var(--plate-sunk); }
.qtd-controle span {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

/* -- 15 lightbox ---------------------------------------------------------- */
#dlgImagem { width: min(1100px, calc(100vw - 24px)); margin: auto; }
.lightbox {
    border-radius: var(--r-lg);
    background: #0d1211;
    overflow: hidden;
}
.lightbox-palco {
    position: relative;
    display: grid;
    place-items: center;
    min-height: min(76vh, 720px);
    touch-action: pan-y;
}
.lightbox-palco img {
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
}
.lightbox-seta {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border: 1px solid var(--edge-dark);
    border-radius: 50%;
    background: rgba(10, 13, 12, .72);
    color: #fff;
    transform: translateY(-50%);
    transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.lightbox-seta:hover { background: var(--signal); color: var(--graphite); transform: translateY(-50%) scale(1.06); }
.lightbox-seta.anterior { left: 16px; }
.lightbox-seta.proxima { right: 16px; }
.lightbox-conta {
    position: absolute;
    right: 16px; bottom: 14px;
    padding: 5px 10px;
    border-radius: var(--r-full);
    background: rgba(10, 13, 12, .74);
    color: #fff;
    font-size: .68rem;
}
.lightbox-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--edge-dark-soft);
}
.lightbox-legenda { min-width: 0; color: var(--on-dark); font-size: .88rem; font-weight: 500; }
.lightbox-marcas { flex: 0 0 auto; display: flex; gap: 6px; }
.lightbox-marca {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .32);
    transition: width var(--fast) var(--ease), background var(--fast) var(--ease);
}
.lightbox-marca.ativo { width: 22px; border-radius: 4px; background: var(--signal); }

/* -- 16 diálogo da sacola ------------------------------------------------- */
#dlgSacola { width: min(560px, calc(100vw - 24px)); margin-left: auto; margin-right: 0; }
.sacola-painel {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    height: 100vh;
    background: var(--bone);
    box-shadow: var(--lift-3);
}
#dlgSacola[open] { animation: sacola-entra var(--base) var(--ease); }
@keyframes sacola-entra { from { transform: translateX(28px); opacity: 0; } }

.sacola-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--plate);
}
.sacola-cabeca h2 { font-size: 1.25rem; text-transform: uppercase; }
.sacola-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 26px; }
.sacola-rodape {
    padding: 16px 22px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--plate);
}

.linha-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 14px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--plate);
}
.linha-item-nome { min-width: 0; overflow-wrap: anywhere; align-self: center; font-family: var(--sans); font-size: .92rem; font-weight: 600; letter-spacing: 0; }
.linha-item-meta { grid-column: 1 / -1; color: var(--muted); font-size: .76rem; }
.linha-item-opcionais {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    padding-left: 16px;
    color: var(--muted);
    font-size: .76rem;
}
.linha-item-obs {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    color: var(--ink-soft);
    font-size: .78rem;
}
.linha-item-total {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: 6px;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.linha-item-remover {
    align-self: start;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: var(--r-sm);
    color: var(--muted);
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.linha-item-remover:hover { background: rgba(184, 57, 31, .1); color: var(--alert); }

.resumo { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.resumo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: var(--plate);
    font-size: .88rem;
}
.resumo-linha + .resumo-linha { border-top: 1px solid var(--line-soft); }
.resumo-linha span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.resumo-linha.gratis { color: var(--field); }
.resumo-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: var(--graphite);
    color: var(--on-dark);
}
.resumo-total-valor {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -.03em;
}

.sacola-vazia { padding: 60px 20px; text-align: center; color: var(--muted); }

/* -- 17 formulários ------------------------------------------------------- */
.bloco {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--plate);
}
.bloco-titulo {
    margin-bottom: 14px;
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
}

.segmentado {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: .87rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.segmentado label:hover { border-color: #c9c5b8; }
.segmentado input:checked + label {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-on);
}
.segmentado input:focus-visible + label { outline: 2px solid var(--signal); outline-offset: 2px; }

.campos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.c-12 { grid-column: span 12; }
.c-8 { grid-column: span 8; }
.c-7 { grid-column: span 7; }
.c-5 { grid-column: span 5; }
.c-4 { grid-column: span 4; }

.campo-rotulo {
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.campo-ajuda { color: var(--muted); font-size: .72rem; }
.campo-ajuda.ok { color: var(--field); }
.campo-ajuda.erro { color: var(--alert); }

.entrada {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background-color: var(--plate);
    color: var(--ink);
    font-size: .92rem;
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.entrada:focus {
    outline: 0;
    border-color: var(--signal);
    box-shadow: 0 0 0 3px var(--signal-wash);
}
.entrada.invalido { border-color: var(--alert); box-shadow: 0 0 0 3px rgba(184, 57, 31, .12); }
select.entrada {
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369736e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 15px;
}

.aviso {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bone);
    font-size: .84rem;
}
.aviso strong { font-weight: 600; }
.aviso-mapa { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--signal-deep); font-size: .82rem; font-weight: 600; }

/* -- 17b gaveta lateral do celular ---------------------------------------
   Tudo o que a barra de comando guardava no computador (busca, atalho para as
   máquinas, categorias) passa a morar aqui no telefone, junto com os dados da
   loja.

   Entra pela direita porque o gatilho que a abre fica à direita da barra: o
   painel sai debaixo do dedo, não do outro lado da tela. Fechada ela é inerte
   (atributo inert no HTML), então nem leitor de tela nem Tab entram nela. */
.gaveta-fundo {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(6, 10, 8, .62);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .28s var(--ease);
}
.gaveta-fundo.visivel { opacity: 1; }

.gaveta {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 121;
    display: flex;
    flex-direction: column;
    width: min(86vw, 390px);
    height: 100dvh;
    background: var(--graphite);
    border-left: 1px solid var(--edge-dark);
    box-shadow: -18px 0 52px rgba(0, 0, 0, .5);
    color: var(--on-dark);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .32s var(--ease), visibility 0s linear .32s;
}
.gaveta.aberta {
    transform: none;
    visibility: visible;
    transition: transform .32s var(--ease), visibility 0s;
}

.gaveta-topo {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: none;
    padding: 14px 16px;
    background: var(--machine);
    border-bottom: 1px solid var(--edge-dark-soft);
}
.gaveta-logo {
    flex: none;
    width: 38px; height: 38px;
    padding: 3px;
    border-radius: var(--r-sm);
    background: #fff;
    object-fit: contain;
}
.gaveta-topo-txt { display: grid; gap: 1px; min-width: 0; }
.gaveta-topo-kicker { color: var(--on-dark-muted); font-size: .6rem; }
.gaveta-topo-nome {
    font-family: var(--display);
    font-size: .95rem;
    font-weight: 700;
    font-stretch: 106%;
    line-height: 1.15;
    /* nome comprido cabe em duas linhas em vez de virar reticências */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gaveta-fechar {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    margin-left: auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--on-dark);
    transition: background var(--fast) var(--ease);
}
.gaveta-fechar:hover { background: rgba(255, 255, 255, .16); }

.gaveta-rolagem {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* A rolagem é uma coluna flex, e busca e troca herdam da barra um
   flex: 1 1 100% pensado para uma LINHA. Em coluna esse 100% vira altura e os
   dois esticam até preencher a gaveta. Seletor de duas classes para ganhar das
   regras do celular por especificidade, não por ordem no arquivo. */
.gaveta .gaveta-rolagem > * { flex: 0 0 auto; }
.gaveta .busca { flex: 0 0 auto; height: 52px; min-height: 0; }
.gaveta .troca { flex: 0 0 auto; margin-left: 0; }

.gaveta-busca { width: 100%; }
.gaveta-vitrine { width: 100%; }

.gaveta-secao { display: grid; gap: 9px; }
.gaveta-rotulo { color: var(--on-dark-muted); font-size: .63rem; }

/* Atalho para uma seção da página (ofertas). */
.gaveta-atalho {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--edge-dark);
    border-radius: var(--r-md);
    background: var(--machine);
    color: var(--on-dark);
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.gaveta-atalho .ico { color: var(--signal); }
.gaveta-atalho:hover { background: var(--machine-up); border-color: var(--signal); }
.gaveta-atalho-num {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    background: var(--signal-wash);
    color: var(--signal);
    font-size: .66rem;
}

/* --- categorias, uma embaixo da outra, com prévia ---
   A miniatura é a foto do primeiro produto da categoria: numa fileira de
   pílulas o comprador lê "Vedação" e não faz ideia do que tem dentro; com a
   peça na frente ele reconhece pelo formato, que é como procura no balcão. */
.gaveta-cats { display: grid; gap: 7px; }
.gaveta-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border: 1px solid var(--edge-dark);
    border-radius: var(--r-md);
    background: var(--machine);
    color: var(--on-dark);
    text-decoration: none;
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.gaveta-cat:hover,
.gaveta-cat:focus-visible { background: var(--machine-up); border-color: var(--signal); }
.gaveta-cat:active { transform: scale(.99); }

.gaveta-cat-capa {
    flex: none;
    width: 54px; height: 54px;
    border-radius: var(--r-sm);
    background: var(--plate);
    object-fit: cover;
}
.gaveta-cat-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.gaveta-cat-nome {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
    /* nome de categoria longo não pode empurrar a seta para fora do cartão */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gaveta-cat-sub {
    font-size: .72rem;
    color: var(--on-dark-muted);
    line-height: 1.35;
    /* sem nowrap: "a partir de R$ 1.850,00" cortado em reticências não informa
       nada. Duas linhas cabem, e o preço é o que faz o dedo parar aqui. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gaveta-cat-seta { flex: none; color: var(--on-dark-muted); }

/* Dados da loja: quem está do outro lado do WhatsApp. */
.gaveta-loja { gap: 8px; }
.gaveta-loja-linha {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--on-dark-muted);
}
.gaveta-loja-linha .ico { flex: none; margin-top: 2px; color: var(--signal); }
.gaveta-loja-link { text-decoration: none; }
.gaveta-loja-link:hover { color: var(--on-dark); }

.gaveta-pe {
    flex: none;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--edge-dark-soft);
    background: var(--machine);
}
.gaveta-zap { width: 100%; justify-content: center; }

/* Enquanto a gaveta está aberta a página de trás não rola junto. */
html.gaveta-travada, html.gaveta-travada body { overflow: hidden; }

/* No computador a gaveta não existe: a barra de comando já mostra tudo. */
@media (min-width: 721px) {
    .gaveta, .gaveta-fundo { display: none; }
}

/* -- 18 rodapé ------------------------------------------------------------ */
.rodape {
    margin-top: clamp(48px, 7vw, 84px);
    /* +96px: a sacola flutuante paira aqui e não pode cobrir a última linha */
    padding: clamp(38px, 5vw, 58px) 0 calc(38px + 96px + env(safe-area-inset-bottom));
    background: var(--graphite);
    color: var(--on-dark);
}
.rodape-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 32px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--edge-dark-soft);
}
.rodape h2 { margin-bottom: 10px; font-size: 1rem; text-transform: uppercase; }
.rodape p { margin: 0; color: var(--on-dark-muted); font-size: .87rem; line-height: 1.6; white-space: pre-wrap; }
.rodape-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 15px;
    border: 1px solid var(--edge-dark);
    border-radius: var(--r-full);
    color: var(--on-dark);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.rodape-link:hover { background: rgba(255, 255, 255, .08); border-color: var(--signal); }
.rodape-base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 24px;
    color: var(--on-dark-muted);
    font-size: .78rem;
}
.rodape-marca { color: var(--on-dark); font-family: var(--display); font-size: 1.05rem; font-stretch: 108%; text-transform: uppercase; }

/* Assinatura de quem desenvolveu o catálogo. Fica apagada em repouso e só
   acende no toque: a marca da página é a da loja, não a nossa. */
.autoria {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 2px;
    text-decoration: none;
    opacity: .62;
    transition: opacity var(--fast) var(--ease);
}
.autoria:hover, .autoria:focus-visible { opacity: 1; }
.autoria-rotulo { color: var(--on-dark-muted); font-size: .6rem; }
.autoria img { height: 30px; width: auto; display: block; }

@media (max-width: 720px) {
    /* No celular a base do rodapé empilha; a assinatura ganha um fio acima
       para não colar no número de itens. */
    .rodape-base { flex-direction: column; align-items: flex-start; gap: 10px; }
    .autoria { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--edge-dark-soft); width: 100%; }
}

/* -- 19 movimento --------------------------------------------------------- */
/* Revelação em stagger: o índice vem do JS via --i. */
.revelar {
    opacity: 0;
    transform: translateY(14px);
}
.revelar.dentro {
    opacity: 1;
    transform: none;
    transition: opacity var(--slow) var(--ease) calc(var(--i, 0) * 38ms),
                transform var(--slow) var(--ease) calc(var(--i, 0) * 38ms);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .revelar { opacity: 1; transform: none; }
    .gaveta, .gaveta-fundo { transition-delay: 0s !important; }
    .hero-quadro.ativo { transform: none; }
    .letreiro-trilha { animation: none; }
}

/* -- responsivo ----------------------------------------------------------- */
@media (max-width: 900px) {
    .produto-painel { grid-template-columns: 1fr; grid-template-rows: none; max-height: 100dvh; height: 100dvh; border-radius: 0; }
    #dlgProduto { width: 100vw; height: 100vh; }
    .produto-painel { overflow-y: auto; }
    .produto-palco { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 18px; }
    .produto-palco-figura { max-width: 420px; margin-inline: auto; }
    .produto-ficha { padding: 26px 20px 0; overflow: visible; }
    .produto-ficha-rodape { margin-inline: -20px; padding-inline: 16px; gap: 10px; }
    /* a 390px o rótulo do botão quebrava em duas linhas: controle de
       quantidade mais estreito e rótulo em linha única resolvem */
    .produto-ficha-rodape .qtd-controle { grid-template-columns: 38px 40px 38px; }
    .produto-ficha-rodape .qtd-controle button { height: 40px; }
    .produto-ficha-rodape .btn { padding: 0 12px; font-size: .85rem; white-space: nowrap; }
}

@media (max-width: 720px) {
    body { font-size: 14.5px; }
    .hero { min-height: 340px; }
    .hero-titulo { font-size: clamp(2.4rem, 12vw, 3.6rem); }
    .hero-desc { font-size: .86rem; }

    .telemetria-inner { width: 100%; overflow-x: auto; scrollbar-width: none; }
    .telemetria-inner::-webkit-scrollbar { display: none; }
    .telemetria-trilha { width: max-content; touch-action: pan-x; }
    .telemetria-trilha.correndo { animation: correr var(--tel-dur, 32s) linear infinite; }
    .telemetria-trilha.pausada { animation-play-state: paused; }
    .telemetria-fonte { display: none; }

    .letreiro { padding-block: 16px; }
    .letreiro-lista { gap: 14px; padding-inline: 7px; }
    .letreiro-lista li { width: 150px; height: 72px; padding: 10px 17px; }
    .letreiro-lista img { height: 46px; min-height: 46px; max-width: 136px; }

    .categorias-seta { display: none; }
    .rail-seta { display: none; }
    .oferta { width: 78vw; max-width: 330px; }

    .busca-contagem { padding: 4px 7px; font-size: .62rem; }

    /* --- linha de cima no celular ---
       A busca ocupa o que sobra, e à direita ficam o menu e o atalho da outra
       vitrine. A busca fica FORA do menu de propósito: pesquisar é o gesto mais
       frequente e não pode custar um toque a mais. */
    .comando-topo { gap: 8px; align-items: center; min-width: 0; }
    .comando-topo > .busca { flex: 1 1 auto; min-width: 0; min-height: 46px; padding-left: 12px; }
    /* o cartão completo da troca vive na gaveta; aqui fica o chip */
    .comando-topo > .troca { display: none; }

    .comando-gatilho {
        display: grid;
        place-items: center;
        flex: none;
        width: 46px;
        height: 46px;
        border: 1px solid var(--edge-dark);
        border-radius: var(--r-md);
        background: var(--machine);
        color: var(--on-dark);
        transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
    }

    /* Três traços desenhados no CSS: não vale mais um símbolo no sprite por
       seis pixels de linha. Viram um X quando o painel abre. */
    .comando-gatilho-barras { flex: none; display: grid; gap: 3px; width: 17px; }
    .comando-gatilho-barras i {
        height: 2px;
        border-radius: 2px;
        background: var(--on-dark);
        transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
    }
    /* Gaveta aberta: os três traços viram um X. */
    .comando-gatilho[aria-expanded="true"] { background: var(--machine-up); border-color: var(--signal); }
    .comando-gatilho[aria-expanded="true"] .comando-gatilho-barras i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
    .comando-gatilho[aria-expanded="true"] .comando-gatilho-barras i:nth-child(2) { opacity: 0; }
    .comando-gatilho[aria-expanded="true"] .comando-gatilho-barras i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

    /* Atalho curto para a outra vitrine: mesma caixa escura do gatilho, com o
       âmbar de sinal no ícone. Mesma altura, para a linha ficar assentada. */
    .vitrine-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex: none;
        height: 46px;
        padding: 0 14px;
        border: 1px solid var(--edge-dark);
        border-radius: var(--r-md);
        background: var(--machine);
        color: var(--on-dark);
        font-size: .82rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
    }
    .vitrine-chip .ico { flex: none; color: var(--signal); }
    .vitrine-chip:hover,
    .vitrine-chip:focus-visible { background: var(--machine-up); border-color: var(--signal); }

    /* No celular o conteúdo da barra vive na gaveta lateral (views/gaveta.php);
       aqui fica só a linha do gatilho e o atalho da outra vitrine. */
    .comando-painel { display: none; }

    .troca { justify-content: flex-start; min-height: 46px; }
    .troca-num { margin-left: auto; }
    #dlgSacola { width: 100vw; }
    .sacola-painel { border-radius: 0; }
    .campos { gap: 10px; }
    .subir { right: 14px; bottom: 92px; }
}

/* Telas bem estreitas: o rótulo do atalho disputa espaço com o campo de busca.
   Fica o ícone, e o aria-label continua dizendo para onde ele leva. */
/* 400px e não 380: aqui o rótulo é "Máquinas", mais largo que o "Peças" da
   outra vitrine, e a busca ficava com menos de 180px. */
@media (max-width: 400px) {
    .vitrine-chip { width: 46px; padding-inline: 0; justify-content: center; }
    .vitrine-chip-txt { display: none; }
}

@keyframes correr {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--tel-dist, 0px))); }
}