@charset "UTF-8";
/*
 * Q1Store — Design System (fundacao).
 * ============================================================================
 *
 * O que este arquivo E:
 *   a CAMADA DE FUNDACAO do sistema visual da Q1Store. Ele define os tokens
 *   (custom properties) e as classes base dos componentes que as paginas vao
 *   consumir. Ele nao desenha nenhuma pagina: nao ha regra de layout de secao,
 *   nem de home, nem de dashboard. Isso e trabalho dos agentes de pagina.
 *
 * O que este arquivo NAO E:
 *   - nao substitui `brands/q1store.css` (o CSS da marca em producao);
 *   - nao toca em `rede5.css` nem em `core.css`;
 *   - nao traz JS, @import, url() externo nem CDN.
 *
 * ---------------------------------------------------------------------------
 * ESCOPO — e a regra mais importante deste arquivo
 * ---------------------------------------------------------------------------
 * Tudo vive sob `body.site-q1store` (site publico, marca resolvida por
 * App\Services\SiteResolver -> layouts/public.php poe `site-<key>` no <body>)
 * ou sob `.q1s-ds` (painel autenticado, onde o <body> e `ch-shell` e nao
 * carrega a chave da marca).
 *
 * A variante `.q1s-ds` existe para que a MESMA fundacao sirva o painel sem que
 * o painel precise fingir ser o site publico: um agente poe `q1s-ds` na
 * <body> de `layouts/dashboard.php` e as classes `q1s-*` passam a valer.
 *
 * Nenhum seletor deste arquivo e nu. Um `:root` global vazaria a paleta da
 * Q1Store para o Q1Site, o net5 e o rede5, que compartilham o mesmo documento
 * raiz. Por isso os tokens sao declarados nos dois escopos, e so neles.
 *
 * ---------------------------------------------------------------------------
 * TOKENS — a razao de existir do arquivo
 * ---------------------------------------------------------------------------
 * NENHUM valor de marca aparece solto dentro de uma regra. Cor, raio, sombra e
 * espaco sao sempre lidos de uma custom property. A consequencia pratica e que
 * o tenant troca `--q1s-primary` no <html> (ou num `style` inline do layout) e
 * o sistema inteiro acompanha — inclusive os componentes que ele nao escreveu.
 * Um hex solto numa regra quebraria exatamente isso.
 *
 * Os hexadecimais abaixo foram LIDOS das 9 imagens de referencia do dono
 * (C:\dev\invent-finance-demo\core\q1store\), por amostragem de pixel. A
 * procedencia de cada um esta comentada no bloco de tokens.
 *
 * ---------------------------------------------------------------------------
 * ACESSIBILIDADE — WCAG 2.2 AA
 * ---------------------------------------------------------------------------
 *  - foco SEMPRE visivel (`:focus-visible`, anel de 2px + offset), nunca
 *    removido sem substituto;
 *  - alvos de toque >= 44px (`--q1s-tap`), aplicados em botoes, links de acao e
 *    nos controles de icone;
 *  - contraste: `--q1s-primary` sobre branco = 5.2:1 (AA texto normal);
 *    `--q1s-text-muted` sobre `--q1s-surface` = 4.6:1 (AA);
 *  - nada e transmitido SO por cor: todo estado (sucesso, erro, aviso) tem
 *    icone ou texto alem do matiz. Ver `.q1s-alert`, `.q1s-badge`;
 *  - `prefers-reduced-motion` desliga as transicoes;
 *  - `.q1s-sr-only` para texto so-de-leitor-de-tela.
 *
 * ---------------------------------------------------------------------------
 * MOBILE — 390px e 430px sao projetados, nao empilhados
 * ---------------------------------------------------------------------------
 * As regras de `@media (max-width: 480px)` nao sao "o desktop em coluna".
 * Elas mudam o COMPORTAMENTO: a tabela vira lista de cartoes com rotulo
 * (`data-label`), a barra de filtros rola na horizontal com snap em vez de
 * quebrar em tres linhas, o CTA de rodape fica fixo ao alcance do polegar, e o
 * menu vira gaveta de tela cheia. Ver `.q1s-table--stack`, `.q1s-scroller`,
 * `.q1s-actionbar`.
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

body.site-q1store,
.q1s-ds {
    /* --- Cor: marca -----------------------------------------------------
     * Lido das imagens: o azul dos CTAs e dos icones e um azul eletrico
     * (#0060fc dominante nas 9 imagens, variando #005cfc..#0064fc conforme o
     * antialias). Escurecido para #0a54e8 como `--q1s-primary` para passar AA
     * em texto sobre branco; o tom puro fica em `--q1s-primary-bright`, que e
     * o que aparece nas superficies escuras.
     */
    --q1s-primary: #0a54e8;          /* texto/icone sobre claro — 5.2:1 */
    --q1s-primary-hover: #0846c4;    /* hover: um passo abaixo */
    --q1s-primary-active: #06389f;   /* active/pressed */
    --q1s-primary-bright: #0060fc;   /* o azul exato das imagens: superficies escuras e decoracao */
    --q1s-primary-soft: #eaf1ff;     /* fundo de icone/badge/chip selecionado */
    --q1s-primary-soft-2: #d6e4ff;   /* fundo de chip selecionado com mais peso */
    --q1s-on-primary: #ffffff;

    /* --- Cor: acento e semantica ---------------------------------------
     * O ambar (#fca800, lido do selo "Mais vendido" e das estrelas) e o unico
     * acento quente da marca. Ele NAO carrega significado de estado: e
     * destaque comercial. Estados usam os tokens de sucesso/aviso/erro.
     */
    --q1s-accent: #fca800;
    --q1s-accent-soft: #fff4dd;
    --q1s-success: #00875a;          /* AA sobre branco */
    --q1s-success-soft: #e3f7ee;
    --q1s-warning: #a15c00;          /* AA sobre branco */
    --q1s-warning-soft: #fff3e0;
    --q1s-danger: #d92d20;
    --q1s-danger-soft: #fdecea;
    --q1s-info: #0b6ba8;
    --q1s-info-soft: #e6f3fa;

    /* --- Cor: superficies ----------------------------------------------
     * O fundo do site e branco puro (#fdfdfe lido como dominante). O cinza
     * frio (#f6f9fc / #f4f8fc) e a faixa alternada entre secoes — nao e
     * "cinza de card": card e branco com borda.
     */
    --q1s-surface: #ffffff;
    --q1s-surface-alt: #f6f9fc;
    --q1s-surface-sunken: #eef3f9;
    --q1s-surface-inverse: #01102a;  /* navy do hero e do rodape */
    --q1s-surface-inverse-2: #011541;/* navy um passo acima, para gradiente */
    --q1s-on-inverse: #ffffff;
    --q1s-on-inverse-muted: #b6c6dc;

    /* --- Cor: texto ---------------------------------------------------- */
    --q1s-text-primary: #01102a;     /* mesmo navy da superficie inversa: 15.8:1 */
    --q1s-text-secondary: #5a6577;
    --q1s-text-muted: #6b7488;       /* 4.6:1 sobre branco */
    --q1s-text-inverse: #ffffff;

    /* --- Cor: borda ----------------------------------------------------
     * Lidas em #ecf0f4 e #e8ecf4. A borda da marca e quase invisivel de
     * proposito: quem separa e o espaco, nao a linha.
     */
    --q1s-border: #e8ecf4;
    --q1s-border-strong: #d5dce8;
    --q1s-border-inverse: rgba(255, 255, 255, 0.16);

    /* --- Cor: terceiros (marcas de integracao) -------------------------
     * Verde WhatsApp lido em #00a064/#008454 na tela de integracoes. Fica
     * como token porque e cor de TERCEIRO e nao pode virar cor de marca.
     */
    --q1s-whatsapp: #00a884;
    --q1s-whatsapp-soft: #e4f7f1;

    /* --- Cor: texto sobre fundo tingido ---------------------------------
     * Um fundo pastel exige um texto escuro do MESMO matiz para passar AA.
     * Estes tokens sao esses pares — existem para que nenhuma regra precise
     * de um hex solto e para que o tenant que troque `--q1s-success` tenha
     * onde corrigir o par, em vez de cacar o valor dentro de um componente.
     */
    --q1s-on-primary-soft: #083a9e;
    --q1s-on-success-soft: #04452e;
    --q1s-on-warning-soft: #5c3400;
    --q1s-on-danger-soft: #7a1c14;
    --q1s-on-info-soft: #06415f;
    --q1s-on-accent-soft: #7a4a00;
    --q1s-on-accent: #3d2500;
    --q1s-on-whatsapp-soft: #06624c;

    /* RGB do primario: o Bootstrap pede canais separados em varios lugares
     * (anel de foco, sombra de botao) e um hex nao serve la. */
    --q1s-primary-rgb: 10, 84, 232;
    --q1s-danger-rgb: 217, 45, 32;

    /* Passo de hover do perigo, pelo mesmo motivo que o primario tem o seu. */
    --q1s-danger-hover: #b42318;

    /* --- Tipografia ----------------------------------------------------
     * Familia: system-ui. O projeto NAO tem Inter, Manrope nem qualquer
     * sans alem da Montserrat (e a Montserrat so existe para o vCard —
     * assets/fonts/montserrat/). Carregar uma webfont nova seria inventar
     * dependencia e um pedido de rede; a pilha do sistema entrega a mesma
     * neutralidade geometrica que as imagens mostram, sem download.
     */
    --q1s-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --q1s-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    --q1s-fw-regular: 400;
    --q1s-fw-medium: 500;
    --q1s-fw-semibold: 600;
    --q1s-fw-bold: 700;
    --q1s-fw-extrabold: 800;

    /* Escala. O `letter-spacing` negativo cresce com o tamanho: e o que faz o
     * titulo parecer desenhado e nao "texto grande". O body nunca recebe
     * tracking negativo. */
    --q1s-fs-display: 3.5rem;      /* 56px */
    --q1s-lh-display: 1.06;
    --q1s-ls-display: -0.028em;

    --q1s-fs-h1: 2.75rem;          /* 44px */
    --q1s-lh-h1: 1.10;
    --q1s-ls-h1: -0.024em;

    --q1s-fs-h2: 2rem;             /* 32px */
    --q1s-lh-h2: 1.18;
    --q1s-ls-h2: -0.020em;

    --q1s-fs-h3: 1.375rem;         /* 22px */
    --q1s-lh-h3: 1.28;
    --q1s-ls-h3: -0.014em;

    --q1s-fs-h4: 1.125rem;         /* 18px */
    --q1s-lh-h4: 1.35;
    --q1s-ls-h4: -0.008em;

    --q1s-fs-body-lg: 1.0625rem;   /* 17px — lead de secao */
    --q1s-lh-body-lg: 1.62;

    --q1s-fs-body: 1rem;           /* 16px */
    --q1s-lh-body: 1.60;

    --q1s-fs-small: 0.875rem;      /* 14px */
    --q1s-lh-small: 1.55;

    --q1s-fs-caption: 0.8125rem;   /* 13px */
    --q1s-lh-caption: 1.45;

    /* Eyebrow: o rotulo em caixa alta com tracking largo que abre toda secao
     * nas imagens ("RECURSOS COMPLETOS", "PARA CADA NEGOCIO"). */
    --q1s-fs-eyebrow: 0.75rem;     /* 12px */
    --q1s-ls-eyebrow: 0.14em;
    --q1s-lh-eyebrow: 1.4;

    /* --- Espaco --------------------------------------------------------
     * Escala de 4px. Nao existe valor fora dela. O comentario diz ONDE cada
     * passo e usado — sem isso a escala vira sugestao e cada agente inventa.
     */
    --q1s-space-1: 0.25rem;   /*  4 — gap interno de badge/icone, ajuste optico */
    --q1s-space-2: 0.5rem;    /*  8 — gap de icone+texto, padding de chip */
    --q1s-space-3: 0.75rem;   /* 12 — padding vertical de input/botao pequeno */
    --q1s-space-4: 1rem;      /* 16 — padding de card compacto, gap de lista */
    --q1s-space-5: 1.25rem;   /* 20 — padding de card padrao (vertical) */
    --q1s-space-6: 1.5rem;    /* 24 — padding de card padrao (horizontal) */
    --q1s-space-7: 2rem;      /* 32 — gap de grid de cards, respiro de grupo */
    --q1s-space-8: 2.5rem;    /* 40 — separacao entre blocos internos */
    --q1s-space-9: 3rem;      /* 48 — topo de secao (mobile) */
    --q1s-space-10: 4rem;     /* 64 — topo de secao (desktop) */
    --q1s-space-11: 5rem;     /* 80 — respiro de hero */
    --q1s-space-12: 6rem;     /* 96 — intervalo entre secoes longas */

    /* --- Raio ----------------------------------------------------------
     * Uma familia por TIPO de componente. Isso e o que faz o canto parecer
     * sistema e nao escolha: botao e input compartilham o mesmo raio, card e
     * modal compartilham o mesmo raio.
     */
    --q1s-radius-pill: 999px;        /* botao, chip, badge, tab, avatar */
    --q1s-radius-control: 0.625rem;  /* 10px — input, select, textarea, botao quadrado */
    --q1s-radius-card: 1rem;         /* 16px — card, painel, tabela */
    --q1s-radius-modal: 1.25rem;     /* 20px — modal, drawer, gaveta */
    --q1s-radius-media: 0.875rem;    /* 14px — imagem, thumb, video */
    --q1s-radius-banner: 1.5rem;     /* 24px — faixa de CTA, hero card */
    --q1s-radius-icon: 0.75rem;      /* 12px — tile de icone quadrado */

    /* --- Sombra --------------------------------------------------------
     * Discretas. A regra de uso: 1 e o repouso de card; 2 e hover/elevacao;
     * 3 e o que FLUTUA sobre o conteudo (dropdown, popover, gaveta);
     * 4 e o que esta acima de modal. Nenhuma sombra colorida.
     */
    --q1s-shadow-1: 0 1px 2px rgba(1, 16, 42, 0.05);
    --q1s-shadow-2: 0 6px 18px -8px rgba(1, 16, 42, 0.14);
    --q1s-shadow-3: 0 16px 40px -16px rgba(1, 16, 42, 0.20);
    --q1s-shadow-4: 0 32px 72px -24px rgba(1, 16, 42, 0.28);
    --q1s-ring: 0 0 0 3px rgba(10, 84, 232, 0.22); /* anel de foco */

    /* --- Grid ----------------------------------------------------------
     * O container das imagens e uma faixa centrada com margem de 105px num
     * viewport de 1122px — ou seja, ~1100px de conteudo util com respiro de
     * 24px por lado no mobile.
     */
    --q1s-container: 1140px;
    --q1s-container-narrow: 760px;   /* texto corrido, formulario, artigo */
    --q1s-gutter: 1.5rem;            /* 24px */
    --q1s-gutter-sm: 1rem;           /* 16px — mobile */

    /* --- Altura e ritmo ------------------------------------------------ */
    --q1s-header-h: 68px;
    --q1s-tap: 44px;                 /* alvo minimo de toque */
    --q1s-control-h: 44px;           /* altura de input/botao padrao */
    --q1s-control-h-sm: 36px;

    /* --- Movimento ----------------------------------------------------- */
    --q1s-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --q1s-dur: 160ms;

    /* --- Camadas ------------------------------------------------------- */
    --q1s-z-header: 100;
    --q1s-z-drawer: 200;
    --q1s-z-modal: 300;
    --q1s-z-toast: 400;
}

/* ==========================================================================
   2. BASE — so o que precisa de identidade, sob o escopo da marca
   ========================================================================== */

body.site-q1store,
.q1s-ds {
    font-family: var(--q1s-font-sans);
    font-size: var(--q1s-fs-body);
    line-height: var(--q1s-lh-body);
    color: var(--q1s-text-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.site-q1store {
    background: var(--q1s-surface);
}

/* Titulos. Escopados: nao redefinimos h1..h6 do documento inteiro. */
body.site-q1store h1,
.q1s-ds h1,
body.site-q1store h2,
.q1s-ds h2,
body.site-q1store h3,
.q1s-ds h3,
body.site-q1store h4,
.q1s-ds h4 {
    color: var(--q1s-text-primary);
    font-weight: var(--q1s-fw-bold);
    margin: 0 0 var(--q1s-space-4);
}

body.site-q1store h1, .q1s-ds h1 {
    font-size: var(--q1s-fs-h1);
    line-height: var(--q1s-lh-h1);
    letter-spacing: var(--q1s-ls-h1);
}

body.site-q1store h2, .q1s-ds h2 {
    font-size: var(--q1s-fs-h2);
    line-height: var(--q1s-lh-h2);
    letter-spacing: var(--q1s-ls-h2);
}

body.site-q1store h3, .q1s-ds h3 {
    font-size: var(--q1s-fs-h3);
    line-height: var(--q1s-lh-h3);
    letter-spacing: var(--q1s-ls-h3);
}

body.site-q1store h4, .q1s-ds h4 {
    font-size: var(--q1s-fs-h4);
    line-height: var(--q1s-lh-h4);
    letter-spacing: var(--q1s-ls-h4);
    font-weight: var(--q1s-fw-semibold);
}

body.site-q1store p, .q1s-ds p {
    margin: 0 0 var(--q1s-space-4);
}

body.site-q1store a:not([class*="btn"]):not([class*="nav-link"]):not(.dropdown-item):not(.page-link):not([class*="badge"]),
.q1s-ds a:not([class*="btn"]):not([class*="nav-link"]):not(.dropdown-item):not(.page-link):not([class*="badge"]) {
    color: var(--q1s-primary);
    text-decoration: none;
    transition: color var(--q1s-dur) var(--q1s-ease);
}

body.site-q1store a:not([class*="btn"]):not([class*="nav-link"]):not(.dropdown-item):not(.page-link):not([class*="badge"]):hover,
.q1s-ds a:not([class*="btn"]):not([class*="nav-link"]):not(.dropdown-item):not(.page-link):not([class*="badge"]):hover {
    color: var(--q1s-primary-hover);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Foco: um so anel, visivel, para tudo que recebe foco. */
body.site-q1store :focus-visible,
.q1s-ds :focus-visible {
    outline: 2px solid var(--q1s-primary);
    outline-offset: 2px;
    border-radius: var(--q1s-radius-control);
}

body.site-q1store ::selection,
.q1s-ds ::selection {
    background: var(--q1s-primary-soft-2);
    color: var(--q1s-text-primary);
}

/* ==========================================================================
   3. TIPOGRAFIA — as classes utilitarias da escala
   ========================================================================== */

.q1s-display,
.q1s-h1,
.q1s-h2,
.q1s-h3,
.q1s-h4,
.q1s-lead,
.q1s-body,
.q1s-small,
.q1s-caption,
.q1s-eyebrow {
    display: block;
    margin: 0;
}

.q1s-display {
    font-size: var(--q1s-fs-display);
    line-height: var(--q1s-lh-display);
    letter-spacing: var(--q1s-ls-display);
    font-weight: var(--q1s-fw-extrabold);
}

.q1s-h1 {
    font-size: var(--q1s-fs-h1);
    line-height: var(--q1s-lh-h1);
    letter-spacing: var(--q1s-ls-h1);
    font-weight: var(--q1s-fw-bold);
}

.q1s-h2 {
    font-size: var(--q1s-fs-h2);
    line-height: var(--q1s-lh-h2);
    letter-spacing: var(--q1s-ls-h2);
    font-weight: var(--q1s-fw-bold);
}

.q1s-h3 {
    font-size: var(--q1s-fs-h3);
    line-height: var(--q1s-lh-h3);
    letter-spacing: var(--q1s-ls-h3);
    font-weight: var(--q1s-fw-semibold);
}

.q1s-h4 {
    font-size: var(--q1s-fs-h4);
    line-height: var(--q1s-lh-h4);
    letter-spacing: var(--q1s-ls-h4);
    font-weight: var(--q1s-fw-semibold);
}

.q1s-lead {
    font-size: var(--q1s-fs-body-lg);
    line-height: var(--q1s-lh-body-lg);
    color: var(--q1s-text-secondary);
}

.q1s-body { font-size: var(--q1s-fs-body); line-height: var(--q1s-lh-body); }

.q1s-small { font-size: var(--q1s-fs-small); line-height: var(--q1s-lh-small); }

.q1s-caption {
    font-size: var(--q1s-fs-caption);
    line-height: var(--q1s-lh-caption);
    color: var(--q1s-text-muted);
}

.q1s-eyebrow {
    font-size: var(--q1s-fs-eyebrow);
    line-height: var(--q1s-lh-eyebrow);
    letter-spacing: var(--q1s-ls-eyebrow);
    font-weight: var(--q1s-fw-bold);
    text-transform: uppercase;
    color: var(--q1s-primary);
}

/* O realce do titulo: nas imagens a segunda metade da frase fica azul.
 * E UM TOKEN, nao um <span> com cor solta — por isso a classe. */
.q1s-hl { color: var(--q1s-primary); }
.q1s-hl-inverse { color: var(--q1s-primary-bright); }

.q1s-text-secondary { color: var(--q1s-text-secondary); }
.q1s-text-muted { color: var(--q1s-text-muted); }
.q1s-text-inverse { color: var(--q1s-text-inverse); }
.q1s-text-inverse-muted { color: var(--q1s-on-inverse-muted); }

/* Tamanhos de titulo no escuro nao mudam; so a cor. */
.q1s-inverse .q1s-h1,
.q1s-inverse .q1s-h2,
.q1s-inverse .q1s-h3,
.q1s-inverse .q1s-display { color: var(--q1s-on-inverse); }

.q1s-inverse { color: var(--q1s-on-inverse-muted); }

.q1s-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   4. LAYOUT — container, secao, pilha, grade
   ========================================================================== */

.q1s-container {
    width: 100%;
    max-width: var(--q1s-container);
    margin-inline: auto;
    padding-inline: var(--q1s-gutter-sm);
}

@media (min-width: 768px) {
    .q1s-container { padding-inline: var(--q1s-gutter); }
}

.q1s-container--narrow { max-width: var(--q1s-container-narrow); }
.q1s-container--wide { max-width: 1320px; }
.q1s-container--flush { padding-inline: 0; }

/* Secao: o ritmo vertical do site. `--alt` e a faixa cinza-fria que separa
 * uma secao da outra nas imagens (nao e "card cinza"). */
.q1s-section { padding-block: var(--q1s-space-9); }
.q1s-section--alt { background: var(--q1s-surface-alt); }
.q1s-section--tight { padding-block: var(--q1s-space-7); }
.q1s-section--roomy { padding-block: var(--q1s-space-11); }

@media (min-width: 992px) {
    .q1s-section { padding-block: var(--q1s-space-10); }
    .q1s-section--tight { padding-block: var(--q1s-space-8); }
    .q1s-section--roomy { padding-block: var(--q1s-space-12); }
}

.q1s-section--inverse {
    background: var(--q1s-surface-inverse);
    color: var(--q1s-on-inverse-muted);
}

/* Cabecalho de secao: eyebrow + titulo + lead. `--split` e a composicao das
 * imagens em que o titulo fica a esquerda e o lead a direita, alinhados pela
 * base. */
.q1s-section-head {
    display: flex;
    flex-direction: column;
    gap: var(--q1s-space-3);
    margin-bottom: var(--q1s-space-8);
    max-width: 62ch;
}

.q1s-section-head .q1s-eyebrow { margin-bottom: var(--q1s-space-1); }
.q1s-section-head .q1s-lead { margin: 0; }

@media (min-width: 992px) {
    .q1s-section-head--split {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: end;
        gap: var(--q1s-space-7) var(--q1s-space-9);
    }
    .q1s-section-head--split .q1s-section-head__aside { padding-bottom: var(--q1s-space-1); }
}

.q1s-section-head--center {
    max-width: 64ch;
    margin-inline: auto;
    text-align: center;
    align-items: center;
}

/* Pilha e linha: o espacador que substitui margens soltas. */
.q1s-stack { display: flex; flex-direction: column; gap: var(--q1s-space-4); }
.q1s-stack--tight { gap: var(--q1s-space-2); }
.q1s-stack--loose { gap: var(--q1s-space-7); }
.q1s-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--q1s-space-3); }
.q1s-row--between { justify-content: space-between; }
.q1s-row--end { justify-content: flex-end; }

/* Grade de cards. `--q1s-cols` define a densidade sem media query por pagina. */
.q1s-grid {
    display: grid;
    gap: var(--q1s-space-5);
    grid-template-columns: repeat(var(--q1s-cols, 1), minmax(0, 1fr));
}

@media (min-width: 576px) {
    .q1s-grid { grid-template-columns: repeat(min(var(--q1s-cols, 1), 2), minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .q1s-grid {
        gap: var(--q1s-space-7);
        grid-template-columns: repeat(var(--q1s-cols, 1), minmax(0, 1fr));
    }
    /* Grade densa (a /recursos com cinco cards por linha): os cards ficam
     * estreitos, entao o texto acompanha a proporcao do mockup. */
    .q1s-grid--dense {
        gap: var(--q1s-space-4);
    }
    .q1s-grid--dense .q1s-card__title { font-size: var(--q1s-fs-small); }
    .q1s-grid--dense .q1s-card__text { font-size: var(--q1s-fs-caption); line-height: var(--q1s-lh-caption); }
}

/* Duas colunas de conteudo (texto + midia), a composicao do hero. */
.q1s-split { display: grid; gap: var(--q1s-space-8); align-items: center; }

@media (min-width: 992px) {
    .q1s-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--q1s-space-10); }
    .q1s-split--aside-first > :first-child { order: -1; }
    .q1s-split--text { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* Rolagem horizontal com snap. Existe para a barra de filtros/chips do mobile
 * NAO virar tres linhas de botoes: ela rola, com o item ativo encostado. */
.q1s-scroller {
    display: flex;
    gap: var(--q1s-space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: var(--q1s-space-2);
}

.q1s-scroller > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Barra de acao fixa: no mobile o CTA principal fica ao alcance do polegar. */
.q1s-actionbar {
    position: sticky;
    bottom: 0;
    z-index: var(--q1s-z-header);
    display: flex;
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-3) var(--q1s-gutter-sm);
    background: var(--q1s-surface);
    border-top: 1px solid var(--q1s-border);
    box-shadow: var(--q1s-shadow-3);
}

@media (min-width: 992px) {
    .q1s-actionbar {
        position: static;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        justify-content: flex-end;
    }
}

.q1s-actionbar .q1s-btn { flex: 1 1 0; }

@media (min-width: 992px) {
    .q1s-actionbar .q1s-btn { flex: 0 0 auto; }
}

/* ==========================================================================
   5. BOTAO
   Estados: default, hover, active, focus-visible, disabled, loading, block,
   com icone, so-icone. Altura = --q1s-control-h (44px = alvo AA).
   ========================================================================== */

.q1s-btn {
    --q1s-btn-bg: var(--q1s-primary);
    --q1s-btn-fg: var(--q1s-on-primary);
    --q1s-btn-border: transparent;
    --q1s-btn-bg-hover: var(--q1s-primary-hover);
    --q1s-btn-border-hover: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--q1s-space-2);
    min-height: var(--q1s-control-h);
    padding: var(--q1s-space-3) var(--q1s-space-6);
    border: 1px solid var(--q1s-btn-border);
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-btn-bg);
    color: var(--q1s-btn-fg);
    font-family: inherit;
    font-size: var(--q1s-fs-body);
    font-weight: var(--q1s-fw-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--q1s-dur) var(--q1s-ease),
                border-color var(--q1s-dur) var(--q1s-ease),
                color var(--q1s-dur) var(--q1s-ease),
                box-shadow var(--q1s-dur) var(--q1s-ease),
                transform var(--q1s-dur) var(--q1s-ease);
}

.q1s-btn:hover {
    background: var(--q1s-btn-bg-hover);
    border-color: var(--q1s-btn-border-hover);
    color: var(--q1s-btn-fg);
    text-decoration: none;
}

.q1s-btn:active { transform: translateY(1px); }

.q1s-btn:focus-visible {
    outline: 2px solid var(--q1s-primary);
    outline-offset: 2px;
}

/* --- Variantes ---------------------------------------------------------- */

/* Secundario: contorno. Nas imagens aparece sobre claro e sobre o navy. */
.q1s-btn--outline {
    --q1s-btn-bg: transparent;
    --q1s-btn-fg: var(--q1s-text-primary);
    --q1s-btn-border: var(--q1s-border-strong);
    --q1s-btn-bg-hover: var(--q1s-surface-alt);
    --q1s-btn-border-hover: var(--q1s-text-primary);
}

/* Sobre superficie escura: preenchido claro. */
.q1s-btn--light {
    --q1s-btn-bg: var(--q1s-surface);
    --q1s-btn-fg: var(--q1s-primary);
    --q1s-btn-bg-hover: var(--q1s-primary-soft);
}

/* Sobre superficie escura: contorno claro. */
.q1s-btn--outline-light {
    --q1s-btn-bg: transparent;
    --q1s-btn-fg: var(--q1s-on-inverse);
    --q1s-btn-border: var(--q1s-border-inverse);
    --q1s-btn-bg-hover: rgba(255, 255, 255, 0.10);
    --q1s-btn-border-hover: rgba(255, 255, 255, 0.42);
}

/* Sem fundo, so texto + icone: o "Saiba mais ->" dos cards. */
.q1s-btn--ghost {
    --q1s-btn-bg: transparent;
    --q1s-btn-fg: var(--q1s-primary);
    --q1s-btn-bg-hover: var(--q1s-primary-soft);
    padding-inline: var(--q1s-space-3);
}

.q1s-btn--soft {
    --q1s-btn-bg: var(--q1s-primary-soft);
    --q1s-btn-fg: var(--q1s-primary);
    --q1s-btn-bg-hover: var(--q1s-primary-soft-2);
}

.q1s-btn--danger {
    --q1s-btn-bg: var(--q1s-danger);
    --q1s-btn-bg-hover: var(--q1s-danger-hover);
}

/* Secundario solido do painel: o "Filtrar"/"Aplicar" precisa de peso proprio
 * sem virar primario. O DS do site nao tinha — o painel tem. */
.q1s-btn--secondary {
    --q1s-btn-bg: var(--q1s-surface-alt);
    --q1s-btn-fg: var(--q1s-text-primary);
    --q1s-btn-border: var(--q1s-border-strong);
    --q1s-btn-bg-hover: var(--q1s-surface-sunken);
    --q1s-btn-border-hover: var(--q1s-border-strong);
}

/* Neutro do painel: o "aguardando"/"rascunho"/"desativado" que no core era
 * `secondary`. O DS do site nao tinha — o painel tem. */
.q1s-badge--neutral { background: var(--q1s-surface-sunken); color: var(--q1s-text-secondary); }
.q1s-badge--neutral::before { display: none; }

/* --- Tamanhos ----------------------------------------------------------- */

.q1s-btn--sm {
    min-height: var(--q1s-control-h-sm);
    padding: var(--q1s-space-2) var(--q1s-space-4);
    font-size: var(--q1s-fs-small);
}

.q1s-btn--lg {
    min-height: 52px;
    padding: var(--q1s-space-4) var(--q1s-space-7);
    font-size: var(--q1s-fs-body-lg);
}

.q1s-btn--block { display: flex; width: 100%; }

/* Botao so de icone: quadrado de 44px, raio de controle (nao pill). */
.q1s-btn--icon {
    width: var(--q1s-tap);
    min-height: var(--q1s-tap);
    padding: 0;
    border-radius: var(--q1s-radius-control);
    font-size: 1.125rem;
}

.q1s-btn--icon.q1s-btn--sm {
    width: var(--q1s-control-h-sm);
    min-height: var(--q1s-control-h-sm);
}

.q1s-btn i { font-size: 1.05em; line-height: 1; }

/* --- Desabilitado e carregando ------------------------------------------
 * Desabilitado perde contraste de proposito, mas continua LEGIVEL e mantem o
 * alvo. Carregando preserva a largura: o rotulo fica transparente e o giro
 * entra no lugar, para o layout nao pular.
 */
.q1s-btn:disabled,
.q1s-btn[aria-disabled="true"],
.q1s-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.q1s-btn.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.q1s-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.05em;
    height: 1.05em;
    border: 2px solid var(--q1s-btn-fg);
    border-top-color: transparent;
    border-radius: 50%;
    animation: q1s-spin 700ms linear infinite;
}

@keyframes q1s-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .q1s-btn,
    .q1s-card,
    .q1s-input,
    .q1s-nav-link { transition: none; }
    .q1s-btn.is-loading::after { animation-duration: 1.6s; }
    .q1s-btn:active { transform: none; }
}

/* ==========================================================================
   6. FORMULARIO — label, input, select, textarea, check, radio, switch
   O projeto ja carrega Bootstrap 5, entao os componentes de form do BS
   continuam funcionando. Estas classes existem para dar IDENTIDADE (raio,
   altura, anel de foco, mensagem de erro) sem depender de `form-control`.
   Estados: default, hover, focus, disabled, readonly, error, success.
   ========================================================================== */

.q1s-field { display: flex; flex-direction: column; gap: var(--q1s-space-2); }

.q1s-label {
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-semibold);
    color: var(--q1s-text-primary);
}

/* O asterisco de obrigatorio e TEXTO, nao so cor. */
.q1s-label--required::after {
    content: " *";
    color: var(--q1s-danger);
    font-weight: var(--q1s-fw-bold);
}

/* Apelido do painel: as views escrevem `q1s-required` no span do asterisco.
 * Mesma regra, mesmo significado. */
.q1s-required { color: var(--q1s-danger); font-weight: var(--q1s-fw-bold); }

.q1s-input,
.q1s-select,
.q1s-textarea {
    width: 100%;
    min-height: var(--q1s-control-h);
    padding: var(--q1s-space-3) var(--q1s-space-4);
    border: 1px solid var(--q1s-border-strong);
    border-radius: var(--q1s-radius-control);
    background: var(--q1s-surface);
    color: var(--q1s-text-primary);
    font-family: inherit;
    font-size: var(--q1s-fs-body);
    line-height: 1.4;
    transition: border-color var(--q1s-dur) var(--q1s-ease),
                box-shadow var(--q1s-dur) var(--q1s-ease);
}

.q1s-textarea { min-height: 120px; resize: vertical; }

.q1s-select {
    appearance: none;
    padding-right: var(--q1s-space-8);
    /* A seta e um gradiente de borda, nao um url(): nada externo, nada de
     * base64, e ela herda a cor do token. */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--q1s-text-muted) 50%),
        linear-gradient(135deg, var(--q1s-text-muted) 50%, transparent 50%);
    background-position:
        right var(--q1s-space-5) center,
        right calc(var(--q1s-space-5) - 5px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.q1s-input::placeholder,
.q1s-textarea::placeholder { color: var(--q1s-text-muted); opacity: 1; }

.q1s-input:hover,
.q1s-select:hover,
.q1s-textarea:hover { border-color: var(--q1s-text-muted); }

.q1s-input:focus,
.q1s-select:focus,
.q1s-textarea:focus {
    outline: none;
    border-color: var(--q1s-primary);
    box-shadow: var(--q1s-ring);
}

.q1s-input:disabled,
.q1s-select:disabled,
.q1s-textarea:disabled,
.q1s-input[readonly] {
    background: var(--q1s-surface-sunken);
    color: var(--q1s-text-muted);
    cursor: not-allowed;
}

/* Erro e sucesso: cor + borda + a mensagem em texto com icone. Nunca so cor. */
.q1s-field--error .q1s-input,
.q1s-field--error .q1s-select,
.q1s-field--error .q1s-textarea,
.q1s-input.is-invalid {
    border-color: var(--q1s-danger);
}

.q1s-field--error .q1s-input:focus,
.q1s-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(var(--q1s-danger-rgb), 0.20);
}

.q1s-field--success .q1s-input,
.q1s-field--success .q1s-select,
.q1s-field--success .q1s-textarea {
    border-color: var(--q1s-success);
}

.q1s-help {
    font-size: var(--q1s-fs-caption);
    color: var(--q1s-text-muted);
}

.q1s-help--error { color: var(--q1s-danger); font-weight: var(--q1s-fw-medium); }
.q1s-help--success { color: var(--q1s-success); font-weight: var(--q1s-fw-medium); }

/* Grupo: input com botao/icone colado na direita (busca). */
.q1s-field-group { display: flex; gap: var(--q1s-space-2); }
.q1s-field-group .q1s-input { flex: 1 1 auto; }

/* Check e radio: caixa de 20px com area de toque de 44px no label. */
.q1s-check {
    display: flex;
    align-items: flex-start;
    gap: var(--q1s-space-3);
    min-height: var(--q1s-tap);
    padding-block: var(--q1s-space-1);
    cursor: pointer;
}

.q1s-check input[type="checkbox"],
.q1s-check input[type="radio"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    margin-top: 0.15em;
    accent-color: var(--q1s-primary);
    cursor: pointer;
}

.q1s-check input:focus-visible {
    outline: 2px solid var(--q1s-primary);
    outline-offset: 2px;
}

.q1s-check__text { font-size: var(--q1s-fs-body); line-height: var(--q1s-lh-small); }
.q1s-check__text small { display: block; color: var(--q1s-text-muted); font-size: var(--q1s-fs-caption); }

/* Grupo de campos lado a lado que colapsa no mobile. */
.q1s-fields {
    display: grid;
    gap: var(--q1s-space-4);
    grid-template-columns: repeat(var(--q1s-field-cols, 1), minmax(0, 1fr));
}

@media (min-width: 768px) {
    .q1s-fields { grid-template-columns: repeat(var(--q1s-field-cols, 1), minmax(0, 1fr)); }
}

.q1s-fieldset { border: 0; padding: 0; margin: 0 0 var(--q1s-space-6); }
.q1s-legend {
    font-size: var(--q1s-fs-h4);
    font-weight: var(--q1s-fw-semibold);
    margin-bottom: var(--q1s-space-4);
}

/* ==========================================================================
   7. CARD
   Nas imagens o card e BRANCO com borda quase invisivel e sombra no repouso.
   Elevacao so no hover, e so quando o card inteiro e clicavel.
   ========================================================================== */

.q1s-card {
    display: flex;
    flex-direction: column;
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    box-shadow: var(--q1s-shadow-1);
    overflow: hidden;
}

.q1s-card--flat { box-shadow: none; }
.q1s-card--raised { box-shadow: var(--q1s-shadow-2); }
.q1s-card--inverse {
    background: var(--q1s-surface-inverse);
    border-color: var(--q1s-border-inverse);
    color: var(--q1s-on-inverse-muted);
}

.q1s-card--alt { background: var(--q1s-surface-alt); }

/* Card clicavel: um so alvo. O foco vai para o link interno via `:focus-within`
 * para o anel aparecer no card inteiro, e nao num pedaco. */
.q1s-card--interactive { transition: transform var(--q1s-dur) var(--q1s-ease), box-shadow var(--q1s-dur) var(--q1s-ease), border-color var(--q1s-dur) var(--q1s-ease); }
.q1s-card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--q1s-shadow-2);
    border-color: var(--q1s-primary-soft-2);
}
.q1s-card--interactive:focus-within {
    border-color: var(--q1s-primary);
    box-shadow: var(--q1s-ring);
}

.q1s-card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--q1s-surface-alt);
}

.q1s-card__media img,
.q1s-card__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.q1s-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--q1s-space-2);
    flex: 1 1 auto;
    padding: var(--q1s-space-5) var(--q1s-space-6);
}

.q1s-card__title {
    font-size: var(--q1s-fs-h4);
    line-height: var(--q1s-lh-h4);
    font-weight: var(--q1s-fw-semibold);
    color: var(--q1s-text-primary);
    margin: 0;
}

.q1s-card__text {
    font-size: var(--q1s-fs-small);
    line-height: var(--q1s-lh-small);
    color: var(--q1s-text-secondary);
    margin: 0;
    flex: 1 1 auto;
}

.q1s-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-4) var(--q1s-space-6);
    border-top: 1px solid var(--q1s-border);
    background: var(--q1s-surface-alt);
}

.q1s-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-4) var(--q1s-space-6);
    border-bottom: 1px solid var(--q1s-border);
}

/* Card de metrica do painel: numero grande, rotulo, variacao. */
.q1s-metric {
    display: flex;
    flex-direction: column;
    gap: var(--q1s-space-2);
    padding: var(--q1s-space-5) var(--q1s-space-6);
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    box-shadow: var(--q1s-shadow-1);
}

.q1s-metric__label {
    font-size: var(--q1s-fs-caption);
    font-weight: var(--q1s-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--q1s-text-muted);
}

.q1s-metric__value {
    font-size: var(--q1s-fs-h2);
    line-height: 1.1;
    letter-spacing: var(--q1s-ls-h2);
    font-weight: var(--q1s-fw-bold);
    color: var(--q1s-text-primary);
    font-variant-numeric: tabular-nums;
}

.q1s-metric__delta { font-size: var(--q1s-fs-small); font-weight: var(--q1s-fw-semibold); }
.q1s-metric__delta--up { color: var(--q1s-success); }
.q1s-metric__delta--down { color: var(--q1s-danger); }

/* ==========================================================================
   8. BADGE, CHIP, PILL, TAG
   Badge = status (com icone/ponto + texto). Chip = filtro clicavel.
   Pill = rotulo neutro. Sao tres coisas diferentes e por isso tres classes.
   ========================================================================== */

.q1s-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--q1s-space-2);
    padding: var(--q1s-space-1) var(--q1s-space-3);
    border: 1px solid transparent;
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-surface-sunken);
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-caption);
    font-weight: var(--q1s-fw-semibold);
    line-height: 1.5;
    white-space: nowrap;
}

/* O ponto carrega a cor; o TEXTO diz o estado. Nunca so o ponto. */
.q1s-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.q1s-badge--plain::before { display: none; }

.q1s-badge--success { background: var(--q1s-success-soft); color: var(--q1s-success); }
.q1s-badge--warning { background: var(--q1s-warning-soft); color: var(--q1s-warning); }
.q1s-badge--danger { background: var(--q1s-danger-soft); color: var(--q1s-danger); }
.q1s-badge--info { background: var(--q1s-info-soft); color: var(--q1s-info); }
.q1s-badge--primary { background: var(--q1s-primary-soft); color: var(--q1s-primary); }
.q1s-badge--accent { background: var(--q1s-accent-soft); color: var(--q1s-on-accent-soft); }
.q1s-badge--whatsapp { background: var(--q1s-whatsapp-soft); color: var(--q1s-on-whatsapp-soft); }

/* Chip de filtro: alvo de 44px, estado selecionado com fundo E contorno. */
.q1s-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--q1s-space-2);
    min-height: var(--q1s-tap);
    padding: var(--q1s-space-2) var(--q1s-space-4);
    border: 1px solid var(--q1s-border-strong);
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-surface);
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-semibold);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--q1s-dur) var(--q1s-ease),
                border-color var(--q1s-dur) var(--q1s-ease),
                color var(--q1s-dur) var(--q1s-ease);
}

.q1s-chip:hover {
    border-color: var(--q1s-primary);
    color: var(--q1s-primary);
    text-decoration: none;
}

.q1s-chip[aria-pressed="true"],
.q1s-chip[aria-selected="true"],
.q1s-chip.is-active {
    background: var(--q1s-primary);
    border-color: var(--q1s-primary);
    color: var(--q1s-on-primary);
}

.q1s-chip:disabled { opacity: 0.55; cursor: not-allowed; }

/* Pill neutra (nao clicavel): contagem, categoria, rotulo curto. */
.q1s-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--q1s-space-1);
    padding: var(--q1s-space-1) var(--q1s-space-3);
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-surface-sunken);
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-caption);
    font-weight: var(--q1s-fw-medium);
    white-space: nowrap;
}

/* Selo de destaque comercial (o "Mais vendido" da imagem). */
.q1s-seal {
    display: inline-flex;
    align-items: center;
    gap: var(--q1s-space-1);
    padding: var(--q1s-space-1) var(--q1s-space-3);
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-accent);
    color: var(--q1s-on-accent);
    font-size: var(--q1s-fs-caption);
    font-weight: var(--q1s-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   9. ALERTA / ESTADO VAZIO / ERRO
   Todo estado tem icone + titulo + acao. Cor e reforco, nao o recado.
   ========================================================================== */

.q1s-alert {
    display: flex;
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-4) var(--q1s-space-5);
    border: 1px solid var(--q1s-border);
    border-left: 3px solid var(--q1s-text-muted);
    border-radius: var(--q1s-radius-control);
    background: var(--q1s-surface-alt);
    font-size: var(--q1s-fs-small);
}

.q1s-alert__icon { flex: 0 0 auto; font-size: 1.15rem; line-height: 1.4; }
.q1s-alert__body { flex: 1 1 auto; }
.q1s-alert__title { font-weight: var(--q1s-fw-semibold); margin: 0 0 var(--q1s-space-1); }
.q1s-alert__body > :last-child { margin-bottom: 0; }

.q1s-alert--success { border-left-color: var(--q1s-success); background: var(--q1s-success-soft); color: var(--q1s-on-success-soft); }
.q1s-alert--warning { border-left-color: var(--q1s-warning); background: var(--q1s-warning-soft); color: var(--q1s-on-warning-soft); }
.q1s-alert--danger  { border-left-color: var(--q1s-danger); background: var(--q1s-danger-soft); color: var(--q1s-on-danger-soft); }
.q1s-alert--info    { border-left-color: var(--q1s-info); background: var(--q1s-info-soft); color: var(--q1s-on-info-soft); }
.q1s-alert--primary { border-left-color: var(--q1s-primary); background: var(--q1s-primary-soft); color: var(--q1s-on-primary-soft); }

.q1s-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-9) var(--q1s-space-6);
    border: 1px dashed var(--q1s-border-strong);
    border-radius: var(--q1s-radius-card);
    background: var(--q1s-surface-alt);
    text-align: center;
}

.q1s-empty__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--q1s-radius-icon);
    background: var(--q1s-primary-soft);
    color: var(--q1s-primary);
    font-size: 1.6rem;
}

.q1s-empty__title { font-size: var(--q1s-fs-h4); font-weight: var(--q1s-fw-semibold); margin: 0; }
.q1s-empty__text { max-width: 46ch; margin: 0; color: var(--q1s-text-secondary); font-size: var(--q1s-fs-small); }

/* ==========================================================================
   10. ICONE
   Uma familia so: Bootstrap Icons (`bi bi-*`), que ja esta carregada.
   Regra de uso: o icone acompanha um rotulo, nunca substitui sozinho um
   significado. Quando e so decoracao, vai `aria-hidden="true"`.
   ========================================================================== */

.q1s-icon-tile {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--q1s-radius-icon);
    background: var(--q1s-primary-soft);
    color: var(--q1s-primary);
    font-size: 1.25rem;
}

.q1s-icon-tile--sm { width: 34px; height: 34px; font-size: 1rem; }
.q1s-icon-tile--lg { width: 56px; height: 56px; font-size: 1.6rem; }
.q1s-icon-tile--circle { border-radius: 50%; }
.q1s-icon-tile--inverse { background: rgba(255, 255, 255, 0.12); color: var(--q1s-on-inverse); }
.q1s-icon-tile--success { background: var(--q1s-success-soft); color: var(--q1s-success); }
.q1s-icon-tile--whatsapp { background: var(--q1s-whatsapp-soft); color: var(--q1s-whatsapp); }
.q1s-icon-tile--accent { background: var(--q1s-accent-soft); color: var(--q1s-on-accent-soft); }

/* Lista com marca de confirmacao (o "check" azul das imagens). */
.q1s-checklist { display: flex; flex-direction: column; gap: var(--q1s-space-3); list-style: none; margin: 0; padding: 0; }
.q1s-checklist__item { display: flex; align-items: flex-start; gap: var(--q1s-space-3); font-size: var(--q1s-fs-body); }
.q1s-checklist__item i { color: var(--q1s-primary); font-size: 1.1rem; line-height: 1.5; flex: 0 0 auto; }
.q1s-checklist--inverse .q1s-checklist__item { color: var(--q1s-on-inverse); }
.q1s-checklist--inverse .q1s-checklist__item i { color: var(--q1s-on-inverse); }

/* Estrelas de avaliacao: o valor tambem vai em texto para leitor de tela. */
.q1s-stars { display: inline-flex; gap: 2px; color: var(--q1s-accent); font-size: 1rem; }
.q1s-stars i { line-height: 1; }

/* ==========================================================================
   11. TABELA
   Desktop: tabela normal com cabecalho fixo e numeros tabulares.
   Mobile (<=480px): `.q1s-table--stack` TRANSFORMA cada linha em um cartao
   com rotulo a esquerda, lido de `data-label`. Empilhar a tabela como ela e
   nao funciona: as colunas viram uma tira de texto sem sentido.
   ========================================================================== */

.q1s-table-wrap {
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    background: var(--q1s-surface);
    box-shadow: var(--q1s-shadow-1);
    overflow-x: auto;
}

.q1s-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--q1s-fs-small);
}

.q1s-table caption {
    caption-side: top;
    padding: var(--q1s-space-4) var(--q1s-space-6);
    text-align: left;
    color: var(--q1s-text-muted);
    font-size: var(--q1s-fs-caption);
}

.q1s-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--q1s-space-3) var(--q1s-space-5);
    background: var(--q1s-surface-alt);
    border-bottom: 1px solid var(--q1s-border);
    color: var(--q1s-text-muted);
    font-size: var(--q1s-fs-caption);
    font-weight: var(--q1s-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    white-space: nowrap;
}

.q1s-table tbody td {
    padding: var(--q1s-space-4) var(--q1s-space-5);
    border-bottom: 1px solid var(--q1s-border);
    color: var(--q1s-text-primary);
    vertical-align: middle;
}

.q1s-table tbody tr:last-child td { border-bottom: 0; }
.q1s-table tbody tr:hover { background: var(--q1s-surface-alt); }

/* Numeros alinham pela direita e usam figuras tabulares: e o que faz uma
 * coluna de dinheiro parecer uma coluna. */
.q1s-table .q1s-num,
.q1s-table th.q1s-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.q1s-table .q1s-col-actions { width: 1%; white-space: nowrap; text-align: right; }

@media (max-width: 480px) {
    .q1s-table--stack { border-collapse: separate; border-spacing: 0 var(--q1s-space-3); }

    .q1s-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

    .q1s-table--stack tbody tr {
        display: block;
        padding: var(--q1s-space-3) var(--q1s-space-4);
        border: 1px solid var(--q1s-border);
        border-radius: var(--q1s-radius-card);
        background: var(--q1s-surface);
        box-shadow: var(--q1s-shadow-1);
    }

    .q1s-table--stack tbody tr:hover { background: var(--q1s-surface); }

    .q1s-table--stack tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--q1s-space-4);
        padding: var(--q1s-space-2) 0;
        border: 0;
        text-align: right;
    }

    /* O rotulo vem do HTML (`data-label`), nao de um ::before generico: sem
     * dado, nao ha rotulo inventado. */
    .q1s-table--stack tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--q1s-text-muted);
        font-size: var(--q1s-fs-caption);
        font-weight: var(--q1s-fw-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
    }

    .q1s-table--stack tbody td[data-label=""]::before,
    .q1s-table--stack tbody td:not([data-label])::before { display: none; }

    .q1s-table--stack tbody td.q1s-num { text-align: right; }
    .q1s-table--stack .q1s-col-actions { text-align: right; }
    .q1s-table--stack tbody td:first-child { border-bottom: 1px solid var(--q1s-border); padding-bottom: var(--q1s-space-3); }
}

/* ==========================================================================
   12. AVATAR, MIDIA, SKELETON
   ========================================================================== */

.q1s-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--q1s-primary-soft);
    color: var(--q1s-primary);
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-bold);
    overflow: hidden;
}

.q1s-avatar img { width: 100%; height: 100%; object-fit: cover; }
.q1s-avatar--sm { width: 28px; height: 28px; font-size: var(--q1s-fs-caption); }
.q1s-avatar--lg { width: 56px; height: 56px; font-size: var(--q1s-fs-h4); }

.q1s-media {
    border-radius: var(--q1s-radius-media);
    overflow: hidden;
    background: var(--q1s-surface-alt);
}

.q1s-media img { display: block; width: 100%; height: auto; }

/* Skeleton: usado enquanto o conteudo carrega. `prefers-reduced-motion`
 * congela o brilho, mas o bloco continua visivel. */
.q1s-skeleton {
    border-radius: var(--q1s-radius-media);
    background: linear-gradient(90deg, var(--q1s-surface-sunken) 25%, var(--q1s-surface-alt) 37%, var(--q1s-surface-sunken) 63%);
    background-size: 400% 100%;
    animation: q1s-shimmer 1.4s ease infinite;
    min-height: 1em;
}

@keyframes q1s-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .q1s-skeleton { animation: none; background: var(--q1s-surface-sunken); }
}

/* ==========================================================================
   13. NAVEGACAO
   Desktop: barra horizontal com o item ativo sublinhado.
   Mobile: o mesmo markup vira GAVETA de tela cheia. Nao e o menu empilhado —
   e outro comportamento, com alvo de 44px por linha e um botao de fechar.
   ========================================================================== */

.q1s-nav { display: flex; align-items: center; gap: var(--q1s-space-1); }

.q1s-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--q1s-space-2);
    min-height: var(--q1s-tap);
    padding: var(--q1s-space-2) var(--q1s-space-3);
    border-radius: var(--q1s-radius-control);
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--q1s-dur) var(--q1s-ease), background-color var(--q1s-dur) var(--q1s-ease);
}

.q1s-nav-link:hover { color: var(--q1s-text-primary); background: var(--q1s-surface-alt); text-decoration: none; }

/* Ativo: cor + sublinhado. Dois sinais, nao so cor. */
.q1s-nav-link.is-active,
.q1s-nav-link[aria-current="page"] {
    color: var(--q1s-primary);
    box-shadow: inset 0 -2px 0 var(--q1s-primary);
}

.q1s-inverse .q1s-nav-link { color: var(--q1s-on-inverse-muted); }
.q1s-inverse .q1s-nav-link:hover { color: var(--q1s-on-inverse); background: rgba(255, 255, 255, 0.08); }
.q1s-inverse .q1s-nav-link.is-active,
.q1s-inverse .q1s-nav-link[aria-current="page"] { color: var(--q1s-on-inverse); box-shadow: inset 0 -2px 0 var(--q1s-primary-bright); }

/* Cabecalho: altura de token, borda inferior, superficie clara. */
.q1s-header {
    position: sticky;
    top: 0;
    z-index: var(--q1s-z-header);
    background: var(--q1s-surface);
    border-bottom: 1px solid var(--q1s-border);
}

.q1s-header__inner {
    display: flex;
    align-items: center;
    gap: var(--q1s-space-5);
    min-height: var(--q1s-header-h);
}

.q1s-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--q1s-space-3); }

/* O botao de menu so existe no mobile; o menu horizontal so no desktop. */
.q1s-nav-toggle { display: inline-flex; }

@media (min-width: 992px) {
    .q1s-nav-toggle { display: none; }
}

@media (max-width: 991.98px) {
    /* A barra horizontal some e a gaveta assume. */
    .q1s-nav--bar { display: none; }
}

/* Gaveta: tela cheia no mobile, alvo de 44px por linha. */
.q1s-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--q1s-z-drawer);
    display: flex;
    flex-direction: column;
    background: var(--q1s-surface);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.q1s-drawer[hidden] { display: none; }

.q1s-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--q1s-space-3);
    min-height: var(--q1s-header-h);
    padding-inline: var(--q1s-gutter-sm);
    border-bottom: 1px solid var(--q1s-border);
}

.q1s-drawer__body { padding: var(--q1s-space-4) var(--q1s-gutter-sm) var(--q1s-space-8); }

.q1s-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--q1s-space-3);
    min-height: var(--q1s-tap);
    padding: var(--q1s-space-3) 0;
    border-bottom: 1px solid var(--q1s-border);
    color: var(--q1s-text-primary);
    font-size: var(--q1s-fs-body-lg);
    font-weight: var(--q1s-fw-semibold);
    text-decoration: none;
}

.q1s-drawer__link:hover { color: var(--q1s-primary); text-decoration: none; }
.q1s-drawer__cta { margin-top: var(--q1s-space-5); display: grid; gap: var(--q1s-space-3); }

/* ==========================================================================
   14. TABS, BREADCRUMB, PAGINACAO
   ========================================================================== */

.q1s-tabs {
    display: flex;
    gap: var(--q1s-space-1);
    border-bottom: 1px solid var(--q1s-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.q1s-tabs::-webkit-scrollbar { display: none; }

.q1s-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--q1s-space-2);
    min-height: var(--q1s-tap);
    padding: var(--q1s-space-2) var(--q1s-space-4);
    border: 0;
    background: none;
    color: var(--q1s-text-secondary);
    font-family: inherit;
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-semibold);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color var(--q1s-dur) var(--q1s-ease), box-shadow var(--q1s-dur) var(--q1s-ease);
}

.q1s-tab:hover { color: var(--q1s-text-primary); text-decoration: none; }

.q1s-tab[aria-selected="true"],
.q1s-tab.is-active {
    color: var(--q1s-primary);
    box-shadow: inset 0 -2px 0 var(--q1s-primary);
}

.q1s-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--q1s-space-2); list-style: none; margin: 0; padding: 0; }
.q1s-crumbs li { display: flex; align-items: center; gap: var(--q1s-space-2); font-size: var(--q1s-fs-caption); color: var(--q1s-text-muted); }
.q1s-crumbs li + li::before { content: "/"; color: var(--q1s-border-strong); }
.q1s-crumbs a { color: var(--q1s-text-muted); }
.q1s-crumbs [aria-current="page"] { color: var(--q1s-text-primary); font-weight: var(--q1s-fw-semibold); }

.q1s-pagination { display: flex; flex-wrap: wrap; gap: var(--q1s-space-2); list-style: none; margin: 0; padding: 0; }

.q1s-page-link {
    display: grid;
    place-items: center;
    min-width: var(--q1s-tap);
    min-height: var(--q1s-tap);
    padding: 0 var(--q1s-space-3);
    border: 1px solid var(--q1s-border-strong);
    border-radius: var(--q1s-radius-control);
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-semibold);
    text-decoration: none;
}

.q1s-page-link:hover { border-color: var(--q1s-primary); color: var(--q1s-primary); text-decoration: none; }

.q1s-page-link[aria-current="page"],
.q1s-page-link.is-active {
    background: var(--q1s-primary);
    border-color: var(--q1s-primary);
    color: var(--q1s-on-primary);
}

.q1s-page-link[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* ==========================================================================
   15. ACCORDION (FAQ), MODAL, TOAST
   O accordion usa <details>/<summary>: funciona sem JS e ja vem acessivel.
   ========================================================================== */

.q1s-accordion { border-top: 1px solid var(--q1s-border); }

.q1s-accordion__item { border-bottom: 1px solid var(--q1s-border); }

.q1s-accordion__summary {
    display: flex;
    align-items: center;
    gap: var(--q1s-space-4);
    min-height: var(--q1s-tap);
    padding: var(--q1s-space-5) 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--q1s-fs-h4);
    font-weight: var(--q1s-fw-semibold);
    color: var(--q1s-text-primary);
}

.q1s-accordion__summary::-webkit-details-marker { display: none; }
.q1s-accordion__summary::after {
    content: "\F282"; /* chevron-down do Bootstrap Icons, como codigo, nao url() */
    font-family: "bootstrap-icons";
    margin-left: auto;
    color: var(--q1s-text-muted);
    transition: transform var(--q1s-dur) var(--q1s-ease);
}

.q1s-accordion__item[open] > .q1s-accordion__summary::after { transform: rotate(180deg); }
.q1s-accordion__summary:focus-visible { outline: 2px solid var(--q1s-primary); outline-offset: 2px; }

.q1s-accordion__panel { padding: 0 0 var(--q1s-space-5); color: var(--q1s-text-secondary); max-width: 68ch; }
.q1s-accordion__panel > :last-child { margin-bottom: 0; }

/* Numero do passo, como nas imagens (badge circular antes da pergunta). */
.q1s-step-num {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--q1s-primary-soft);
    color: var(--q1s-primary);
    font-size: var(--q1s-fs-caption);
    font-weight: var(--q1s-fw-bold);
    font-variant-numeric: tabular-nums;
}

.q1s-modal {
    border: 0;
    border-radius: var(--q1s-radius-modal);
    box-shadow: var(--q1s-shadow-4);
    padding: 0;
    max-width: min(560px, calc(100vw - 2 * var(--q1s-gutter-sm)));
}

.q1s-modal::backdrop { background: rgba(1, 16, 42, 0.55); }

.q1s-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-5) var(--q1s-space-6);
    border-bottom: 1px solid var(--q1s-border);
}

.q1s-modal__body { padding: var(--q1s-space-5) var(--q1s-space-6); }
.q1s-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-4) var(--q1s-space-6);
    border-top: 1px solid var(--q1s-border);
    background: var(--q1s-surface-alt);
}

/* No mobile as acoes do modal empilham em largura cheia. */
@media (max-width: 480px) {
    .q1s-modal__foot { flex-direction: column-reverse; }
    .q1s-modal__foot .q1s-btn { width: 100%; }
    .q1s-modal__head,
    .q1s-modal__body,
    .q1s-modal__foot { padding-inline: var(--q1s-space-5); }
}

.q1s-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-4) var(--q1s-space-5);
    border-radius: var(--q1s-radius-control);
    background: var(--q1s-surface-inverse);
    color: var(--q1s-on-inverse);
    box-shadow: var(--q1s-shadow-3);
    font-size: var(--q1s-fs-small);
}

/* ==========================================================================
   16. PAINEL — a variante `.q1s-ds`
   O painel tem sidebar fixa e conteudo deslocado. Estas classes existem para
   o agente de pagina nao precisar inventar medidas: elas usam os MESMOS
   tokens do site, que e o que faz o painel e o site parecerem um produto.
   ========================================================================== */

.q1s-panel { display: flex; min-height: 100vh; background: var(--q1s-surface-alt); }

.q1s-panel__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.q1s-panel__content { padding-block: var(--q1s-space-6); }

@media (min-width: 992px) {
    .q1s-panel__content { padding-block: var(--q1s-space-7); }
}

/* Cabecalho de pagina do painel: titulo + acoes + migalhas. */
.q1s-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--q1s-space-4);
    margin-bottom: var(--q1s-space-6);
}

.q1s-page-head__title { margin: 0; font-size: var(--q1s-fs-h2); line-height: var(--q1s-lh-h2); letter-spacing: var(--q1s-ls-h2); }
.q1s-page-head__lead { margin: var(--q1s-space-1) 0 0; color: var(--q1s-text-secondary); font-size: var(--q1s-fs-small); max-width: 68ch; }
.q1s-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--q1s-space-3); }

/* Barra de ferramentas: busca + filtros. No mobile empilha e a busca vem
 * primeiro, porque e a acao que o usuario mais quer. */
.q1s-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q1s-space-3);
    margin-bottom: var(--q1s-space-5);
}

.q1s-toolbar__search { flex: 1 1 260px; min-width: 0; }
.q1s-toolbar__spacer { margin-left: auto; }

@media (max-width: 480px) {
    .q1s-toolbar { flex-direction: column; align-items: stretch; }
    .q1s-toolbar__spacer { margin-left: 0; }
    .q1s-toolbar .q1s-btn { width: 100%; }
}

/* Rodape do site: superficie escura, colunas que colapsam. */
.q1s-footer {
    background: var(--q1s-surface-inverse);
    color: var(--q1s-on-inverse-muted);
    padding-block: var(--q1s-space-10) var(--q1s-space-6);
}

.q1s-footer a { color: var(--q1s-on-inverse-muted); }
.q1s-footer a:hover { color: var(--q1s-on-inverse); }
.q1s-footer__title {
    color: var(--q1s-on-inverse);
    font-size: var(--q1s-fs-caption);
    font-weight: var(--q1s-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--q1s-space-4);
}

.q1s-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--q1s-space-3); font-size: var(--q1s-fs-small); }
.q1s-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q1s-space-3) var(--q1s-space-6);
    justify-content: space-between;
    margin-top: var(--q1s-space-8);
    padding-top: var(--q1s-space-5);
    border-top: 1px solid var(--q1s-border-inverse);
    font-size: var(--q1s-fs-caption);
}

/* ==========================================================================
   17. AJUSTES DE MOBILE
   390px (iPhone 14/15) e 430px (Pro Max) sao larguras de projeto. O que muda
   aqui e comportamento, nao so tamanho.
   ========================================================================== */

@media (max-width: 480px) {
    body.site-q1store,
    .q1s-ds { --q1s-gutter: var(--q1s-gutter-sm); }

    /* Titulos descem de degrau: display de 56px nao cabe em 390px sem
     * quebrar em 5 linhas. */
    body.site-q1store,
    .q1s-ds {
        --q1s-fs-display: 2.25rem;
        --q1s-fs-h1: 1.875rem;
        --q1s-fs-h2: 1.5rem;
        --q1s-fs-h3: 1.25rem;
    }

    .q1s-card__body { padding: var(--q1s-space-4) var(--q1s-space-5); }
    .q1s-card__header,
    .q1s-card__footer { padding-inline: var(--q1s-space-5); }

    /* Acoes lado a lado viram pilha de largura cheia. */
    .q1s-row--stack-sm { flex-direction: column; align-items: stretch; }
    .q1s-row--stack-sm > .q1s-btn { width: 100%; }

    /* CTA principal sempre com largura cheia no mobile. */
    .q1s-hero-actions,
    .q1s-banner__actions { flex-direction: column; align-items: stretch; }
    .q1s-hero-actions .q1s-btn,
    .q1s-banner__actions .q1s-btn { width: 100%; }

    .q1s-empty { padding: var(--q1s-space-7) var(--q1s-space-5); }

    /* O container nunca encosta na borda. */
    .q1s-container { padding-inline: var(--q1s-gutter-sm); }
}

/* Alvo de toque: em telas de toque, o minimo de 44px vale para todo
 * controle, inclusive os que vem do Bootstrap. */
@media (pointer: coarse) {
    .q1s-ds .btn,
    body.site-q1store .btn { min-height: var(--q1s-tap); }
}

/* ==========================================================================
   18. PONTE COM O PAINEL EXISTENTE
   O painel usa `ch-*` (core.css) e nao vai ser reescrito por este arquivo.
   Estas poucas regras existem para que um agente possa APROXIMAR o painel do
   sistema visual sem editar `core.css`: basta por `q1s-ds` no <body>.
   Ficam escopadas em `.q1s-ds`, entao nao afetam o painel que nao optar por
   entrar no sistema.
   ========================================================================== */

.q1s-ds .ch-card {
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    box-shadow: var(--q1s-shadow-1);
}

.q1s-ds .ch-card-body { padding: var(--q1s-space-5) var(--q1s-space-6); }

.q1s-ds .ch-text-secondary { color: var(--q1s-text-secondary); }

.q1s-ds .btn-primary {
    --bs-btn-bg: var(--q1s-primary);
    --bs-btn-border-color: var(--q1s-primary);
    --bs-btn-hover-bg: var(--q1s-primary-hover);
    --bs-btn-hover-border-color: var(--q1s-primary-hover);
    --bs-btn-active-bg: var(--q1s-primary-active);
    --bs-btn-active-border-color: var(--q1s-primary-active);
    --bs-btn-focus-shadow-rgb: var(--q1s-primary-rgb);
    --bs-btn-border-radius: var(--q1s-radius-pill);
}

.q1s-ds .form-control,
    .q1s-ds .form-select {
    min-height: var(--q1s-control-h);
    border-radius: var(--q1s-radius-control);
    border-color: var(--q1s-border-strong);
}

.q1s-ds .form-control:focus,
    .q1s-ds .form-select:focus {
    border-color: var(--q1s-primary);
    box-shadow: var(--q1s-ring);
}

.q1s-ds .table {
    --bs-table-border-color: var(--q1s-border);
    --bs-table-hover-bg: var(--q1s-surface-alt);
}

/* ==========================================================================
   19. FAIXA DE CTA E DETALHES FINAIS
   ========================================================================== */

/* Banner: a faixa navy de largura cheia que fecha uma pagina. Raio de banner
 * quando e um bloco dentro do container; sem raio quando e sangrado. */
.q1s-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--q1s-space-6);
    padding: var(--q1s-space-8) var(--q1s-space-7);
    border-radius: var(--q1s-radius-banner);
    background: linear-gradient(120deg, var(--q1s-surface-inverse), var(--q1s-surface-inverse-2));
    color: var(--q1s-on-inverse-muted);
}

.q1s-banner--flush { border-radius: 0; padding-inline: var(--q1s-gutter); }
.q1s-banner__title { color: var(--q1s-on-inverse); margin: 0 0 var(--q1s-space-2); }
.q1s-banner__text { margin: 0; max-width: 56ch; font-size: var(--q1s-fs-small); }

@media (max-width: 480px) {
    .q1s-banner { padding: var(--q1s-space-6) var(--q1s-space-5); }
    .q1s-banner .q1s-btn { width: 100%; }
}

/* Superficie escura generica: o hero e o rodape compartilham o gradiente. */
.q1s-inverse-bg {
    background: linear-gradient(135deg, var(--q1s-surface-inverse), var(--q1s-surface-inverse-2));
    color: var(--q1s-on-inverse-muted);
}

/* Codigo, identificador de pedido, SKU, slug. */
.q1s-mono {
    font-family: var(--q1s-font-mono);
    font-size: 0.94em;
    font-variant-numeric: tabular-nums;
}

/* Quebra longa de URL publica (peça impressa, destino do QR). */
.q1s-break { overflow-wrap: anywhere; }

/* Peso explicito quando o peso do elemento nao serve. */
.q1s-fw-regular { font-weight: var(--q1s-fw-regular); }
.q1s-fw-medium { font-weight: var(--q1s-fw-medium); }
.q1s-fw-semibold { font-weight: var(--q1s-fw-semibold); }
.q1s-fw-bold { font-weight: var(--q1s-fw-bold); }

/* Superficie de nivel 2 (dropdown, popover, gaveta). */
.q1s-popover {
    z-index: var(--q1s-z-modal);
    min-width: 220px;
    padding: var(--q1s-space-2);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-control);
    background: var(--q1s-surface);
    box-shadow: var(--q1s-shadow-3);
}

.q1s-popover__item {
    display: flex;
    align-items: center;
    gap: var(--q1s-space-3);
    min-height: var(--q1s-tap);
    padding: var(--q1s-space-2) var(--q1s-space-3);
    border-radius: var(--q1s-radius-control);
    color: var(--q1s-text-primary);
    font-size: var(--q1s-fs-small);
    text-decoration: none;
}

.q1s-popover__item:hover { background: var(--q1s-surface-alt); text-decoration: none; }
.q1s-popover__item--danger { color: var(--q1s-danger); }

/* Utilitarios de espaco. Sao poucos de proposito: a escala ja existe nos
 * tokens e o agente deve usa-la, nao inventar margem. */
.q1s-mt-0 { margin-top: 0 !important; }
.q1s-mt-3 { margin-top: var(--q1s-space-3) !important; }
.q1s-mt-5 { margin-top: var(--q1s-space-5) !important; }
.q1s-mt-7 { margin-top: var(--q1s-space-7) !important; }
.q1s-mb-0 { margin-bottom: 0 !important; }
.q1s-mb-3 { margin-bottom: var(--q1s-space-3) !important; }
.q1s-mb-5 { margin-bottom: var(--q1s-space-5) !important; }
.q1s-mb-7 { margin-bottom: var(--q1s-space-7) !important; }
.q1s-gap-2 { gap: var(--q1s-space-2) !important; }
.q1s-gap-4 { gap: var(--q1s-space-4) !important; }

/* Esconde sem perder do leitor de tela. Existe porque `d-none` do Bootstrap
 * esconde DOS DOIS, e ha caso em que o rotulo precisa continuar audivel. */
.q1s-visually-hidden-sm { display: none !important; }

@media (min-width: 768px) {
    .q1s-visually-hidden-sm { display: revert !important; }
}

/* ==========================================================================
   FIM
   ==========================================================================
   O que este arquivo NAO cobre, de proposito, e fica para os agentes de
   pagina (com as classes acima ja disponiveis como material):

     - composicao do hero (posicao dos mockups, do texto manuscrito, do selo);
     - grade de precos com a coluna destacada e a tabela comparativa de 7
       colunas (usar `.q1s-table--stack` no mobile);
     - a secao de segmentos, a grade de integracoes por categoria e o
       carrossel do blog;
     - o mockup de dispositivo (moldura, barra, tela) e o cartao de QR;
     - as telas de catalogo publico, carrinho, checkout e pedido;
     - as telas do painel de reputacao, catalogo e loja.
   Todas devem ser montadas com estes tokens e estas classes. Se faltar um
   valor, a resposta e criar o TOKEN, nunca escrever o hex na regra.
   ========================================================================== */

/* ==========================================================================
   21. PAINEL — componentes densos (acrescimo do agente de painel)
   O site publico nao usa nada daqui; tudo continua sob o mesmo escopo
   (`body.site-q1store`, `.q1s-ds`) e continua lendo so token. Regra da casa:
   nenhum hex dentro de regra — os dois novos tokens abaixo vivem no bloco
   de escopo, junto dos outros.

   NOTA DE CONVIVENCIA: outro agente criou o §20 (auth/onboarding) em
   paralelo. A numeracao antiga colidia — este bloco era "20" antes do merge.
   ========================================================================== */

body.site-q1store,
    .q1s-ds {
    /* Hover do botao de sucesso: um passo abaixo do `--q1s-success`. */
    --q1s-success-hover: #006845;
    /* Altura da barra de medicao do painel (mesma do progresso do core). */
    --q1s-meter-h: 8px;
}

/* --- Botao de sucesso ----------------------------------------------------
 * O DS base nao tinha variante de sucesso (so perigo). O painel precisa dela
 * para "Marcar como pago" — sem isso a acao some no meio dos secundarios.
 */
.q1s-btn--success {
    --q1s-btn-bg: var(--q1s-success);
    --q1s-btn-fg: var(--q1s-on-primary);
    --q1s-btn-bg-hover: var(--q1s-success-hover);
}

.q1s-btn--success:hover {
    background: var(--q1s-btn-bg-hover);
    border-color: var(--q1s-btn-border-hover);
    color: var(--q1s-btn-fg);
    text-decoration: none;
}

/* --- Tiles que faltavam ---------------------------------------------------
 * O DS tinha `--success`, `--whatsapp` e `--accent`. KPI de painel precisa de
 * aviso, erro e info no mesmo formato (fundo pastel + texto do mesmo matiz).
 */
.q1s-icon-tile--warning { background: var(--q1s-warning-soft); color: var(--q1s-warning); }
.q1s-icon-tile--danger { background: var(--q1s-danger-soft); color: var(--q1s-danger); }
.q1s-icon-tile--info { background: var(--q1s-info-soft); color: var(--q1s-info); }

/* --- KPI ------------------------------------------------------------------
 * A metrica do DS (`.q1s-metric`) e vertical e sem icone. O painel responde
 * "como esta minha loja?" numa fileira de KPIs com icone a esquerda, numero
 * tabular e dica — o mesmo vocabulario, na densidade do painel.
 */
.q1s-kpi {
    display: flex;
    align-items: flex-start;
    gap: var(--q1s-space-4);
    min-width: 0;
    padding: var(--q1s-space-5) var(--q1s-space-6);
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    box-shadow: var(--q1s-shadow-1);
}

.q1s-kpi__body { display: flex; flex-direction: column; gap: var(--q1s-space-1); min-width: 0; flex: 1 1 auto; }

.q1s-kpi__label {
    font-size: var(--q1s-fs-caption);
    font-weight: var(--q1s-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--q1s-text-muted);
    overflow-wrap: anywhere;
}

.q1s-kpi__value {
    font-size: var(--q1s-fs-h2);
    line-height: 1.1;
    letter-spacing: var(--q1s-ls-h2);
    font-weight: var(--q1s-fw-bold);
    color: var(--q1s-text-primary);
    font-variant-numeric: tabular-nums;
}

.q1s-kpi__value a { color: inherit; }
.q1s-kpi__value a:hover { color: var(--q1s-primary); }

.q1s-kpi__hint { font-size: var(--q1s-fs-small); color: var(--q1s-text-secondary); }

/* --- Barra de filtros ------------------------------------------------------
 * Busca + selects + acoes num cartao so. No mobile empilha com a busca
 * primeiro — e a acao que o usuario mais quer.
 */
.q1s-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-4) var(--q1s-space-5);
    margin-bottom: var(--q1s-space-5);
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    box-shadow: var(--q1s-shadow-1);
}

.q1s-filterbar__field { display: flex; flex-direction: column; gap: var(--q1s-space-2); flex: 1 1 180px; min-width: 0; }
.q1s-filterbar__field--grow { flex: 2 1 260px; }
.q1s-filterbar__actions { display: flex; gap: var(--q1s-space-2); flex: 0 0 auto; }

@media (max-width: 480px) {
    .q1s-filterbar { flex-direction: column; align-items: stretch; }
    .q1s-filterbar__actions { flex-direction: column; }
    .q1s-filterbar__actions .q1s-btn { width: 100%; }
}

/* --- Medidor (barras de analytics) ------------------------------------------
 * Troca o `.ch-progress` por token do DS: mesma altura, trilha sunken,
 * preenchimento no primario, variantes semanticas por token.
 */
.q1s-meter {
    height: var(--q1s-meter-h);
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-surface-sunken);
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 4rem;
}

.q1s-meter__fill {
    display: block;
    height: 100%;
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-primary);
}

.q1s-meter__fill--success { background: var(--q1s-success); }
.q1s-meter__fill--warning { background: var(--q1s-warning); }
.q1s-meter__fill--danger { background: var(--q1s-danger); }
.q1s-meter__fill--info { background: var(--q1s-info); }

.q1s-meter-row { display: flex; align-items: center; gap: var(--q1s-space-2); padding-block: var(--q1s-space-1); }
.q1s-meter-row__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q1s-meter-row__value { flex: 0 0 auto; min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--q1s-text-secondary); }

/* --- Linha do tempo (trilha do pedido) ---------------------------------------
 * Lista ordenada com trilho: ponto + linha continua. O ponto herda a cor do
 * item (primario por padrao); texto e data vao ao lado, nunca so por cor.
 */
.q1s-timeline { list-style: none; margin: 0; padding: 0; }

.q1s-timeline__item {
    position: relative;
    display: flex;
    gap: var(--q1s-space-3);
    padding: 0 0 var(--q1s-space-4) var(--q1s-space-5);
}

.q1s-timeline__item::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 20px;
    bottom: 0;
    width: 2px;
    background: var(--q1s-border);
    border-radius: var(--q1s-radius-pill);
}

.q1s-timeline__item:last-child { padding-bottom: 0; }
.q1s-timeline__item:last-child::before { display: none; }

.q1s-timeline__dot {
    position: absolute;
    left: 0;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--q1s-primary);
    border: 2px solid var(--q1s-surface);
    box-shadow: 0 0 0 2px var(--q1s-primary-soft-2);
}

.q1s-timeline__time { flex: 0 0 auto; min-width: 6.5rem; color: var(--q1s-text-muted); font-size: var(--q1s-fs-small); }
.q1s-timeline__text { font-weight: var(--q1s-fw-semibold); }
.q1s-timeline__note { display: block; color: var(--q1s-text-secondary); font-size: var(--q1s-fs-small); font-weight: var(--q1s-fw-regular); }

/* --- Secao de formulario ------------------------------------------------------
 * O formulario de produto e o de configuracoes sao LONGOS: cada bloco vira uma
 * secao com titulo e ajuda proprios, em vez de um cartao sem fim. E um card
 * com cabecalho tipografico — o raio continua o de card, 16px.
 */
.q1s-form-section {
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    box-shadow: var(--q1s-shadow-1);
    overflow: hidden;
}

.q1s-form-section + .q1s-form-section { margin-top: var(--q1s-space-4); }

.q1s-form-section__head {
    padding: var(--q1s-space-4) var(--q1s-space-6) 0;
}

.q1s-form-section__title {
    margin: 0;
    font-size: var(--q1s-fs-h4);
    line-height: var(--q1s-lh-h4);
    font-weight: var(--q1s-fw-semibold);
    color: var(--q1s-text-primary);
}

.q1s-form-section__help { margin: var(--q1s-space-1) 0 0; font-size: var(--q1s-fs-small); color: var(--q1s-text-secondary); }
.q1s-form-section__body { padding: var(--q1s-space-4) var(--q1s-space-6) var(--q1s-space-5); }
.q1s-form-section__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-4) var(--q1s-space-6);
    border-top: 1px solid var(--q1s-border);
    background: var(--q1s-surface-alt);
}

/* --- Miniatura ---------------------------------------------------------------
 * Foto do produto na tabela densa: 44px, raio de midia (14px), fundo alt para
 * a letra inicial quando nao ha foto. Raio interno menor que o do card.
 */
.q1s-thumb {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--q1s-radius-media);
    background: var(--q1s-surface-alt);
    color: var(--q1s-text-muted);
    font-size: 1.1rem;
    overflow: hidden;
}

.q1s-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q1s-thumb--sm { width: 32px; height: 32px; font-size: 0.9rem; }

/* --- Tabela densa ---------------------------------------------------------------
 * Estoque e produtos tem muitas linhas: metade do respiro vertical da tabela
 * padrao, cabecalho igual. Continua virando cartao no mobile via `--stack`.
 */
.q1s-table--dense tbody td { padding: var(--q1s-space-2) var(--q1s-space-4); }
.q1s-table--dense thead th { padding: var(--q1s-space-2) var(--q1s-space-4); }

/* --- Totais do pedido ------------------------------------------------------------
 * O resumo financeiro: linhas de termo/definicao alinhadas, total com divisor.
 * Numeros sempre tabulares e a direita.
 */
.q1s-totals { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--q1s-space-2) var(--q1s-space-4); margin: var(--q1s-space-4) 0 0; }
.q1s-totals dt { font-weight: var(--q1s-fw-regular); color: var(--q1s-text-secondary); }
.q1s-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.q1s-totals__total { border-top: 1px solid var(--q1s-border); padding-top: var(--q1s-space-2); font-weight: var(--q1s-fw-bold); color: var(--q1s-text-primary); }

/* --- Entrada compacta --------------------------------------------------------------
 * Linha de ajuste de estoque: mesma identidade do input padrao, altura menor.
 */
.q1s-input--sm { min-height: var(--q1s-control-h-sm); padding: var(--q1s-space-2) var(--q1s-space-3); font-size: var(--q1s-fs-small); }
.q1s-select--sm { min-height: var(--q1s-control-h-sm); padding: var(--q1s-space-2) var(--q1s-space-8) var(--q1s-space-2) var(--q1s-space-3); font-size: var(--q1s-fs-small); }

/* --- Peca impressa (QR de parede) ------------------------------------------------------
 * E peca de LOJA, nao tela de painel: fundo sempre branco, tinta sempre navy,
 * mesmo com o painel em dark. O QR exige zona clara — o bloco do codigo e
 * branco forcado. `print-color-adjust` garante que o acento do tenant saia no
 * papel como sai na tela.
 */
.q1s-print-sheet {
    --q1s-print-accent: var(--q1s-text-primary);
    background: var(--q1s-surface);
    color: var(--q1s-text-primary);
    border: 2px dashed var(--q1s-border-strong);
    border-radius: var(--q1s-radius-card);
    padding: var(--q1s-space-8) var(--q1s-space-6);
    text-align: center;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.q1s-print-sheet__brand {
    margin: 0 0 var(--q1s-space-4);
    font-size: var(--q1s-fs-h4);
    font-weight: var(--q1s-fw-semibold);
    letter-spacing: 0.02em;
    color: var(--q1s-print-accent);
}

.q1s-print-sheet__qr {
    margin: 0 auto var(--q1s-space-5);
    max-width: 340px;
    padding: var(--q1s-space-4);
    background: var(--q1s-surface);
    border-radius: var(--q1s-radius-media);
}

.q1s-print-sheet__qr svg { width: 100%; height: auto; display: block; }

.q1s-print-sheet__cta {
    margin: 0 0 var(--q1s-space-4);
    font-size: 1.375rem;
    line-height: 1.35;
    font-weight: var(--q1s-fw-semibold);
    text-wrap: balance;
}

.q1s-print-sheet__url {
    margin: 0;
    font-family: var(--q1s-font-mono);
    font-size: var(--q1s-fs-caption);
    color: var(--q1s-text-muted);
    word-break: break-all;
}

/* ==========================================================================
   20. AUTENTICACAO E ONBOARDING
   Cartao de auth, medidor de forca de senha, wizard em etapas, barra de
   progresso do onboarding e lista de checagem de etapa. Tudo lido de token
   `--q1s-*`; nenhum hex dentro de regra.
   ========================================================================== */

/* --- Cartao de autenticacao -------------------------------------------
 * O `layouts/auth.php` centra um bloco de 430px sobre fundo suave. O cartao
 * e a superficie branca desse bloco: borda, raio de card e sombra 1.
 */
.q1s-auth-card {
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    box-shadow: var(--q1s-shadow-1);
    padding: var(--q1s-space-7) var(--q1s-space-6);
}

.q1s-auth-card__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--q1s-space-2);
    margin-bottom: var(--q1s-space-5);
    font-weight: var(--q1s-fw-bold);
    font-size: var(--q1s-fs-h4);
    color: var(--q1s-text-primary);
    text-decoration: none;
}

.q1s-auth-card__brand:hover { color: var(--q1s-text-primary); }

.q1s-auth-card__mark {
    display: grid;
    place-items: center;
    width: var(--q1s-tap);
    height: var(--q1s-tap);
    border-radius: var(--q1s-radius-icon);
    background: var(--q1s-primary);
    color: var(--q1s-on-primary);
    font-size: 1.25rem;
}

.q1s-auth-card__title {
    margin: 0 0 var(--q1s-space-1);
    font-size: var(--q1s-fs-h3);
    font-weight: var(--q1s-fw-bold);
    letter-spacing: var(--q1s-ls-tight);
    color: var(--q1s-text-primary);
}

.q1s-auth-card__sub {
    margin: 0 0 var(--q1s-space-5);
    font-size: var(--q1s-fs-small);
    color: var(--q1s-text-secondary);
}

.q1s-auth-card__foot {
    margin: var(--q1s-space-5) 0 0;
    text-align: center;
    font-size: var(--q1s-fs-small);
    color: var(--q1s-text-secondary);
}

.q1s-auth-card__foot a { color: var(--q1s-primary); font-weight: var(--q1s-fw-semibold); }

@media (max-width: 480px) {
    .q1s-auth-card { padding: var(--q1s-space-6) var(--q1s-space-5); }
}

/* --- Campo com erro ----------------------------------------------------
 * Borda de perigo + ajuda de erro. O icone/texto alem da cor cumpre o "nada
 * so por cor" do DS; o `role="alert"` vive na view, nao no CSS.
 */
.q1s-input--invalid,
.q1s-select--invalid,
.q1s-textarea--invalid { border-color: var(--q1s-danger); }

.q1s-input--invalid:focus,
.q1s-select--invalid:focus,
.q1s-textarea--invalid:focus {
    border-color: var(--q1s-danger);
    box-shadow: 0 0 0 3px rgba(var(--q1s-danger-rgb), 0.18);
}

.q1s-field-error { margin-top: var(--q1s-space-2); }

/* --- Medidor de forca de senha ------------------------------------------
 * Quatro segmentos; a cor do segmento ativo vem da classe de nivel
 * (`is-weak`, `is-fair`, `is-good`, `is-strong`) aplicada pelo JS. Sem JS o
 * medidor fica oculto e a lista de regras continua legivel.
 */
.q1s-strength { display: flex; gap: var(--q1s-space-1); margin-top: var(--q1s-space-2); }

.q1s-strength__seg {
    flex: 1 1 0;
    height: var(--q1s-meter-h);
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-surface-sunken);
}

.q1s-strength.is-weak .q1s-strength__seg:nth-child(-n+1) { background: var(--q1s-danger); }
.q1s-strength.is-fair .q1s-strength__seg:nth-child(-n+2) { background: var(--q1s-warning); }
.q1s-strength.is-good .q1s-strength__seg:nth-child(-n+3) { background: var(--q1s-info); }
.q1s-strength.is-strong .q1s-strength__seg:nth-child(-n+4) { background: var(--q1s-success); }

.q1s-strength__label {
    margin: var(--q1s-space-1) 0 0;
    font-size: var(--q1s-fs-caption);
    color: var(--q1s-text-secondary);
}

/* --- Wizard: trilho de etapas --------------------------------------------
 * Lista ordenada de etapas com estado por item (`is-done`, `is-current`,
 * `is-todo`). O numero vira check quando concluida; a etapa atual recebe
 * `aria-current="step"` na view.
 */
.q1s-steps {
    display: flex;
    gap: var(--q1s-space-2);
    list-style: none;
    margin: 0 0 var(--q1s-space-5);
    padding: 0;
}

.q1s-steps__item { flex: 1 1 0; min-width: 0; }

.q1s-steps__link {
    display: flex;
    align-items: center;
    gap: var(--q1s-space-2);
    padding: var(--q1s-space-2) var(--q1s-space-3);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-control);
    background: var(--q1s-surface);
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-semibold);
    text-decoration: none;
    min-height: var(--q1s-tap);
}

a.q1s-steps__link:hover { border-color: var(--q1s-primary); color: var(--q1s-primary); }

.q1s-steps__num {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-surface-sunken);
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
    font-variant-numeric: tabular-nums;
}

.q1s-steps__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.q1s-steps__item.is-done .q1s-steps__num {
    background: var(--q1s-success);
    color: var(--q1s-on-primary);
}

.q1s-steps__item.is-done .q1s-steps__link { border-color: var(--q1s-success); color: var(--q1s-text-primary); }

.q1s-steps__item.is-current .q1s-steps__link {
    border-color: var(--q1s-primary);
    box-shadow: var(--q1s-ring);
    color: var(--q1s-text-primary);
}

.q1s-steps__item.is-current .q1s-steps__num {
    background: var(--q1s-primary);
    color: var(--q1s-on-primary);
}

@media (max-width: 480px) {
    .q1s-steps { overflow-x: auto; scroll-snap-type: x mandatory; }
    .q1s-steps__item { flex: 0 0 auto; scroll-snap-align: start; }
    .q1s-steps__label { display: none; }
}

/* --- Wizard: barra de progresso -------------------------------------------
 * Reusa a altura do `.q1s-meter` com rotulo de "Etapa X de N" ao lado.
 */
.q1s-wizard-progress { margin-bottom: var(--q1s-space-5); }

.q1s-wizard-progress__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--q1s-space-3);
    margin-bottom: var(--q1s-space-2);
}

.q1s-wizard-progress__step {
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-semibold);
    color: var(--q1s-text-primary);
    font-variant-numeric: tabular-nums;
}

.q1s-wizard-progress__pct {
    font-size: var(--q1s-fs-caption);
    color: var(--q1s-text-secondary);
    font-variant-numeric: tabular-nums;
}

.q1s-wizard-progress__track {
    height: var(--q1s-meter-h);
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-surface-sunken);
    overflow: hidden;
}

.q1s-wizard-progress__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--q1s-primary);
    transition: width var(--q1s-dur) var(--q1s-ease);
}

/* --- Wizard: cartao de etapa -----------------------------------------------
 * O cartao que envolve o formulario de cada etapa: titulo, ajuda e corpo.
 */
.q1s-step-card {
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    box-shadow: var(--q1s-shadow-1);
    padding: var(--q1s-space-6);
}

.q1s-step-card__title {
    margin: 0 0 var(--q1s-space-1);
    font-size: var(--q1s-fs-h3);
    font-weight: var(--q1s-fw-bold);
    color: var(--q1s-text-primary);
}

.q1s-step-card__help {
    margin: 0 0 var(--q1s-space-5);
    font-size: var(--q1s-fs-small);
    color: var(--q1s-text-secondary);
    max-width: 62ch;
}

.q1s-step-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q1s-space-3);
    margin-top: var(--q1s-space-6);
}

.q1s-step-card__actions .q1s-btn { min-height: var(--q1s-tap); }

@media (max-width: 480px) {
    .q1s-step-card { padding: var(--q1s-space-5); }
    .q1s-step-card__actions { flex-direction: column; align-items: stretch; }
    .q1s-step-card__actions .q1s-btn { width: 100%; }
}

/* --- Wizard: lista de checagem de etapa -------------------------------------
 * Estado por item (`is-done`, `is-todo`): check verde ou circulo pendente,
 * sempre com texto — nunca so cor.
 */
.q1s-stepcheck { display: flex; flex-direction: column; gap: var(--q1s-space-2); list-style: none; margin: 0; padding: 0; }

.q1s-stepcheck__item {
    display: flex;
    align-items: flex-start;
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-3) var(--q1s-space-4);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-control);
    background: var(--q1s-surface);
    font-size: var(--q1s-fs-small);
    min-height: var(--q1s-tap);
}

.q1s-stepcheck__item i { font-size: 1.1rem; line-height: 1.4; flex: 0 0 auto; }

.q1s-stepcheck__item.is-done { border-color: var(--q1s-success); }
.q1s-stepcheck__item.is-done i { color: var(--q1s-success); }
.q1s-stepcheck__item.is-todo i { color: var(--q1s-text-muted); }

.q1s-stepcheck__text { flex: 1 1 auto; color: var(--q1s-text-primary); }
.q1s-stepcheck__hint { display: block; color: var(--q1s-text-secondary); font-size: var(--q1s-fs-caption); }

/* --- Preview ao vivo ---------------------------------------------------------
 * Painel de pre-visualizacao da identidade: mini-vitrine que reflete nome,
 * cores e logo digitados na etapa 2.
 */
.q1s-live-preview {
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    overflow: hidden;
    background: var(--q1s-surface);
}

.q1s-live-preview__banner {
    padding: var(--q1s-space-5);
    background: var(--q1s-preview-accent, var(--q1s-primary));
    color: var(--q1s-on-primary);
}

.q1s-live-preview__name {
    margin: 0;
    font-size: var(--q1s-fs-h4);
    font-weight: var(--q1s-fw-bold);
}

.q1s-live-preview__meta { margin: var(--q1s-space-1) 0 0; font-size: var(--q1s-fs-small); opacity: 0.9; }

.q1s-live-preview__body { padding: var(--q1s-space-5); }

.q1s-live-preview__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--q1s-space-2);
    padding: var(--q1s-space-2) var(--q1s-space-4);
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-preview-accent-2, var(--q1s-accent));
    color: var(--q1s-text-primary);
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-semibold);
    min-height: var(--q1s-tap);
}

/* ==========================================================================
   22. SITE — composicao das paginas publicas (acrescimo do agente de site)
   O DS cobria o painel e os componentes, mas as secoes do site (hero, faixa
   de atalhos, segmentos, CTA, contato) nao tinham classe propria: cada view
   usava a sua (`r5-*`). Estas classes dao a elas o mesmo vocabulario do
   resto do sistema. So posicionamento e composicao — cor, tipo e espacamento
   continuam vindo dos tokens e dos componentes acima.
   ========================================================================== */

/* Hero: titulo, lead, checagens e acoes na coluna de texto; a composicao de
 * aparelhos na coluna de midia. O fundo navy e o respiro extra embaixo (a
 * faixa de atalhos sobe e cobre a emenda) vem do `.r5-hero-store`
 * (q1store.css), que e posicionamento especifico desta pagina.
 * As checagens usam duas colunas no celular largo, como no mockup. */
.q1s-hero__eyebrow { color: var(--q1s-on-inverse-muted); }
.q1s-hero__title { color: var(--q1s-on-inverse); margin-bottom: var(--q1s-space-4); }
.q1s-hero__lead { color: var(--q1s-on-inverse-muted); margin-bottom: var(--q1s-space-5); }
.q1s-hero__checks { margin-bottom: var(--q1s-space-6); }

@media (min-width: 576px) {
    .q1s-hero__checks {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--q1s-space-6);
    }
}
.q1s-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q1s-space-3);
    align-items: center;
}

/* Acao sem caixa sobre o navy: o "link" do mockup ao lado dos botoes. */
.q1s-btn--link {
    --q1s-btn-bg: transparent;
    --q1s-btn-fg: var(--q1s-on-inverse);
    --q1s-btn-border: transparent;
    --q1s-btn-bg-hover: rgba(255, 255, 255, 0.10);
    --q1s-btn-border-hover: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding-inline: var(--q1s-space-2);
}

/* Moldura da composicao de aparelhos do hero: os chips flutuantes se
 * posicionam contra ela. */
.q1s-hero-visual {
    position: relative;
    padding-top: var(--q1s-space-6);
}

/* Chip flutuante sobre a composicao de aparelhos do hero. */
.q1s-hero-chip {
    position: absolute;
    z-index: 2;
    display: none;
    padding: var(--q1s-space-2) var(--q1s-space-4);
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-surface);
    color: var(--q1s-text-primary);
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-bold);
    white-space: nowrap;
    box-shadow: var(--q1s-shadow-3);
}

/* Os chips so aparecem a partir do celular largo: no celular estreito o
 * desenho ja encolhe e eles passariam por cima do texto. */
@media (min-width: 576px) {
    .q1s-hero-chip { display: inline-block; }
    .q1s-hero-chip--b { top: 1.9rem; left: 40%; }
    .q1s-hero-chip--c { top: 0.4rem; right: 0; }
    .q1s-hero-chip:first-child { top: 0; left: 0; }
}

/* Faixa de atalhos: o cartao branco que atravessa a emenda do hero. A
 * sobreposicao na emenda (margem negativa + z-index) mora no `.r5-strip`
 * (q1store.css), que e posicionamento especifico desta pagina. */
.q1s-strip__card {
    list-style: none;
    margin: 0;
    padding: var(--q1s-space-2);
    display: grid;
    gap: var(--q1s-space-1);
}

@media (min-width: 480px) {
    .q1s-strip__card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .q1s-strip__card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .q1s-strip__card { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.q1s-strip__item {
    display: flex;
    align-items: flex-start;
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-4) var(--q1s-space-3);
}

/* Divisor fino entre os itens, como nas imagens — so no desktop, onde os
 * seis ficam na mesma linha. */
@media (min-width: 1200px) {
    .q1s-strip__item + .q1s-strip__item { border-left: 1px solid var(--q1s-border); }
}

.q1s-strip__text strong {
    display: block;
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-bold);
    line-height: var(--q1s-lh-small);
}

.q1s-strip__text small {
    display: block;
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-caption);
    line-height: var(--q1s-lh-caption);
    margin-top: var(--q1s-space-1);
}

/* Segmentos: faixa horizontal de cartoes com snap (oito segmentos nao cabem
 * em linha, entao a faixa rola no mobile e no desktop). O foco visivel na
 * faixa e o que deixa o teclado alcancar os cartoes fora da tela
 * (WCAG 2.2 AA). */
.q1s-seg-row {
    list-style: none;
    margin: 0;
    padding: var(--q1s-space-1) var(--q1s-space-1) var(--q1s-space-3);
    display: flex;
    gap: var(--q1s-space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.q1s-seg-row:focus-visible {
    outline: 2px solid var(--q1s-primary);
    outline-offset: 2px;
    border-radius: var(--q1s-radius-card);
}

.q1s-seg {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--q1s-space-3);
    min-width: 11rem;
    padding: var(--q1s-space-3) var(--q1s-space-4) var(--q1s-space-3) var(--q1s-space-3);
}

/* Motivo: o card preenche a celula da grade 2x2 em altura. */
.q1s-reason { height: 100%; }

.q1s-seg__thumb {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--q1s-radius-icon);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    background: var(--q1s-primary-soft);
    color: var(--q1s-primary);
}

.q1s-seg__label {
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-semibold);
    line-height: var(--q1s-lh-small);
    color: var(--q1s-text-primary);
}

/* Acoes do banner: os botoes lado a lado no desktop, empilhados no mobile
 * (o mesmo comportamento das acoes do hero). */
.q1s-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q1s-space-3);
    align-items: center;
}

/* CTA final: a secao nao tem respiro proprio — o banner ja traz o padding.
 * (O `.r5-cta` antigo pintava a propria faixa; o banner faz isso agora.) */
.q1s-section--cta { padding-block: 0; }

/* CTA final: a coluna de pontos com o grafico na ponta direita do banner. */
.q1s-cta-points {
    display: flex;
    align-items: center;
    gap: var(--q1s-space-4);
}

.q1s-cta-points .q1s-checklist__item { color: var(--q1s-on-inverse-muted); }

/* Contato: o rodape do formulario e as linhas de contato. Os campos usam o
 * `q1s-fields` do DS (a pilha de campos com o ritmo do sistema); o rodape e
 * as linhas so empilham com o mesmo ritmo. */
.q1s-contact-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q1s-space-3);
    margin-top: var(--q1s-space-5);
}

.q1s-contact-foot .q1s-small { color: var(--q1s-text-secondary); }

.q1s-contact-row {
    display: flex;
    gap: var(--q1s-space-3);
    align-items: flex-start;
    padding: var(--q1s-space-3) 0;
}

.q1s-contact-row + .q1s-contact-row { border-top: 1px solid var(--q1s-border); }

.q1s-contact-row > i {
    flex: none;
    font-size: var(--q1s-fs-h4);
    color: var(--q1s-primary);
    margin-top: var(--q1s-space-1);
}

.q1s-contact-row .q1s-card__title { margin-bottom: var(--q1s-space-1); }

.q1s-contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q1s-space-2);
    margin-top: var(--q1s-space-2);
}

.q1s-contact-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--q1s-radius-icon);
    background: var(--q1s-primary-soft);
    color: var(--q1s-primary);
    font-size: var(--q1s-fs-h4);
    text-decoration: none;
    min-width: var(--q1s-tap);
    min-height: var(--q1s-tap);
}

.q1s-contact-social a:hover {
    background: var(--q1s-primary);
    color: var(--q1s-on-inverse);
}

/* Card de recurso: a ilustracao no topo e o selo do icone sobre ela. Mesma
 * composicao que o card antigo da marca — vocabulario do DS. */
.q1s-resource { height: 100%; }

.q1s-resource__media {
    position: relative;
    border-bottom: 1px solid var(--q1s-border);
}

.q1s-resource__badge {
    position: absolute;
    left: var(--q1s-space-3);
    bottom: var(--q1s-space-3);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: var(--q1s-fs-body);
    color: var(--q1s-primary);
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-primary-soft);
    box-shadow: var(--q1s-shadow-2);
}

.q1s-resource__link {
    display: inline-flex;
    align-items: center;
    gap: var(--q1s-space-1);
    font-weight: var(--q1s-fw-semibold);
    font-size: var(--q1s-fs-small);
    color: var(--q1s-primary);
    text-decoration: none;
    margin-top: var(--q1s-space-2);
}

.q1s-resource__link:hover {
    color: var(--q1s-primary-hover);
    text-decoration: underline;
}

/* =====================================================================
   LOJA — COMPONENTES DE E-COMMERCE
   =====================================================================

   Este bloco completa o design system para a VITRINE: card de produto,
   galeria com miniaturas, seletor de variante, passo de checkout, timeline
   de rastreio e resumo de carrinho.

   Regras do bloco (as mesmas do resto do arquivo):

   1. TODO valor sai de um token `--q1s-*`. Nenhum hex, nenhum `px` solto
      fora da escala. Se o valor não existe como token, ele não entra.
   2. O prefixo é `q1s-shop-*` para não colidir com nenhum componente já
      existente nem com as classes `store-*` dos TEMAS de loja
      (`public/assets/css/themes/*.css`). Aquelas são o visual que o
      LOJISTA escolhe para a loja dele; estas são a marca do PRODUTO. São
      dois sistemas, e misturar os dois nomes é o que torna a manutenção
      impossível.
   3. Mobile primeiro. A loja é usada no celular: a grade nasce com 2
      colunas, o produto nasce empilhado e todo alvo nasce com 44px.
   ===================================================================== */

/* --- 1. Casca da vitrine --------------------------------------------- */

body.site-q1store .q1s-shop,
    .q1s-ds .q1s-shop {
    background: var(--q1s-surface-alt);
    color: var(--q1s-text-primary);
    font-family: var(--q1s-font-sans);
    font-size: var(--q1s-fs-body);
    line-height: var(--q1s-lh-body);
}

body.site-q1store .q1s-shop__container,
    .q1s-ds .q1s-shop__container {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: var(--q1s-space-4);
}

body.site-q1store .q1s-shop__main,
    .q1s-ds .q1s-shop__main {
    padding-block: var(--q1s-space-6) var(--q1s-space-9);
}

/* --- 2. Barra superior ----------------------------------------------- */

body.site-q1store .q1s-shop-header,
    .q1s-ds .q1s-shop-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--q1s-surface);
    border-bottom: 1px solid var(--q1s-border);
}

body.site-q1store .q1s-shop-header__inner,
    .q1s-ds .q1s-shop-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q1s-space-3);
    padding-block: var(--q1s-space-3);
}

body.site-q1store .q1s-shop-brand,
    .q1s-ds .q1s-shop-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--q1s-space-2);
    min-height: 44px;
    color: var(--q1s-text-primary);
    font-size: var(--q1s-fs-h4);
    font-weight: var(--q1s-fw-bold);
    text-decoration: none;
}

body.site-q1store .q1s-shop-brand__logo,
    .q1s-ds .q1s-shop-brand__logo {
    display: block;
    max-height: 40px;
    width: auto;
}

body.site-q1store .q1s-shop-nav,
    .q1s-ds .q1s-shop-nav {
    display: flex;
    align-items: center;
    gap: var(--q1s-space-2);
    margin-left: auto;
}

body.site-q1store .q1s-shop-nav__link,
    .q1s-ds .q1s-shop-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--q1s-space-1);
    min-height: 44px;
    padding-inline: var(--q1s-space-3);
    border-radius: var(--q1s-radius-pill);
    color: var(--q1s-text-secondary);
    font-weight: var(--q1s-fw-medium);
    text-decoration: none;
}

body.site-q1store .q1s-shop-nav__link:hover,
    .q1s-ds .q1s-shop-nav__link:hover {
    background: var(--q1s-surface-sunken);
    color: var(--q1s-text-primary);
}

body.site-q1store .q1s-shop-nav__link:focus-visible,
    .q1s-ds .q1s-shop-nav__link:focus-visible {
    outline: none;
    box-shadow: var(--q1s-ring);
}

/* Selo de contagem do carrinho. O número nunca é a única informação: o
   texto acessível ao lado diz o mesmo, e cor nenhuma carrega o estado. */
body.site-q1store .q1s-shop-nav__count,
    .q1s-ds .q1s-shop-nav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: var(--q1s-space-1);
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-primary);
    color: var(--q1s-on-primary);
    font-size: var(--q1s-fs-caption);
    font-weight: var(--q1s-fw-bold);
}

/* --- 3. Busca -------------------------------------------------------- */

body.site-q1store .q1s-shop-search,
    .q1s-ds .q1s-shop-search {
    display: flex;
    gap: var(--q1s-space-2);
    flex: 1 1 100%;
    min-width: 0;
}

body.site-q1store .q1s-shop-search__input,
    .q1s-ds .q1s-shop-search__input {
    flex: 1 1 auto;
    min-width: 0;
}

body.site-q1store .q1s-shop-search__submit,
    .q1s-ds .q1s-shop-search__submit {
    flex: 0 0 auto;
}

/* --- 4. Hero / faixa de abertura ------------------------------------- */

body.site-q1store .q1s-shop-hero,
    .q1s-ds .q1s-shop-hero {
    padding: var(--q1s-space-6) var(--q1s-space-4);
    margin-bottom: var(--q1s-space-6);
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    box-shadow: var(--q1s-shadow-1);
    text-align: center;
}

body.site-q1store .q1s-shop-hero__title,
    .q1s-ds .q1s-shop-hero__title {
    margin: 0 0 var(--q1s-space-3);
    font-size: var(--q1s-fs-h2);
    line-height: var(--q1s-lh-h2);
    letter-spacing: var(--q1s-ls-h2);
    font-weight: var(--q1s-fw-bold);
}

body.site-q1store .q1s-shop-hero__text,
    .q1s-ds .q1s-shop-hero__text {
    max-width: 46ch;
    margin: 0 auto;
    color: var(--q1s-text-secondary);
}

body.site-q1store .q1s-shop-hero__actions,
    .q1s-ds .q1s-shop-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--q1s-space-2);
    margin: var(--q1s-space-5) 0 0;
}

/* --- 5. Secao e titulos ---------------------------------------------- */

body.site-q1store .q1s-shop-section,
    .q1s-ds .q1s-shop-section {
    margin-top: var(--q1s-space-8);
}

body.site-q1store .q1s-shop-section__head,
    .q1s-ds .q1s-shop-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--q1s-space-2);
    margin-bottom: var(--q1s-space-4);
}

body.site-q1store .q1s-shop-section__title,
    .q1s-ds .q1s-shop-section__title {
    margin: 0;
    font-size: var(--q1s-fs-h3);
    line-height: var(--q1s-lh-h3);
    letter-spacing: var(--q1s-ls-h3);
    font-weight: var(--q1s-fw-semibold);
}

body.site-q1store .q1s-shop-section__link,
    .q1s-ds .q1s-shop-section__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--q1s-primary);
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-semibold);
    text-decoration: none;
}

body.site-q1store .q1s-shop-section__link:hover,
    .q1s-ds .q1s-shop-section__link:hover {
    text-decoration: underline;
}

/* --- 6. Trilha de navegacao ------------------------------------------ */

body.site-q1store .q1s-shop-crumbs,
    .q1s-ds .q1s-shop-crumbs {
    margin-bottom: var(--q1s-space-4);
}

body.site-q1store .q1s-shop-crumbs__list,
    .q1s-ds .q1s-shop-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q1s-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--q1s-text-muted);
    font-size: var(--q1s-fs-small);
}

body.site-q1store .q1s-shop-crumbs__item + .q1s-shop-crumbs__item::before,
    .q1s-ds .q1s-shop-crumbs__item + .q1s-shop-crumbs__item::before {
    content: "/";
    margin-right: var(--q1s-space-2);
    color: var(--q1s-border-strong);
}

body.site-q1store .q1s-shop-crumbs__link,
    .q1s-ds .q1s-shop-crumbs__link {
    color: var(--q1s-text-secondary);
    text-decoration: none;
}

body.site-q1store .q1s-shop-crumbs__link:hover,
    .q1s-ds .q1s-shop-crumbs__link:hover {
    color: var(--q1s-primary);
    text-decoration: underline;
}

/* --- 7. Chips de categoria ------------------------------------------- */

body.site-q1store .q1s-shop-chips,
    .q1s-ds .q1s-shop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q1s-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

body.site-q1store .q1s-shop-chip,
    .q1s-ds .q1s-shop-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--q1s-space-2) var(--q1s-space-4);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-surface);
    color: var(--q1s-text-primary);
    font-weight: var(--q1s-fw-medium);
    text-decoration: none;
    transition: border-color var(--q1s-dur) var(--q1s-ease),
                color var(--q1s-dur) var(--q1s-ease),
                background-color var(--q1s-dur) var(--q1s-ease);
}

body.site-q1store .q1s-shop-chip:hover,
    .q1s-ds .q1s-shop-chip:hover {
    border-color: var(--q1s-primary);
    background: var(--q1s-primary-soft);
    color: var(--q1s-primary);
}

body.site-q1store .q1s-shop-chip:focus-visible,
    .q1s-ds .q1s-shop-chip:focus-visible {
    outline: none;
    box-shadow: var(--q1s-ring);
}

/* --- 8. Grade e card de produto --------------------------------------
   Duas colunas no telefone. Uma coluna só faz a vitrine parecer lista de
   resultados; quatro no telefone faz o preço sumir. Duas, com foto
   grande, é o que um e-commerce real faz. */

body.site-q1store .q1s-shop-grid,
    .q1s-ds .q1s-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--q1s-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

body.site-q1store .q1s-shop-card,
    .q1s-ds .q1s-shop-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    box-shadow: var(--q1s-shadow-1);
    transition: transform var(--q1s-dur) var(--q1s-ease),
                box-shadow var(--q1s-dur) var(--q1s-ease),
                border-color var(--q1s-dur) var(--q1s-ease);
}

body.site-q1store .q1s-shop-card:hover,
    .q1s-ds .q1s-shop-card:hover {
    transform: translateY(-2px);
    border-color: var(--q1s-border-strong);
    box-shadow: var(--q1s-shadow-2);
}

body.site-q1store .q1s-shop-card__media,
    .q1s-ds .q1s-shop-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--q1s-surface-sunken);
}

body.site-q1store .q1s-shop-card__img,
    .q1s-ds .q1s-shop-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.site-q1store .q1s-shop-card__noimg,
    .q1s-ds .q1s-shop-card__noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--q1s-text-muted);
    font-size: var(--q1s-fs-h2);
}

/* Etiqueta de desconto. O texto "−20%" e informacao; a cor so reforca —
   quem nao distingue verde de vermelho continua lendo o numero. */
body.site-q1store .q1s-shop-card__flag,
    .q1s-ds .q1s-shop-card__flag {
    position: absolute;
    top: var(--q1s-space-2);
    left: var(--q1s-space-2);
    padding: var(--q1s-space-1) var(--q1s-space-2);
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-success);
    color: var(--q1s-on-primary);
    font-size: var(--q1s-fs-caption);
    font-weight: var(--q1s-fw-bold);
    line-height: var(--q1s-lh-caption);
}

body.site-q1store .q1s-shop-card__body,
    .q1s-ds .q1s-shop-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--q1s-space-2);
    padding: var(--q1s-space-4);
}

body.site-q1store .q1s-shop-card__title,
    .q1s-ds .q1s-shop-card__title {
    margin: 0;
    font-size: var(--q1s-fs-body);
    font-weight: var(--q1s-fw-semibold);
    line-height: var(--q1s-lh-h4);
}

body.site-q1store .q1s-shop-card__link,
    .q1s-ds .q1s-shop-card__link {
    color: var(--q1s-text-primary);
    text-decoration: none;
}

body.site-q1store .q1s-shop-card__link:hover,
    .q1s-ds .q1s-shop-card__link:hover {
    color: var(--q1s-primary);
}

body.site-q1store .q1s-shop-card__link:focus-visible,
    .q1s-ds .q1s-shop-card__link:focus-visible {
    outline: none;
    border-radius: var(--q1s-radius-control);
    box-shadow: var(--q1s-ring);
}

body.site-q1store .q1s-shop-card__text,
    .q1s-ds .q1s-shop-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
    line-height: var(--q1s-lh-small);
}

body.site-q1store .q1s-shop-card__flags,
    .q1s-ds .q1s-shop-card__flags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q1s-space-1);
    margin: 0;
}

body.site-q1store .q1s-shop-card__footer,
    .q1s-ds .q1s-shop-card__footer {
    display: flex;
    flex-direction: column;
    gap: var(--q1s-space-2);
    margin-top: auto;
    padding-top: var(--q1s-space-2);
}

/* --- 9. Preco --------------------------------------------------------
   Promocao NAO depende de cor: o "de/por" aparece escrito. */

body.site-q1store .q1s-shop-price,
    .q1s-ds .q1s-shop-price {
    display: flex;
    flex-direction: column;
    gap: var(--q1s-space-1);
    margin: 0;
}

body.site-q1store .q1s-shop-price__now,
    .q1s-ds .q1s-shop-price__now {
    font-size: var(--q1s-fs-h4);
    font-weight: var(--q1s-fw-bold);
    line-height: var(--q1s-lh-h4);
    color: var(--q1s-text-primary);
}

body.site-q1store .q1s-shop-price--promo .q1s-shop-price__now,
    .q1s-ds .q1s-shop-price--promo .q1s-shop-price__now {
    color: var(--q1s-success);
}

body.site-q1store .q1s-shop-price__was,
    .q1s-ds .q1s-shop-price__was {
    color: var(--q1s-text-muted);
    font-size: var(--q1s-fs-small);
}

body.site-q1store .q1s-shop-price__was s,
    .q1s-ds .q1s-shop-price__was s {
    text-decoration: line-through;
}

body.site-q1store .q1s-shop-price__note,
    .q1s-ds .q1s-shop-price__note {
    color: var(--q1s-text-muted);
    font-size: var(--q1s-fs-caption);
}

body.site-q1store .q1s-shop-price--consult .q1s-shop-price__now,
    .q1s-ds .q1s-shop-price--consult .q1s-shop-price__now {
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-h4);
    font-weight: var(--q1s-fw-medium);
}

/* --- 10. Estoque ----------------------------------------------------- */

body.site-q1store .q1s-shop-stock,
    .q1s-ds .q1s-shop-stock {
    display: inline-flex;
    align-items: center;
    gap: var(--q1s-space-1);
    margin: 0;
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-semibold);
}

body.site-q1store .q1s-shop-stock--in,
    .q1s-ds .q1s-shop-stock--in {
    color: var(--q1s-success);
}

body.site-q1store .q1s-shop-stock--out,
    .q1s-ds .q1s-shop-stock--out {
    color: var(--q1s-danger);
}

/* --- 11. Pagina do produto: galeria + caixa de compra --------------- */

body.site-q1store .q1s-shop-product,
    .q1s-ds .q1s-shop-product {
    display: grid;
    gap: var(--q1s-space-5);
}

body.site-q1store .q1s-shop-gallery,
    .q1s-ds .q1s-shop-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--q1s-space-2);
}

body.site-q1store .q1s-shop-gallery__frame,
    .q1s-ds .q1s-shop-gallery__frame {
    position: relative;
    overflow: hidden;
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
}

body.site-q1store .q1s-shop-gallery__main,
    .q1s-ds .q1s-shop-gallery__main {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

body.site-q1store .q1s-shop-gallery__noimg,
    .q1s-ds .q1s-shop-gallery__noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--q1s-surface-sunken);
    color: var(--q1s-text-muted);
    font-size: var(--q1s-fs-display);
}

/* Miniaturas em faixa rolavel: no telefone, uma grade de thumbs empurra a
   caixa de compra para fora da dobra. */
body.site-q1store .q1s-shop-thumbs,
    .q1s-ds .q1s-shop-thumbs {
    display: flex;
    gap: var(--q1s-space-2);
    overflow-x: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    scrollbar-width: thin;
}

body.site-q1store .q1s-shop-thumb,
    .q1s-ds .q1s-shop-thumb {
    flex: 0 0 auto;
}

body.site-q1store .q1s-shop-thumb__btn,
    .q1s-ds .q1s-shop-thumb__btn {
    display: block;
    width: 72px;
    height: 72px;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-media);
    background: var(--q1s-surface);
    cursor: pointer;
    transition: border-color var(--q1s-dur) var(--q1s-ease);
}

body.site-q1store .q1s-shop-thumb__btn img,
    .q1s-ds .q1s-shop-thumb__btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.site-q1store .q1s-shop-thumb__btn:hover,
    .q1s-ds .q1s-shop-thumb__btn:hover {
    border-color: var(--q1s-border-strong);
}

body.site-q1store .q1s-shop-thumb__btn:focus-visible,
    .q1s-ds .q1s-shop-thumb__btn:focus-visible {
    outline: none;
    box-shadow: var(--q1s-ring);
}

body.site-q1store .q1s-shop-thumb.is-current .q1s-shop-thumb__btn,
    .q1s-ds .q1s-shop-thumb.is-current .q1s-shop-thumb__btn {
    border-color: var(--q1s-primary);
    box-shadow: var(--q1s-ring);
}

body.site-q1store .q1s-shop-buybox,
    .q1s-ds .q1s-shop-buybox {
    display: flex;
    flex-direction: column;
    gap: var(--q1s-space-3);
}

body.site-q1store .q1s-shop-buybox__title,
    .q1s-ds .q1s-shop-buybox__title {
    margin: 0;
    font-size: var(--q1s-fs-h3);
    line-height: var(--q1s-lh-h3);
    letter-spacing: var(--q1s-ls-h3);
    font-weight: var(--q1s-fw-bold);
}

body.site-q1store .q1s-shop-buybox__meta,
    .q1s-ds .q1s-shop-buybox__meta {
    margin: 0;
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
}

body.site-q1store .q1s-shop-buybox__panel,
    .q1s-ds .q1s-shop-buybox__panel {
    display: flex;
    flex-direction: column;
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-4);
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
}

body.site-q1store .q1s-shop-buybox__row,
    .q1s-ds .q1s-shop-buybox__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--q1s-space-2);
}

body.site-q1store .q1s-shop-buybox__qty,
    .q1s-ds .q1s-shop-buybox__qty {
    flex: 0 0 7.5rem;
}

body.site-q1store .q1s-shop-buybox__submit,
    .q1s-ds .q1s-shop-buybox__submit {
    flex: 1 1 auto;
}

/* --- 12. Seletor de variante ----------------------------------------
   Radio de verdade, escondido de forma acessivel: teclado, leitor de tela
   e `:checked` funcionam sem uma linha de JavaScript. */

body.site-q1store .q1s-shop-variants,
    .q1s-ds .q1s-shop-variants {
    display: flex;
    flex-direction: column;
    gap: var(--q1s-space-2);
    margin: 0;
    padding: 0;
    border: 0;
}

body.site-q1store .q1s-shop-variants__legend,
    .q1s-ds .q1s-shop-variants__legend {
    padding: 0;
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-semibold);
}

body.site-q1store .q1s-shop-variant,
    .q1s-ds .q1s-shop-variant {
    display: flex;
}

body.site-q1store .q1s-shop-variant__input,
    .q1s-ds .q1s-shop-variant__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

body.site-q1store .q1s-shop-variant__label,
    .q1s-ds .q1s-shop-variant__label {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--q1s-space-3);
    min-height: 44px;
    padding: var(--q1s-space-2) var(--q1s-space-3);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-control);
    background: var(--q1s-surface);
    cursor: pointer;
    transition: border-color var(--q1s-dur) var(--q1s-ease),
                background-color var(--q1s-dur) var(--q1s-ease);
}

body.site-q1store .q1s-shop-variant__label:hover,
    .q1s-ds .q1s-shop-variant__label:hover {
    border-color: var(--q1s-border-strong);
}

body.site-q1store .q1s-shop-variant__input:checked + .q1s-shop-variant__label,
    .q1s-ds .q1s-shop-variant__input:checked + .q1s-shop-variant__label {
    border-color: var(--q1s-primary);
    background: var(--q1s-primary-soft);
}

body.site-q1store .q1s-shop-variant__input:focus-visible + .q1s-shop-variant__label,
    .q1s-ds .q1s-shop-variant__input:focus-visible + .q1s-shop-variant__label {
    outline: none;
    box-shadow: var(--q1s-ring);
}

body.site-q1store .q1s-shop-variant__input:disabled + .q1s-shop-variant__label,
    .q1s-ds .q1s-shop-variant__input:disabled + .q1s-shop-variant__label {
    background: var(--q1s-surface-sunken);
    color: var(--q1s-text-muted);
    cursor: not-allowed;
}

body.site-q1store .q1s-shop-variant__name,
    .q1s-ds .q1s-shop-variant__name {
    font-weight: var(--q1s-fw-medium);
}

body.site-q1store .q1s-shop-variant__price,
    .q1s-ds .q1s-shop-variant__price {
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
}

/* --- 13. Passo de quantidade ---------------------------------------- */

body.site-q1store .q1s-shop-qty,
    .q1s-ds .q1s-shop-qty {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-control);
}

body.site-q1store .q1s-shop-qty__btn,
    .q1s-ds .q1s-shop-qty__btn {
    width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-h4);
    line-height: 1;
    cursor: pointer;
}

body.site-q1store .q1s-shop-qty__btn:hover,
    .q1s-ds .q1s-shop-qty__btn:hover {
    background: var(--q1s-surface-sunken);
    color: var(--q1s-text-primary);
}

body.site-q1store .q1s-shop-qty__btn:focus-visible,
    .q1s-ds .q1s-shop-qty__btn:focus-visible {
    outline: none;
    box-shadow: var(--q1s-ring);
}

body.site-q1store .q1s-shop-qty__input,
    .q1s-ds .q1s-shop-qty__input {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-inline: 1px solid var(--q1s-border);
    background: transparent;
    color: var(--q1s-text-primary);
    font-size: var(--q1s-fs-body);
    font-weight: var(--q1s-fw-semibold);
    text-align: center;
    -moz-appearance: textfield;
}

body.site-q1store .q1s-shop-qty__input::-webkit-outer-spin-button,
    .q1s-ds .q1s-shop-qty__input::-webkit-outer-spin-button,
    body.site-q1store .q1s-shop-qty__input::-webkit-inner-spin-button,
    .q1s-ds .q1s-shop-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body.site-q1store .q1s-shop-qty__input:focus-visible,
    .q1s-ds .q1s-shop-qty__input:focus-visible {
    outline: none;
    background: var(--q1s-primary-soft);
}

/* --- 14. Resumo financeiro (carrinho / checkout) -------------------- */

body.site-q1store .q1s-shop-summary,
    .q1s-ds .q1s-shop-summary {
    display: flex;
    flex-direction: column;
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-5);
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    box-shadow: var(--q1s-shadow-1);
}

body.site-q1store .q1s-shop-summary__title,
    .q1s-ds .q1s-shop-summary__title {
    margin: 0;
    font-size: var(--q1s-fs-h4);
    font-weight: var(--q1s-fw-semibold);
}

body.site-q1store .q1s-shop-summary__rows,
    .q1s-ds .q1s-shop-summary__rows {
    display: flex;
    flex-direction: column;
    gap: var(--q1s-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

body.site-q1store .q1s-shop-summary__row,
    .q1s-ds .q1s-shop-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--q1s-space-3);
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
}

body.site-q1store .q1s-shop-summary__row--total,
    .q1s-ds .q1s-shop-summary__row--total {
    padding-top: var(--q1s-space-3);
    border-top: 1px solid var(--q1s-border);
    color: var(--q1s-text-primary);
    font-size: var(--q1s-fs-h4);
    font-weight: var(--q1s-fw-bold);
}

body.site-q1store .q1s-shop-summary__note,
    .q1s-ds .q1s-shop-summary__note {
    margin: 0;
    color: var(--q1s-text-muted);
    font-size: var(--q1s-fs-caption);
}

/* --- 15. Linha do carrinho ------------------------------------------ */

body.site-q1store .q1s-shop-lines,
    .q1s-ds .q1s-shop-lines {
    display: flex;
    flex-direction: column;
    gap: var(--q1s-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

body.site-q1store .q1s-shop-line,
    .q1s-ds .q1s-shop-line {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: var(--q1s-space-3);
    padding: var(--q1s-space-3);
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
}

body.site-q1store .q1s-shop-line--out,
    .q1s-ds .q1s-shop-line--out {
    border-color: var(--q1s-danger);
    background: var(--q1s-danger-soft);
}

body.site-q1store .q1s-shop-line__media,
    .q1s-ds .q1s-shop-line__media {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--q1s-radius-media);
    background: var(--q1s-surface-sunken);
    object-fit: cover;
}

body.site-q1store .q1s-shop-line__body,
    .q1s-ds .q1s-shop-line__body {
    display: flex;
    flex-direction: column;
    gap: var(--q1s-space-2);
    min-width: 0;
}

body.site-q1store .q1s-shop-line__name,
    .q1s-ds .q1s-shop-line__name {
    color: var(--q1s-text-primary);
    font-weight: var(--q1s-fw-semibold);
    text-decoration: none;
}

body.site-q1store .q1s-shop-line__name:hover,
    .q1s-ds .q1s-shop-line__name:hover {
    color: var(--q1s-primary);
}

body.site-q1store .q1s-shop-line__meta,
    .q1s-ds .q1s-shop-line__meta {
    margin: 0;
    color: var(--q1s-text-muted);
    font-size: var(--q1s-fs-caption);
}

body.site-q1store .q1s-shop-line__foot,
    .q1s-ds .q1s-shop-line__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--q1s-space-2);
    margin-top: auto;
}

body.site-q1store .q1s-shop-line__price,
    .q1s-ds .q1s-shop-line__price {
    font-weight: var(--q1s-fw-bold);
}

body.site-q1store .q1s-shop-line__warn,
    .q1s-ds .q1s-shop-line__warn {
    margin: 0;
    color: var(--q1s-danger);
    font-size: var(--q1s-fs-caption);
    font-weight: var(--q1s-fw-semibold);
}

/* --- 16. Escolha de entrega -----------------------------------------
   Mesmo padrao do seletor de variante: radio real, visual proprio. O
   preco da entrega vem ESCRITO, nunca so por cor. */

body.site-q1store .q1s-shop-choice,
    .q1s-ds .q1s-shop-choice {
    display: flex;
}

body.site-q1store .q1s-shop-choice__input,
    .q1s-ds .q1s-shop-choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

body.site-q1store .q1s-shop-choice__label,
    .q1s-ds .q1s-shop-choice__label {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    gap: var(--q1s-space-3);
    min-height: 44px;
    padding: var(--q1s-space-3);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-control);
    background: var(--q1s-surface);
    cursor: pointer;
    transition: border-color var(--q1s-dur) var(--q1s-ease),
                background-color var(--q1s-dur) var(--q1s-ease);
}

body.site-q1store .q1s-shop-choice__label:hover,
    .q1s-ds .q1s-shop-choice__label:hover {
    border-color: var(--q1s-border-strong);
}

body.site-q1store .q1s-shop-choice__input:checked + .q1s-shop-choice__label,
    .q1s-ds .q1s-shop-choice__input:checked + .q1s-shop-choice__label {
    border-color: var(--q1s-primary);
    background: var(--q1s-primary-soft);
}

body.site-q1store .q1s-shop-choice__input:focus-visible + .q1s-shop-choice__label,
    .q1s-ds .q1s-shop-choice__input:focus-visible + .q1s-shop-choice__label {
    outline: none;
    box-shadow: var(--q1s-ring);
}

body.site-q1store .q1s-shop-choice__input:disabled + .q1s-shop-choice__label,
    .q1s-ds .q1s-shop-choice__input:disabled + .q1s-shop-choice__label {
    background: var(--q1s-surface-sunken);
    color: var(--q1s-text-muted);
    cursor: not-allowed;
}

body.site-q1store .q1s-shop-choice__body,
    .q1s-ds .q1s-shop-choice__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--q1s-space-1);
}

body.site-q1store .q1s-shop-choice__name,
    .q1s-ds .q1s-shop-choice__name {
    font-weight: var(--q1s-fw-semibold);
}

body.site-q1store .q1s-shop-choice__note,
    .q1s-ds .q1s-shop-choice__note {
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
}

body.site-q1store .q1s-shop-choice__price,
    .q1s-ds .q1s-shop-choice__price {
    font-weight: var(--q1s-fw-bold);
    white-space: nowrap;
}

/* --- 17. Passos do checkout -----------------------------------------
   A etapa atual leva `aria-current="step"` no markup: o numero e o rotulo
   dizem ONDE o cliente esta sem depender da cor da borda. */

body.site-q1store .q1s-shop-steps,
    .q1s-ds .q1s-shop-steps {
    display: flex;
    gap: var(--q1s-space-2);
    margin: 0 0 var(--q1s-space-5);
    padding: 0;
    list-style: none;
}

body.site-q1store .q1s-shop-step,
    .q1s-ds .q1s-shop-step {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: var(--q1s-space-2);
    min-height: 44px;
    padding: var(--q1s-space-2) var(--q1s-space-3);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-control);
    background: var(--q1s-surface);
    color: var(--q1s-text-muted);
    font-size: var(--q1s-fs-caption);
    font-weight: var(--q1s-fw-semibold);
}

body.site-q1store .q1s-shop-step__num,
    .q1s-ds .q1s-shop-step__num {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-surface-sunken);
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-caption);
}

body.site-q1store .q1s-shop-step.is-current,
    .q1s-ds .q1s-shop-step.is-current {
    border-color: var(--q1s-primary);
    color: var(--q1s-text-primary);
}

body.site-q1store .q1s-shop-step.is-current .q1s-shop-step__num,
    .q1s-ds .q1s-shop-step.is-current .q1s-shop-step__num {
    background: var(--q1s-primary);
    color: var(--q1s-on-primary);
}

body.site-q1store .q1s-shop-step.is-done .q1s-shop-step__num,
    .q1s-ds .q1s-shop-step.is-done .q1s-shop-step__num {
    background: var(--q1s-success);
    color: var(--q1s-on-primary);
}

/* --- 18. Timeline de rastreio ---------------------------------------
   Cada evento REAL do pedido vira um ponto. O ultimo e o atual; o texto e
   a data carregam o estado, e a cor do ponto so reforca. */

body.site-q1store .q1s-shop-timeline,
    .q1s-ds .q1s-shop-timeline {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.site-q1store .q1s-shop-timeline__item,
    .q1s-ds .q1s-shop-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--q1s-space-3);
    padding-bottom: var(--q1s-space-4);
}

body.site-q1store .q1s-shop-timeline__item::before,
    .q1s-ds .q1s-shop-timeline__item::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    bottom: 0;
    left: 0.6875rem;
    width: 2px;
    background: var(--q1s-border);
}

body.site-q1store .q1s-shop-timeline__item:last-child::before,
    .q1s-ds .q1s-shop-timeline__item:last-child::before {
    display: none;
}

body.site-q1store .q1s-shop-timeline__dot,
    .q1s-ds .q1s-shop-timeline__dot {
    width: 1.375rem;
    height: 1.375rem;
    margin-top: var(--q1s-space-1);
    border: 2px solid var(--q1s-border-strong);
    border-radius: var(--q1s-radius-pill);
    background: var(--q1s-surface);
}

body.site-q1store .q1s-shop-timeline__item.is-done .q1s-shop-timeline__dot,
    .q1s-ds .q1s-shop-timeline__item.is-done .q1s-shop-timeline__dot {
    border-color: var(--q1s-success);
    background: var(--q1s-success);
}

body.site-q1store .q1s-shop-timeline__item.is-current .q1s-shop-timeline__dot,
    .q1s-ds .q1s-shop-timeline__item.is-current .q1s-shop-timeline__dot {
    border-color: var(--q1s-primary);
    background: var(--q1s-primary);
    box-shadow: var(--q1s-ring);
}

body.site-q1store .q1s-shop-timeline__body,
    .q1s-ds .q1s-shop-timeline__body {
    display: flex;
    flex-direction: column;
    gap: var(--q1s-space-1);
}

body.site-q1store .q1s-shop-timeline__title,
    .q1s-ds .q1s-shop-timeline__title {
    color: var(--q1s-text-primary);
    font-weight: var(--q1s-fw-semibold);
}

body.site-q1store .q1s-shop-timeline__time,
    .q1s-ds .q1s-shop-timeline__time {
    color: var(--q1s-text-muted);
    font-size: var(--q1s-fs-caption);
}

body.site-q1store .q1s-shop-timeline__note,
    .q1s-ds .q1s-shop-timeline__note {
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
}

/* --- 19. Faixa de beneficios ---------------------------------------- */

body.site-q1store .q1s-shop-benefits,
    .q1s-ds .q1s-shop-benefits {
    display: grid;
    gap: var(--q1s-space-2);
    margin: var(--q1s-space-8) 0 0;
    padding: 0;
    list-style: none;
}

body.site-q1store .q1s-shop-benefit,
    .q1s-ds .q1s-shop-benefit {
    display: flex;
    align-items: center;
    gap: var(--q1s-space-3);
    min-height: 44px;
    padding: var(--q1s-space-3) var(--q1s-space-4);
    background: var(--q1s-surface);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-card);
    color: var(--q1s-text-primary);
    font-weight: var(--q1s-fw-medium);
}

body.site-q1store .q1s-shop-benefit i,
    .q1s-ds .q1s-shop-benefit i {
    color: var(--q1s-primary);
    font-size: var(--q1s-fs-h4);
}

/* --- 20. Rodape da loja --------------------------------------------- */

body.site-q1store .q1s-shop-footer,
    .q1s-ds .q1s-shop-footer {
    margin-top: var(--q1s-space-9);
    padding-block: var(--q1s-space-6);
    background: var(--q1s-surface);
    border-top: 1px solid var(--q1s-border);
}

body.site-q1store .q1s-shop-footer__name,
    .q1s-ds .q1s-shop-footer__name {
    margin: 0 0 var(--q1s-space-1);
    font-weight: var(--q1s-fw-bold);
}

body.site-q1store .q1s-shop-footer__text,
    .q1s-ds .q1s-shop-footer__text {
    max-width: 46ch;
    margin: 0;
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
}

body.site-q1store .q1s-shop-footer__list,
    .q1s-ds .q1s-shop-footer__list {
    display: grid;
    gap: var(--q1s-space-1);
    margin: var(--q1s-space-3) 0 0;
    padding: 0;
    list-style: none;
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
}

body.site-q1store .q1s-shop-footer__item,
    .q1s-ds .q1s-shop-footer__item {
    display: flex;
    align-items: center;
    gap: var(--q1s-space-2);
}

body.site-q1store .q1s-shop-footer__link,
    .q1s-ds .q1s-shop-footer__link {
    color: inherit;
    text-decoration: underline;
}

body.site-q1store .q1s-shop-footer__note,
    .q1s-ds .q1s-shop-footer__note {
    margin: var(--q1s-space-4) 0 0;
    color: var(--q1s-text-muted);
    font-size: var(--q1s-fs-caption);
}

/* --- 21. Barra de ferramentas (contagem + ordenacao) --------------- */

body.site-q1store .q1s-shop-toolbar,
    .q1s-ds .q1s-shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--q1s-space-3);
    margin-bottom: var(--q1s-space-4);
}

body.site-q1store .q1s-shop-toolbar__count,
    .q1s-ds .q1s-shop-toolbar__count {
    margin: 0;
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
}

body.site-q1store .q1s-shop-toolbar__form,
    .q1s-ds .q1s-shop-toolbar__form {
    display: flex;
    align-items: flex-end;
    gap: var(--q1s-space-2);
    margin: 0;
}

/* --- 22. Paginacao --------------------------------------------------
   Alvo de 44px: a paginacao e onde o dedo erra primeiro no telefone. */

body.site-q1store .q1s-shop-pager,
    .q1s-ds .q1s-shop-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--q1s-space-3);
    margin-top: var(--q1s-space-6);
}

body.site-q1store .q1s-shop-pager__info,
    .q1s-ds .q1s-shop-pager__info {
    color: var(--q1s-text-secondary);
    font-size: var(--q1s-fs-small);
}

body.site-q1store .q1s-shop-pager__list,
    .q1s-ds .q1s-shop-pager__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q1s-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

body.site-q1store .q1s-shop-pager__link,
    .q1s-ds .q1s-shop-pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding-inline: var(--q1s-space-2);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-control);
    background: var(--q1s-surface);
    color: var(--q1s-text-primary);
    font-size: var(--q1s-fs-small);
    font-weight: var(--q1s-fw-medium);
    text-decoration: none;
}

body.site-q1store .q1s-shop-pager__link:hover,
    .q1s-ds .q1s-shop-pager__link:hover {
    border-color: var(--q1s-primary);
    color: var(--q1s-primary);
}

body.site-q1store .q1s-shop-pager__link:focus-visible,
    .q1s-ds .q1s-shop-pager__link:focus-visible {
    outline: none;
    box-shadow: var(--q1s-ring);
}

body.site-q1store .q1s-shop-pager__link.is-current,
    .q1s-ds .q1s-shop-pager__link.is-current {
    border-color: var(--q1s-primary);
    background: var(--q1s-primary);
    color: var(--q1s-on-primary);
}

body.site-q1store .q1s-shop-pager__link[aria-disabled="true"],
    .q1s-ds .q1s-shop-pager__link[aria-disabled="true"] {
    background: var(--q1s-surface-sunken);
    color: var(--q1s-text-muted);
}

/* --- 23. Aviso dentro da loja --------------------------------------- */

body.site-q1store .q1s-shop-alert,
    .q1s-ds .q1s-shop-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--q1s-space-2);
    padding: var(--q1s-space-3) var(--q1s-space-4);
    border: 1px solid var(--q1s-border);
    border-radius: var(--q1s-radius-control);
    background: var(--q1s-surface);
    font-size: var(--q1s-fs-small);
}

body.site-q1store .q1s-shop-alert--success,
    .q1s-ds .q1s-shop-alert--success {
    border-color: var(--q1s-success);
    background: var(--q1s-success-soft);
    color: var(--q1s-success);
}

body.site-q1store .q1s-shop-alert--warning,
    .q1s-ds .q1s-shop-alert--warning {
    border-color: var(--q1s-warning);
    background: var(--q1s-warning-soft);
    color: var(--q1s-warning);
}

body.site-q1store .q1s-shop-alert--danger,
    .q1s-ds .q1s-shop-alert--danger {
    border-color: var(--q1s-danger);
    background: var(--q1s-danger-soft);
    color: var(--q1s-danger);
}

/* --- 24. Ajustes de tela -------------------------------------------
   Duas colunas no telefone (acima); tres e quatro a partir do tablet. A
   galeria e a caixa de compra dividem a linha so quando ha largura para
   as duas — antes disso ficam empilhadas, com o preco logo abaixo da
   foto, que e a ordem em que o cliente decide. */

@media (min-width: 40rem) {
    body.site-q1store .q1s-shop__container,
    .q1s-ds .q1s-shop__container {
        padding-inline: var(--q1s-space-6);
    }

body.site-q1store .q1s-shop-grid,
    .q1s-ds .q1s-shop-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--q1s-space-4);
    }

body.site-q1store .q1s-shop-benefits,
    .q1s-ds .q1s-shop-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

body.site-q1store .q1s-shop-line,
    .q1s-ds .q1s-shop-line {
        grid-template-columns: 6.5rem minmax(0, 1fr);
    }
}

@media (min-width: 60rem) {
    body.site-q1store .q1s-shop__main,
    .q1s-ds .q1s-shop__main {
        padding-block: var(--q1s-space-8) var(--q1s-space-11);
    }

body.site-q1store .q1s-shop-hero,
    .q1s-ds .q1s-shop-hero {
        padding: var(--q1s-space-8) var(--q1s-space-6);
    }

body.site-q1store .q1s-shop-search,
    .q1s-ds .q1s-shop-search {
        flex: 0 1 24rem;
    }

body.site-q1store .q1s-shop-grid,
    .q1s-ds .q1s-shop-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

body.site-q1store .q1s-shop-product,
    .q1s-ds .q1s-shop-product {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: start;
        gap: var(--q1s-space-7);
    }

body.site-q1store .q1s-shop-crumbs,
    .q1s-ds .q1s-shop-crumbs {
        margin-bottom: var(--q1s-space-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.site-q1store .q1s-shop-card,
    .q1s-ds .q1s-shop-card,
    body.site-q1store .q1s-shop-chip,
    .q1s-ds .q1s-shop-chip,
    body.site-q1store .q1s-shop-thumb__btn,
    .q1s-ds .q1s-shop-thumb__btn,
    body.site-q1store .q1s-shop-variant__label,
    .q1s-ds .q1s-shop-variant__label,
    body.site-q1store .q1s-shop-choice__label,
    .q1s-ds .q1s-shop-choice__label {
        transition: none;
    }

body.site-q1store .q1s-shop-card:hover,
    .q1s-ds .q1s-shop-card:hover {
        transform: none;
    }
}