/* ==========================================================================
Doctor Mouse · tema Admino · style.css (base compartilhada)
Port do demo (site-doctor/site): tokens.css + base.css + componentes
compartilhados de components.css, mais os ajustes da plataforma no fim.
- 1. Tokens (cópia fiel de site/assets/css/tokens.css)
- 2. Base (reset, tipografia, layout, utilitários)
- 3. Componentes (botões, selos, preço, card, chips, formulários, anúncio,
header, busca, mega-menu, menu mobile, toasts, cookies, atendimento,
rodapé, trilho, abas, acordeão, breadcrumb, estados, tags, "Combina")
- 4. Ajustes da plataforma (sem variáveis legadas --store-*: o frete grátis e o Pix vêm do Twig)
Contrato para as páginas: docs/11-port-tema-admino.md (repositório site-doctor).
As páginas NÃO devem redefinir os tokens; usem os semânticos (--color-*).
========================================================================== */
/* ==========================================================================
Doctor Mouse · Design tokens (v1.1 · out/2026)
Design único para doctormouse.com.br (pt-BR) e doctormouse.com.ar (es-AR).
Especificação completa: docs/03-design-ux.md
Fonte única de verdade para o desenvolvimento: docs/05-blueprint-final.md
v1.1 (alinhamento design × marketing, docs/05 §10.1):
- --shadow-focus redeclarado em .theme-dark (antes herdava o valor já
calculado no :root: vão branco + azul do tema claro no escuro).
- Camadas --z-float (WhatsApp) e --z-consent (banner de cookies).
- --consent-max-h, --safe-bottom, --float-size, --float-offset.
- --header-offset / --header-offset-compact para scroll-padding-top.
- --hero-h, --hero-media-h-mobile, --pdp-gallery-max-h-mobile.
Conceito: "Laboratório de precisão". Vitrine escura, balcão claro.
- :root define as primitivas e o tema CLARO (padrão das áreas de compra:
categoria, área de compra do produto, carrinho, checkout).
- .theme-dark / [data-theme="dark"] redefinem só os tokens semânticos para as
áreas de vitrine (header, mega-menu, hero, faixas editoriais, rodapé).
Os componentes usam SEMPRE os tokens semânticos (--color-*), nunca as
primitivas, então o mesmo componente funciona nos dois temas.
Contrastes WCAG 2.2 conferidos por cálculo (fórmula de luminância relativa).
Os valores estão nos comentários "AA" de cada par.
Fontes (Google Fonts). Carregar no , não por @import:
========================================================================== */
:root {
/* ------------------------------------------------------------------------
1. PRIMITIVAS DE COR
------------------------------------------------------------------------ */
/* Grafite "titânio": neutros frios, levemente azulados para casar com o azul */
--ink-1000: #050608;
--ink-950: #07080B;
--ink-900: #0B0C10; /* fundo escuro principal */
--ink-850: #111318; /* superfície escura */
--ink-800: #171A21; /* card/elevação sobre escuro */
--ink-750: #1D2029;
--ink-700: #232733; /* borda forte no escuro */
--ink-600: #353B49;
--ink-550: #4A5160; /* texto secundário no claro (7,96:1 sobre branco) */
--ink-500: #5A6170; /* borda de input no escuro (3,14:1 sobre ink-900) */
--ink-450: #6B7280; /* texto terciário no claro (4,83:1 sobre branco) */
--ink-400: #7D8494; /* texto terciário no escuro (5,21:1 sobre ink-900) */
--ink-350: #8A91A0; /* borda de input no claro (3,16:1 sobre branco) */
--ink-300: #A3AAB8; /* texto secundário no escuro (8,38:1 sobre ink-900) */
--ink-200: #D9DDE5; /* divisórias no claro */
--ink-150: #E4E7EC;
--ink-100: #ECEEF2; /* "estúdio": fundo das fotos de produto */
--ink-50: #F5F6F8; /* fundo de página clara */
--ink-0: #FFFFFF;
--ink-text-on-dark: #F2F4F8; /* texto principal no escuro (17,75:1) */
/* Azul Doctor: síntese do #2B00FF (BR/favicon) e do #075FE0 (AR/logo SVG) */
--blue-50: #EEF2FF;
--blue-100: #DCE4FF;
--blue-200: #B9C9FF;
--blue-300: #8FA8FF; /* link/acento no escuro (8,58:1 sobre ink-900) */
--blue-400: #5F82FF; /* anel de foco no escuro (5,70:1 sobre ink-900) */
--blue-500: #2E5BFF; /* COR DA MARCA. Botão: branco sobre ele = 5,18:1 */
--blue-600: #1F45E0; /* hover/pressed no claro (branco = 7,03:1) */
--blue-700: #1A37B3;
--blue-800: #152B85;
--blue-900: #0F1E5C;
--blue-950: #0A1438;
/* Prata herança (gradiente do logo antigo #C7C6C6). Edição limitada e detalhes metálicos */
--silver-100: #EEF0F3;
--silver-300: #C7C9CE; /* texto ink-900 sobre prata = 11,80:1 */
--silver-500: #9DA1A9;
--silver-gradient: linear-gradient(135deg, #F3F4F6 0%, #C7C9CE 45%, #8E939C 100%);
/* Economia / Pix / em estoque */
--green-50: #E7F6EE;
--green-400: #3FD68B; /* sobre escuro: 10,43:1 */
--green-600: #0A7F50; /* sobre branco: 5,04:1 · sobre green-50: 4,52:1 */
--green-700: #08663F;
/* Escassez / estoque baixo */
--amber-50: #FFF4E0;
--amber-400: #FFB547; /* sobre escuro: 11,13:1 */
--amber-700: #9A5800; /* sobre branco: 5,57:1 · sobre amber-50: 5,11:1 */
/* Erro / alerta */
--red-50: #FDECEE;
--red-400: #FF7A80; /* sobre escuro: 7,77:1 */
--red-600: #C8202E; /* sobre branco: 5,67:1 · branco sobre ele: 5,67:1 */
/* Marcas de terceiros (só em ícones de meio de pagamento) */
--pix-teal: #32BCAD;
--whatsapp-green: #25D366;
/* ------------------------------------------------------------------------
2. TOKENS SEMÂNTICOS · TEMA CLARO (padrão)
------------------------------------------------------------------------ */
color-scheme: light;
--color-bg: var(--ink-50); /* fundo da página */
--color-surface: var(--ink-0); /* cards, caixa de compra, formulários */
--color-surface-2: var(--ink-50); /* blocos internos, linhas zebradas */
--color-surface-sunken: var(--ink-100); /* campos desabilitados, trilhos */
--color-stage: var(--ink-100); /* palco das fotos de produto (usar mix-blend-mode: multiply na foto) */
--color-overlay: rgb(7 8 11 / 0.56); /* fundo de drawer/modal/busca */
--color-text: var(--ink-900); /* 19,55:1 sobre branco */
--color-text-2: var(--ink-550); /* 7,96:1 sobre branco */
--color-text-3: var(--ink-450); /* 4,83:1 sobre branco (preço "de", metadados) */
--color-text-inverse: var(--ink-text-on-dark);
--color-heading: var(--ink-900);
--color-border: var(--ink-200); /* divisórias (decorativas) */
--color-border-strong: var(--ink-350); /* bordas de input/checkbox: 3,16:1 */
--color-border-focus: var(--blue-500);
--color-primary: var(--blue-500); /* CTA, links, seleção */
--color-primary-hover: var(--blue-600);
--color-primary-pressed: var(--blue-700);
--color-on-primary: var(--ink-0); /* 5,18:1 */
--color-primary-soft: var(--blue-50); /* fundo de chip ativo, linha selecionada */
--color-link: var(--blue-500); /* 5,18:1 sobre branco · 4,79:1 sobre ink-50 */
--color-link-hover: var(--blue-600);
--color-price: var(--ink-900); /* preço principal: tinta, não cor (legibilidade) */
--color-price-old: var(--ink-450);
--color-saving: var(--green-600); /* "no Pix", "-10%", "você economiza" */
--color-saving-bg: var(--green-50);
--color-success: var(--green-600);
--color-success-bg: var(--green-50);
--color-warning: var(--amber-700);
--color-warning-bg: var(--amber-50);
--color-danger: var(--red-600);
--color-danger-bg: var(--red-50);
--color-limited: var(--silver-300);
--color-focus-ring: var(--blue-500);
--color-skeleton: var(--ink-150);
--color-scrim-gradient: linear-gradient(180deg, rgb(11 12 16 / 0) 0%, rgb(11 12 16 / 0.72) 100%);
/* ------------------------------------------------------------------------
3. TIPOGRAFIA
------------------------------------------------------------------------ */
--font-display: "Saira", "Arial Narrow", system-ui, sans-serif; /* títulos curtos, readouts de spec, rótulos */
--font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* texto, UI, preços */
--font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* SKU, código Pix */
/* Iteração 09: fontes da navegação iguais às da SCUF (as duas são do Google Fonts).
Só a navegação principal, o mega-menu, o menu mobile e a barra de anúncio usam estas. */
--font-nav: "Tomorrow", "Saira", system-ui, sans-serif; /* SCUF: menu principal, 18 px / 600 / caixa-alta */
--font-nav-sub: "Sofia Sans Semi Condensed", "Arial Narrow", system-ui, sans-serif; /* SCUF: mega-menu e barra de anúncio */
--font-stretch-display: 85%; /* Saira no eixo wdth: semi-condensada */
--font-stretch-tight: 75%; /* readouts de spec e números grandes */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 800;
/* Escala fluida (mobile 360 px -> desktop 1440 px) */
--text-display-2xl: clamp(2.5rem, 1.75rem + 3.33vw, 4.75rem); /* 40 -> 76 · H1 do hero */
--text-display-xl: clamp(2rem, 1.5rem + 2.22vw, 3.5rem); /* 32 -> 56 · readout de spec */
--text-display-lg: clamp(1.625rem, 1.33rem + 1.3vw, 2.5rem); /* 26 -> 40 · título de seção */
--text-display-md: clamp(1.25rem, 1.12rem + 0.56vw, 1.625rem); /* 20 -> 26 · título de bloco */
--text-display-sm: 1.125rem; /* 18 · eyebrow grande, rótulos de mega-menu */
--text-xl: 1.25rem; /* 20 */
--text-lg: 1.125rem; /* 18 */
--text-md: 1rem; /* 16 · corpo padrão (nunca menor que 16 em input, evita zoom no iOS) */
--text-sm: 0.875rem; /* 14 · UI secundária, cards */
--text-xs: 0.8125rem; /* 13 · metadados, parcelas no card */
--text-2xs: 0.75rem; /* 12 · mínimo absoluto (texto legal, "precio sin impuestos nacionales") */
--text-price-xl: clamp(2rem, 1.79rem + 0.93vw, 2.5rem); /* 32 -> 40 · preço da página de produto */
--text-price-lg: 1.5rem; /* 24 · total do carrinho/checkout */
--text-price-md: 1.25rem; /* 20 · preço no card (desktop) */
--text-price-sm: 1.125rem; /* 18 · preço no card (mobile), drawer */
--leading-none: 1;
--leading-display: 0.95;
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
--tracking-display: -0.01em;
--tracking-caps: 0.06em; /* rótulos e eyebrows em caixa-alta */
--tracking-normal: 0;
--numeric-price: tabular-nums lining-nums;
/* ------------------------------------------------------------------------
4. ESPAÇAMENTO (base 4 px)
------------------------------------------------------------------------ */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem; /* 2 */
--space-1: 0.25rem; /* 4 */
--space-1-5: 0.375rem; /* 6 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 */
--space-6: 1.5rem; /* 24 */
--space-8: 2rem; /* 32 */
--space-10: 2.5rem; /* 40 */
--space-12: 3rem; /* 48 */
--space-16: 4rem; /* 64 */
--space-20: 5rem; /* 80 */
--space-24: 6rem; /* 96 */
--space-32: 8rem; /* 128 */
--section-gap: clamp(3rem, 2.2rem + 3.5vw, 6rem); /* 48 -> 96 entre seções da home */
--stack-gap: clamp(1rem, 0.8rem + 0.9vw, 1.5rem); /* 16 -> 24 entre blocos */
/* ------------------------------------------------------------------------
5. RAIOS, BORDAS E O "CORTE" (chanfro herdado do quadrado do logo)
------------------------------------------------------------------------ */
--radius-0: 0;
--radius-xs: 2px; /* selos, chips de spec */
--radius-sm: 4px; /* botões, inputs, swatches */
--radius-md: 8px; /* cards, palco da foto */
--radius-lg: 12px; /* drawers, painéis, tiles */
--radius-xl: 16px; /* hero tiles, modal */
--radius-pill: 999px; /* só contadores e toggles */
--border-width: 1px;
--border-width-strong: 2px;
/* Chanfro do canto superior esquerdo: DESLIGADO na iteração 10 (pedido do dono: nada de
"ponta cortada" em cards, selos, tiles, banners ou botões). Os tokens continuam existindo
(valem `none`) para não quebrar quem ainda usa `clip-path: var(--cut-*)` ou `.cut-*`.
Valores antigos: polygon(4|8|14|24px 0, 100% 0, 100% 100%, 0 100%, 0 4|8|14|24px). */
--cut-xs: none;
--cut-sm: none;
--cut-md: none;
--cut-lg: none;
/* ------------------------------------------------------------------------
6. SOMBRAS E BRILHO
------------------------------------------------------------------------ */
--shadow-xs: 0 1px 2px rgb(11 12 16 / 0.06);
--shadow-sm: 0 1px 3px rgb(11 12 16 / 0.08), 0 1px 2px rgb(11 12 16 / 0.04);
--shadow-md: 0 6px 16px -4px rgb(11 12 16 / 0.12), 0 2px 4px rgb(11 12 16 / 0.05);
--shadow-lg: 0 18px 40px -12px rgb(11 12 16 / 0.22), 0 4px 10px rgb(11 12 16 / 0.06);
--shadow-xl: 0 32px 64px -20px rgb(11 12 16 / 0.35);
--shadow-sticky-bottom: 0 -8px 24px -8px rgb(11 12 16 / 0.18); /* barra fixa de compra */
--shadow-glow: 0 0 0 1px rgb(46 91 255 / 0.55), 0 10px 32px -10px rgb(46 91 255 / 0.65); /* hover de card no escuro */
--shadow-focus: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus-ring);
/* ------------------------------------------------------------------------
7. GRID, CONTAINER E BREAKPOINTS
Breakpoints (min-width). CSS não aceita var() em @media; use os valores:
sm 480px · md 768px · lg 1024px · xl 1280px · 2xl 1536px
Mobile-first: estilos base = 360-479 px.
------------------------------------------------------------------------ */
--bp-sm: 480px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--bp-2xl: 1536px;
--container-max: 1440px; /* largura máxima total */
--container-content: 1320px; /* conteúdo (grade de produtos, PDP) */
--container-text: 720px; /* textos longos, políticas */
--container-checkout: 1080px;
--gutter: 16px; /* margem lateral: 16 (mobile) -> 24 (md) -> 32 (lg) -> 40 (xl) */
--grid-columns: 4; /* 4 (mobile) -> 8 (md) -> 12 (lg+) */
--grid-gap: 12px; /* 12 (mobile) -> 16 (md) -> 24 (lg+) */
--plp-columns: 2; /* produtos por linha: 2 (mobile) -> 3 (md) -> 3 com filtros / 4 sem (lg) -> 4 (xl) */
--plp-sidebar: 280px; /* coluna de filtros (lg+) */
--pdp-buybox: 440px; /* coluna de compra da PDP (lg+) */
--checkout-summary: 400px; /* resumo do pedido (lg+) */
/* ------------------------------------------------------------------------
8. DIMENSÕES DE COMPONENTES
------------------------------------------------------------------------ */
--tap-min: 44px; /* alvo de toque mínimo (WCAG 2.5.8 pede 24; usamos 44) */
--control-h-sm: 36px;
--control-h-md: 44px;
--control-h-lg: 52px; /* CTA principal */
--control-h-xl: 56px; /* botão de pagar */
--benefit-bar-h: 32px; /* (legado) antiga faixa de 4 benefícios, removida na iteração 08 */
--announce-h: 32px; /* barra de anúncio centralizada (1 mensagem por vez); 40 px no desktop (iteração 09, igual à SCUF) */
--header-h: 72px; /* desktop */
--header-h-compact: 60px; /* desktop ao rolar */
--header-h-mobile: 56px; /* linha do logo */
--search-row-h-mobile: 52px; /* linha de busca do mobile */
--category-nav-h: 48px; /* barra de categorias (desktop) */
--buybar-h: 72px; /* barra fixa de compra (mobile) */
--drawer-w: 440px; /* drawer do carrinho (desktop) */
--megamenu-max-h: min(560px, calc(100dvh - 160px));
/* Altura total do topo fixo, para scroll-padding-top (WCAG 2.4.11).
A barra de anúncio rola junto (não é fixa), então não entra na conta.
Mobile: logo 56 + busca 52 = 108; ao rolar, só a busca (52).
Desktop (>= 1024): header 72 + categorias 48 = 120; compacto 60. */
--header-offset: 108px;
--header-offset-compact: 52px;
/* Hero da home (docs/05 §5.2): no desktop, hero + tiles + categorias cabem em 900 px */
--hero-h: auto; /* mobile: altura pelo conteúdo, máx. 50% da tela útil */
--hero-media-h-mobile: 230px; /* recorte 4:5 exibido em 375 x 230 */
--pdp-gallery-max-h-mobile: 42vh; /* galeria da PDP no mobile: min(100vw, 42vh) */
/* Elementos fixos inferiores (docs/05 §3.3) */
--safe-bottom: env(safe-area-inset-bottom, 0px); /* barra de gestos do iPhone */
--consent-max-h: min(25svh, 200px); /* banner de cookies: até 25% da altura (LGPD/ANPD) */
--float-size: 56px; /* botão flutuante do WhatsApp */
--float-offset: 16px;
/* Header ao rolar (iteração 08, comportamento da SCUF): quando a barra de anúncio sai
da tela, o header gruda no topo e troca para a cor de destaque. Na SCUF é o laranja
#FF8F1C com texto preto; aqui é o Azul Doctor com texto branco (5,18:1, AA).
Para trocar a cor, mude só estes tokens. */
--hdr-scrolled-bg: var(--blue-500);
--hdr-scrolled-fg: var(--ink-0); /* texto e ícones: 5,18:1 sobre blue-500 */
--hdr-scrolled-line: rgb(255 255 255 / 0.18); /* divisórias decorativas */
--hdr-scrolled-field: rgb(11 12 16 / 0.22); /* campo de busca sobre o azul: branco 7,9:1, placeholder 5,5:1 */
--hdr-scrolled-hover: rgb(255 255 255 / 0.14);
--hdr-transition: 320ms cubic-bezier(0.4, 0, 0.2, 1); /* SCUF: 0,3 s cubic-bezier(.4,0,.2,1) */
/* Mega-menu (iteração 09, medido na SCUF): painel desce de trás do header em 0,5 s,
fundo rgba(51,49,50,.85) + blur 10px, borda inferior #575656 e sombra forte; a página atrás não escurece. */
--mega-bg: rgb(51 49 50 / 0.85);
--mega-blur: 10px;
--mega-line: #575656;
--mega-shadow: 0 4px 34px 0 rgb(0 0 0 / 0.95);
--mega-duration: 500ms;
--mega-ease: ease;
/* Hero sangrado da home (iteração 09): por baixo do header transparente */
--home-hero-h: min(78svh, 640px); /* mobile */
--icon-xs: 14px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-stroke: 1.75; /* ícones de linha (Lucide), traço 1,75 */
/* ------------------------------------------------------------------------
9. CAMADAS
------------------------------------------------------------------------ */
--z-base: 0;
--z-raised: 10;
--z-sticky: 100; /* header, barra de filtros, abas da PDP */
--z-float: 150; /* WhatsApp flutuante (nunca sobre a barra de compra) */
--z-buybar: 200; /* barra fixa de compra / total do carrinho / pagar */
--z-consent: 250; /* banner de cookies (faixa inferior; a barra de compra sobe e fica acima dele) */
--z-dropdown: 300; /* mega-menu, autocomplete, select */
--z-overlay: 400;
--z-drawer: 500; /* carrinho, filtros mobile, menu mobile */
--z-modal: 600;
--z-toast: 700;
--z-skip: 800; /* link "pular para o conteúdo" */
/* ------------------------------------------------------------------------
10. MOVIMENTO
Princípio: movimento confirma uma ação ou orienta o olhar; nunca decora
preço nem atrasa clique. Nada passa de 560 ms; nada de autoplay com som.
------------------------------------------------------------------------ */
--duration-instant: 80ms; /* press de botão, troca de cor */
--duration-fast: 140ms; /* hover, chips, checkbox */
--duration-base: 220ms; /* dropdown, accordion, toast entra */
--duration-slow: 320ms; /* drawer, overlay de busca */
--duration-slower: 480ms; /* revelação de seção (uma vez), contador de frete grátis */
--duration-hero: 560ms; /* entrada do hero (uma vez por sessão) */
--ease-standard: cubic-bezier(0.2, 0, 0, 1); /* entra e sai de elementos que mudam de estado */
--ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1); /* desaceleração forte: drawer, overlay, toast */
--ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15); /* saída rápida */
--ease-precise: cubic-bezier(0.65, 0, 0.35, 1); /* barras de progresso, "scan" de spec */
--stagger: 40ms; /* atraso entre itens de lista (máx. 6 itens) */
--lift-hover: -2px; /* elevação do card no hover */
}
/* ==========================================================================
TEMA ESCURO (vitrine): header, mega-menu, hero, faixas editoriais, galeria
de destaque, rodapé. Aplicar com class="theme-dark" ou data-theme="dark"
no container da seção.
========================================================================== */
.theme-dark,
[data-theme="dark"] {
color-scheme: dark;
--color-bg: var(--ink-900);
--color-surface: var(--ink-850);
--color-surface-2: var(--ink-800);
--color-surface-sunken: var(--ink-950);
--color-stage: var(--ink-100); /* o palco da foto continua claro (fotos têm fundo branco) */
--color-overlay: rgb(5 6 8 / 0.72);
--color-text: var(--ink-text-on-dark); /* 17,75:1 sobre ink-900 */
--color-text-2: var(--ink-300); /* 8,38:1 sobre ink-900 · 7,46:1 sobre ink-800 */
--color-text-3: var(--ink-400); /* 5,21:1 sobre ink-900 · 4,64:1 sobre ink-800 */
--color-text-inverse: var(--ink-900);
--color-heading: var(--ink-0);
--color-border: var(--ink-700);
--color-border-strong: var(--ink-500); /* 3,14:1 sobre ink-900 */
--color-border-focus: var(--blue-400);
--color-primary: var(--blue-500); /* botão: branco sobre azul 5,18:1; azul sobre ink-900 3,78:1 (componente) */
--color-primary-hover: #3A66FF; /* branco sobre ele: 4,64:1 */
--color-primary-pressed: var(--blue-600);
--color-on-primary: var(--ink-0);
--color-primary-soft: rgb(46 91 255 / 0.16);
--color-link: var(--blue-300); /* texto azul no escuro: 8,58:1 */
--color-link-hover: var(--blue-200);
--color-price: var(--ink-0);
--color-price-old: var(--ink-400);
--color-saving: var(--green-400); /* 10,43:1 */
--color-saving-bg: rgb(63 214 139 / 0.12);
--color-success: var(--green-400);
--color-success-bg: rgb(63 214 139 / 0.12);
--color-warning: var(--amber-400);
--color-warning-bg: rgb(255 181 71 / 0.12);
--color-danger: var(--red-400);
--color-danger-bg: rgb(255 122 128 / 0.12);
--color-focus-ring: var(--blue-400); /* 5,70:1 sobre ink-900 */
--color-skeleton: var(--ink-750);
/* Redeclarado aqui de propósito: var() em custom property é resolvido no
elemento que declara (:root) e herdado já calculado. Sem esta linha, o foco
no escuro ficaria com vão branco e anel blue-500. */
--shadow-focus: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--blue-400);
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
--shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.6);
--shadow-lg: 0 24px 48px -16px rgb(0 0 0 / 0.7);
}
/* ==========================================================================
RESPONSIVO: tokens que mudam por breakpoint
========================================================================== */
@media (min-width: 768px) {
:root {
--gutter: 24px;
--grid-columns: 8;
--grid-gap: 16px;
--plp-columns: 3;
}
}
@media (min-width: 1024px) {
:root {
--gutter: 32px;
--grid-columns: 12;
--grid-gap: 24px;
--plp-columns: 3;
--header-offset: 120px;
--announce-h: 40px; /* SCUF: 40 px */
--home-hero-h: clamp(560px, 86vh, 800px);
--header-offset-compact: 60px;
--hero-h: 480px; /* hero (8 col) + tiles de campanha empilhados (4 col) */
}
}
@media (min-width: 1280px) {
:root {
--gutter: 40px;
--plp-columns: 4;
}
}
/* ==========================================================================
ACESSIBILIDADE DE MOVIMENTO
========================================================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--duration-instant: 0.01ms;
--duration-fast: 0.01ms;
--duration-base: 0.01ms;
--duration-slow: 0.01ms;
--duration-slower: 0.01ms;
--duration-hero: 0.01ms;
--stagger: 0ms;
--lift-hover: 0px;
--hdr-transition: 0.01ms linear;
--mega-duration: 0.01ms;
}
}
@media (prefers-contrast: more) {
:root {
--color-text-2: var(--ink-900);
--color-text-3: var(--ink-550);
--color-border: var(--ink-350);
}
.theme-dark,
[data-theme="dark"] {
--color-text-2: var(--ink-text-on-dark);
--color-text-3: var(--ink-300);
--color-border: var(--ink-500);
}
}
/* ==========================================================================
Doctor Mouse · base.css (reset, tipografia, layout e utilitários)
Depende de tokens.css. Usa só tokens semânticos (--color-*).
Contrato: docs/06-contrato-tecnico.md
========================================================================== */
/* ---------- Reset enxuto ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-offset-compact) + 16px);
scroll-padding-bottom: calc(var(--buybar-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
min-height: 100vh;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-text);
font-size: var(--text-md);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"], .list-reset { list-style: none; padding: 0; margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--color-link-hover); }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }
[hidden] { display: none !important; }
summary { cursor: pointer; }
::selection { background: var(--blue-200); color: var(--ink-900); }
/* ---------- Foco visível (WCAG 2.4.7 / 2.4.11) ---------- */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
/* ---------- Tipografia ---------- */
h1, h2, h3, .h-display {
font-family: var(--font-display);
font-stretch: var(--font-stretch-display);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-display);
color: var(--color-heading);
text-wrap: balance;
}
h4, h5, h6 { font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--color-heading); }
.t-display-2xl { font-size: var(--text-display-2xl); line-height: var(--leading-display); font-weight: var(--weight-black); }
.t-display-xl { font-size: var(--text-display-xl); line-height: var(--leading-display); font-weight: var(--weight-black); }
.t-display-lg { font-size: var(--text-display-lg); }
.t-display-md { font-size: var(--text-display-md); }
.t-xl { font-size: var(--text-xl); }
.t-lg { font-size: var(--text-lg); }
.t-sm { font-size: var(--text-sm); }
.t-xs { font-size: var(--text-xs); }
.t-2xs { font-size: var(--text-2xs); }
.t-muted { color: var(--color-text-2); }
.t-subtle { color: var(--color-text-3); }
.t-tabular { font-variant-numeric: var(--numeric-price); }
.t-mono { font-family: var(--font-mono); }
.t-center { text-align: center; }
.t-semibold { font-weight: var(--weight-semibold); }
.t-bold { font-weight: var(--weight-bold); }
.eyebrow {
font-family: var(--font-text);
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--color-text-2);
}
.readout {
font-family: var(--font-display);
font-stretch: var(--font-stretch-tight);
font-weight: var(--weight-black);
line-height: var(--leading-none);
font-variant-numeric: var(--numeric-price);
}
.prose { max-width: var(--container-text); line-height: var(--leading-relaxed); }
.prose > * + * { margin-top: var(--space-4); }
/* ---------- Layout ---------- */
.container {
width: 100%;
max-width: calc(var(--container-content) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--container-max) + 2 * var(--gutter)); }
.container--text { max-width: calc(var(--container-text) + 2 * var(--gutter)); }
.container--checkout { max-width: calc(var(--container-checkout) + 2 * var(--gutter)); }
.section { padding-block: var(--section-gap); }
.section--tight { padding-block: calc(var(--section-gap) * 0.6); }
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--stack-gap);
}
.section-head h2 { font-size: var(--text-display-lg); }
.section-head .eyebrow { display: block; margin-bottom: var(--space-1); }
.stack { display: flex; flex-direction: column; gap: var(--stack-gap); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.grid-12 { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); gap: var(--grid-gap); }
.products-grid {
display: grid;
grid-template-columns: repeat(var(--plp-columns), minmax(0, 1fr));
gap: var(--grid-gap);
}
/* Temas de seção (vitrine escura, balcão claro) */
.theme-dark { background: var(--color-bg); color: var(--color-text); }
.theme-light { background: var(--color-bg); color: var(--color-text); }
.surface { background: var(--color-surface); }
/* Grade milimétrica: só nas faixas escuras */
.mm-grid {
background-color: var(--color-bg);
background-image:
linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px),
linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px);
background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
}
/* Corte (chanfro do logo): desligado na iteração 10, os tokens --cut-* valem none */
.cut-xs { clip-path: var(--cut-xs); }
.cut-sm { clip-path: var(--cut-sm); }
.cut-md { clip-path: var(--cut-md); }
.cut-lg { clip-path: var(--cut-lg); }
/* Palco da foto de produto (fotos com fundo branco) */
.stage {
background: var(--color-stage);
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 1;
display: grid;
place-items: center;
}
.stage img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* Rolagem horizontal com snap (trilhos, chips) */
.h-scroll {
display: flex;
gap: var(--grid-gap);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; flex: 0 0 auto; }
/* ---------- Acessibilidade ---------- */
.visually-hidden,
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.skip-link {
position: fixed;
top: var(--space-2);
left: var(--space-2);
z-index: var(--z-skip);
padding: var(--space-3) var(--space-4);
background: var(--blue-500);
color: #fff;
font-weight: var(--weight-semibold);
border-radius: var(--radius-sm);
transform: translateY(-200%);
transition: transform var(--duration-fast) var(--ease-standard);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; color: #fff; }
/* Bloqueio de rolagem quando há diálogo aberto */
html.is-locked, html.is-locked body { overflow: hidden; }
/* Visibilidade por breakpoint */
@media (max-width: 1023.98px) { .only-desktop { display: none !important; } }
@media (min-width: 1024px) { .only-mobile { display: none !important; } }
/* Nota de demonstração (valores ilustrativos) */
.demo-note { font-size: var(--text-2xs); color: var(--color-text-3); }
.demo-flag {
display: inline-block;
padding: 0 var(--space-1);
border: 1px dashed currentColor;
border-radius: var(--radius-xs);
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
/* Revelação única de seção (desligada no reduced motion pelos tokens) */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--duration-slower) var(--ease-enter), transform var(--duration-slower) var(--ease-enter); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
/* ==========================================================================
Doctor Mouse · components.css
Componentes compartilhados (shell, produto, preço, formulários, drawer...).
Todos usam tokens semânticos e funcionam dentro de .theme-dark.
Classes e anatomia: docs/06-contrato-tecnico.md §3
========================================================================== */
/* =========================================================================
1. BOTÕES (CP-28)
========================================================================= */
.btn {
--btn-h: var(--control-h-md);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--btn-h);
padding: 0 var(--space-5);
border: 1.5px solid transparent;
border-radius: var(--radius-sm);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard),
transform var(--duration-instant) var(--ease-standard);
-webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn svg { width: var(--icon-md); height: var(--icon-md); flex: none; }
.btn--sm { --btn-h: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn--lg { --btn-h: var(--control-h-lg); padding: 0 var(--space-6); font-size: var(--text-lg); }
.btn--xl { --btn-h: var(--control-h-xl); padding: 0 var(--space-6); font-size: var(--text-lg); }
.btn--block { width: 100%; }
@media (max-width: 767.98px) { .btn--lg, .btn--xl { width: 100%; } .btn--lg.btn--inline, .btn--xl.btn--inline { width: auto; } }
/* .btn--sm continua com 44 px de área de toque */
.btn--sm { position: relative; }
.btn--sm::after { content: ""; position: absolute; inset: -4px 0; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn--primary:active { background: var(--color-primary-pressed); }
.btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-text); }
.btn--secondary:hover { background: var(--color-surface-2); color: var(--color-text); }
.btn--tertiary {
--btn-h: auto;
min-height: var(--tap-min);
padding: 0;
background: none;
color: var(--color-link);
font-weight: var(--weight-semibold);
}
.btn--tertiary:hover { color: var(--color-link-hover); text-decoration: underline; }
.btn--ghost { background: transparent; color: var(--color-text); }
.btn--ghost:hover { background: var(--color-surface-2); }
.btn--icon {
width: var(--tap-min);
min-width: var(--tap-min);
height: var(--tap-min);
padding: 0;
background: transparent;
color: var(--color-text);
border-radius: var(--radius-sm);
}
.btn--icon:hover { background: var(--color-surface-2); }
.btn--whatsapp { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn--whatsapp svg { color: var(--whatsapp-green); }
.btn--whatsapp:hover { border-color: var(--whatsapp-green); color: var(--color-text); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { opacity: 0.85; }
.btn.is-loading::before {
content: ""; width: 16px; height: 16px; border-radius: 50%;
border: 2px solid currentColor; border-right-color: transparent;
animation: dm-spin 700ms linear infinite;
}
.btn.is-success { background: var(--color-success); border-color: var(--color-success); color: #fff; }
@keyframes dm-spin { to { transform: rotate(360deg); } }
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-semibold); text-decoration: none; min-height: var(--tap-min); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-standard); }
.link-arrow:hover svg { transform: translateX(2px); }
/* =========================================================================
2. SELOS, ESTOQUE, ESTRELAS (CP-21, CP-22, CP-25)
========================================================================= */
.badges { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.badge {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 var(--space-2) 0 calc(var(--space-2) + 2px);
font-size: var(--text-2xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
line-height: 1;
border-radius: var(--radius-xs);
clip-path: none; /* iteração 10: sem chanfro */
white-space: nowrap;
}
.badge--out { background: var(--ink-100); color: var(--ink-550); }
.badge--limited { background: var(--silver-gradient); color: var(--ink-900); }
.badge--new { background: var(--blue-500); color: #fff; }
.badge--off { background: var(--green-600); color: #fff; }
.badge--best { background: var(--ink-900); color: #fff; }
.theme-dark .badge--best { background: var(--ink-0); color: var(--ink-900); }
.badge--own { background: var(--color-surface); color: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--color-primary); clip-path: none; }
.badge--pill { clip-path: none; border-radius: var(--radius-xs); background: var(--color-saving-bg); color: var(--color-saving); text-transform: none; letter-spacing: 0; font-size: var(--text-xs); height: 20px; padding: 0 var(--space-1-5); }
.stock { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-success); }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.stock--low { color: var(--color-warning); }
.stock--out { color: var(--color-text-3); }
.stars { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text); }
.stars svg { width: 14px; height: 14px; }
.stars__count { color: var(--color-text-3); }
/* =========================================================================
3. PREÇO (CP-20)
========================================================================= */
.price { font-variant-numeric: var(--numeric-price); color: var(--color-price); line-height: var(--leading-snug); }
.price p { margin: 0; }
.price__old { display: block; color: var(--color-price-old); font-size: var(--text-xs); text-decoration-thickness: 1px; }
.price__old-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.price__main { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--space-1-5); }
.price__value { font-weight: var(--weight-black); letter-spacing: -0.01em; white-space: nowrap; }
.price__method { color: var(--color-saving); font-weight: var(--weight-semibold); font-size: var(--text-xs); }
.price__tax { font-size: var(--text-2xs); color: var(--color-text-3); }
.price__inst { font-size: var(--text-xs); color: var(--color-text-2); }
.price__inst strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.price__last { font-size: var(--text-xs); color: var(--color-text-3); }
.price.is-out .price__value { color: var(--color-text-3); font-weight: var(--weight-bold); }
.price--sm .price__value { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.price--sm .price__inst, .price--sm .price__tax { font-size: var(--text-2xs); }
.price--md .price__value { font-size: var(--text-price-sm); }
@media (min-width: 768px) { .price--md .price__value { font-size: var(--text-price-md); } }
.price--lg .price__value { font-size: var(--text-price-lg); }
.price--lg .price__method { font-size: var(--text-sm); }
.price--xl .price__old { font-size: var(--text-sm); }
.price--xl .price__value { font-size: var(--text-price-xl); }
.price--xl .price__method { font-size: var(--text-md); }
.price--xl .price__inst { font-size: var(--text-sm); }
.price--xl .price__tax { font-size: var(--text-xs); }
.price--hero .price__value { font-size: var(--text-price-lg); }
.price--hero .price__method { font-size: var(--text-sm); }
.price--hero .price__inst { font-size: var(--text-sm); }
.price .inst-short { display: none; }
@media (max-width: 359.98px) { .price--md .inst-long { display: none; } .price--md .inst-short { display: inline; } }
/* Tabela de parcelas (CP-55) */
.inst-table { width: 100%; font-size: var(--text-sm); font-variant-numeric: var(--numeric-price); }
.inst-table th, .inst-table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); }
.inst-table td:last-child, .inst-table th:last-child { text-align: right; }
.inst-table tr:nth-child(even) td { background: var(--color-surface-2); }
/* =========================================================================
4. CARD DE PRODUTO (CP-23) + SKELETON (CP-69)
========================================================================= */
.pcard {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast);
}
.pcard__media { position: relative; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.pcard__media img { position: absolute; inset: 0; transition: opacity var(--duration-base) var(--ease-standard); }
.pcard__img2 { opacity: 0; }
.pcard__badges { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 2; max-width: calc(100% - 56px); }
.pcard__fav { position: absolute; top: var(--space-1); right: var(--space-1); z-index: 3; color: var(--ink-900); border-radius: 50%; }
.pcard__fav:hover { background: rgb(255 255 255 / 0.7); }
.pcard__fav svg { width: 20px; height: 20px; }
.pcard__fav[aria-pressed="true"] svg { fill: var(--red-600); color: var(--red-600); }
.pcard__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); flex: 1; }
@media (min-width: 768px) { .pcard__body { padding: var(--space-4); } }
.pcard__brand {
position: relative; z-index: 2; align-self: flex-start;
font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase;
color: var(--color-text-3); text-decoration: none;
padding-block: 2px;
}
.pcard__brand:hover { color: var(--color-link); text-decoration: underline; }
.pcard__name { font-family: var(--font-text); font-stretch: normal; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: 0; color: var(--color-text); }
@media (min-width: 768px) { .pcard__name { font-size: 0.9375rem; } }
.pcard__name a { color: inherit; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-md); }
.pcard__link:focus-visible { outline: none; }
.pcard:has(.pcard__link:focus-visible) { box-shadow: var(--shadow-focus); }
.pcard__specs { font-size: var(--text-xs); color: var(--color-text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pcard__specs > span { white-space: nowrap; } /* B-07: quebra entre specs, nunca no meio ("HERO 2") */
.pcard__price { margin-top: auto; padding-top: var(--space-2); }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-1); position: relative; z-index: 2; }
.pcard__notify { position: relative; z-index: 2; margin-top: var(--space-2); }
.pcard .notify { position: relative; z-index: 2; margin-top: var(--space-2); }
@media (hover: hover) and (pointer: fine) {
.pcard:hover { transform: translateY(var(--lift-hover)); box-shadow: var(--shadow-md); border-color: transparent; }
.pcard:hover .pcard__img2[src] { opacity: 1; }
.pcard:hover .pcard__img2[src] ~ .pcard__img { opacity: 0; }
.theme-dark .pcard:hover { box-shadow: var(--shadow-glow); }
}
.pcard.is-out .pcard__media img { opacity: 0.5; }
.pcard.is-out:hover .pcard__img2 { opacity: 0 !important; }
.pcard.is-out .pcard__img { opacity: 0.5 !important; }
/* compacto (autocomplete, drawer, parecidos) */
.mini {
position: relative;
display: grid;
grid-template-columns: 64px 1fr;
gap: var(--space-3);
align-items: center;
padding: var(--space-2);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--color-text);
}
.mini .stage { border-radius: var(--radius-sm); }
.mini__brand { font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-3); font-weight: var(--weight-semibold); }
.mini__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.mini__specs { font-size: var(--text-2xs); color: var(--color-text-2); }
/* swatches (CP-26) */
.swatches { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.swatch { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18); background: var(--sw, #ccc); }
.swatches__more { font-size: var(--text-2xs); color: var(--color-text-3); margin-left: var(--space-1); }
/* skeleton */
.skel { background: var(--color-skeleton); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.skel::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.35), transparent);
transform: translateX(-100%);
animation: dm-shimmer 1.4s infinite;
}
@keyframes dm-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; display: none; } }
.pcard--skel .pcard__media { aspect-ratio: 1; }
.pcard--skel .skel-line { height: 12px; margin-top: var(--space-2); }
/* =========================================================================
5. CHIPS (CP-29, CP-63)
========================================================================= */
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 4px; margin-block: -4px; }
.chips--scroll::-webkit-scrollbar { display: none; }
.chips--scroll > * { flex: none; }
.chip {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
height: 36px;
padding: 0 var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: border-color var(--duration-fast), background-color var(--duration-fast);
}
.chip::after { content: ""; position: absolute; inset: -4px 0; } /* 44 px de toque */
.chip:hover { border-color: var(--color-text); color: var(--color-text); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--color-primary-soft); border-color: var(--color-primary); }
.chip__count { color: var(--color-text-3); font-size: var(--text-xs); }
.chip svg { width: 16px; height: 16px; }
.chip--applied { background: var(--color-primary-soft); border-color: var(--color-primary); }
.chip--applied svg { width: 14px; height: 14px; }
.chip--thumb { padding-left: var(--space-1); }
.chip--thumb img { width: 28px; height: 28px; border-radius: var(--radius-xs); background: var(--color-stage); mix-blend-mode: multiply; object-fit: contain; }
.chip--goal { height: 56px; padding: 0 var(--space-4); font-size: var(--text-md); font-weight: var(--weight-semibold); background: var(--color-surface-2); border-color: var(--color-border); border-radius: var(--radius-sm); }
.chip--goal::after { inset: 0; }
.chip--goal:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.chip--goal svg { width: 22px; height: 22px; color: var(--color-link); }
/* =========================================================================
6. FORMULÁRIOS (CP-53) + quantidade (CP-27)
========================================================================= */
.field { display: flex; flex-direction: column; gap: var(--space-1-5); }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.field__opt { font-weight: var(--weight-regular); color: var(--color-text-3); }
.field__input, .field select, .field textarea {
width: 100%;
min-height: var(--control-h-md);
padding: 0 var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font-size: 16px; /* evita zoom no iOS */
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.field textarea { padding-block: var(--space-3); min-height: 96px; resize: vertical; }
.field--lg .field__input { min-height: 48px; }
.field__input::placeholder { color: var(--color-text-3); }
.field__input:hover { border-color: var(--color-text-2); }
.field__input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); }
.field__help { font-size: var(--text-xs); color: var(--color-text-2); }
.field__error { display: none; align-items: flex-start; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-danger); font-weight: var(--weight-medium); }
.field__error svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.field.is-invalid .field__input { border-color: var(--color-danger); }
.field.is-invalid .field__error { display: flex; }
.field.is-valid .field__input { border-color: var(--color-success); }
.input-group { display: flex; gap: var(--space-2); }
.input-group .field__input { flex: 1; min-width: 0; }
.check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--tap-min); padding-block: var(--space-2); cursor: pointer; font-size: var(--text-sm); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--color-primary); flex: none; }
.radio-card {
display: flex; align-items: center; gap: var(--space-3);
min-height: 56px; padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
background: var(--color-surface); cursor: pointer;
}
.radio-card input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-primary); flex: none; }
.radio-card:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); background: var(--color-primary-soft); }
.radio-card:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
.toggle { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.toggle input { appearance: none; width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--color-border-strong); position: relative; margin: 0; cursor: pointer; transition: background var(--duration-fast); flex: none; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--duration-fast) var(--ease-standard); }
.toggle input:checked { background: var(--color-primary); }
.toggle input:checked::after { transform: translateX(16px); }
.toggle input:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); }
.qty button { width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; color: var(--color-text); }
.qty button:hover { background: var(--color-surface-2); }
.qty button svg { width: 16px; height: 16px; }
.qty input { width: 40px; height: var(--tap-min); border: 0; text-align: center; background: transparent; font-size: 16px; font-variant-numeric: var(--numeric-price); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Avise-me (CP-35) */
.notify { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-border); }
.notify__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.notify__switch { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; align-self: flex-start; }
.notify__switch button { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-2); }
.notify__switch button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.notify__fine { font-size: var(--text-2xs); color: var(--color-text-3); }
.notify__ok { font-size: var(--text-sm); color: var(--color-success); font-weight: var(--weight-semibold); }
/* =========================================================================
7. BARRA DE ANÚNCIO (iteração 08, estilo SCUF) + SELETOR DE LOJA (CP-07)
Uma mensagem por vez, centralizada, que rola junto com a página.
========================================================================= */
.announce { position: relative; z-index: calc(var(--z-sticky) + 2); background: var(--ink-800); color: var(--ink-text-on-dark); }
.announce__in { position: relative; display: flex; align-items: center; justify-content: center; height: var(--announce-h); }
.announce__list { position: relative; list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; }
.announce__item {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-stretch: var(--font-stretch-display);
font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.04em; text-transform: uppercase;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
opacity: 0; transform: translateY(6px); pointer-events: none;
transition: opacity var(--duration-slower) var(--ease-standard), transform var(--duration-slower) var(--ease-standard);
}
.announce__item.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* o link focado pelo teclado nunca fica invisível (WCAG 2.4.7); o script.js também passa o is-on para ele */
.announce__item:focus-within { opacity: 1; transform: none; pointer-events: auto; z-index: 1; }
.announce__item strong { color: var(--blue-300); font-weight: var(--weight-bold); } /* 7,6:1 sobre ink-800 */
.announce__item a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--announce-h); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.announce__item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.announce__item a:focus-visible { outline: 2px solid var(--blue-400); outline-offset: -2px; border-radius: var(--radius-xs); }
@media (min-width: 1024px) { .announce__item { font-size: var(--text-sm); } }
/* Pausa (WCAG 2.2.2): fica escondida até receber foco pelo teclado */
.announce__toggle {
position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
padding: 2px var(--space-2); border-radius: var(--radius-xs); background: var(--ink-700); color: var(--ink-text-on-dark);
font-size: var(--text-2xs); font-weight: var(--weight-semibold);
clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
}
.announce__toggle:focus-visible { clip-path: none; width: auto; height: auto; overflow: visible; outline: 2px solid var(--blue-400); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .announce__item { transition: none; transform: none; } }
.store-switch { position: relative; }
/* Só BR (etapa 2 traz o popover de volta): "Brasil" atual + link para doctormouse.com.ar.
Iteração 08: discreto, sem bandeira, só no rodapé e no fim do menu mobile. */
.store-links { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); white-space: nowrap; }
.store-links__cur { color: var(--color-text); font-weight: var(--weight-medium); }
.store-links__cur::after { content: "·"; margin-left: var(--space-2); color: var(--color-text-3); }
.store-links a.store-links__ar { position: relative; display: inline-flex; align-items: center; gap: 2px; color: var(--color-text-2); text-decoration: none; }
.store-links a.store-links__ar::after { content: ""; position: absolute; inset: -12px -6px; }
.store-links a.store-links__ar:hover { color: var(--color-text); text-decoration: underline; }
.store-links svg { width: 12px; height: 12px; flex: none; }
/* =========================================================================
8. HEADER (CP-02) + BUSCA (CP-03, CP-04) + MEGA-MENU (CP-05)
Iteração 08 (referência SCUF): logo monocromático, busca visível e leve,
ações só com ícone, categorias em caixa-alta centralizadas, mega-menu com
ícones e, ao rolar, header na cor de destaque (html.hdr-scrolled).
========================================================================= */
.hdr-slot {
position: sticky; top: 0; z-index: var(--z-sticky);
height: calc(var(--header-h-mobile) + var(--search-row-h-mobile));
pointer-events: none;
}
@media (min-width: 1024px) { .hdr-slot { height: calc(var(--header-h) + var(--category-nav-h)); } }
.site-header {
pointer-events: auto;
background: var(--ink-900);
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
transition: transform var(--duration-base) var(--ease-standard), background-color var(--hdr-transition), border-color var(--hdr-transition), box-shadow var(--hdr-transition), color var(--hdr-transition);
will-change: transform;
}
.hdr-row {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas: "burger logo actions" "search search search";
align-items: center;
column-gap: var(--space-1);
}
.hdr-burger { grid-area: burger; margin-left: -10px; color: inherit; }
.hdr-burger:hover { background: rgb(255 255 255 / 0.08); }
.hdr-logo { grid-area: logo; display: inline-flex; align-items: center; height: var(--header-h-mobile); justify-self: start; padding-inline: var(--space-1); color: var(--ink-0); border-radius: var(--radius-sm); }
.hdr-logo:hover { color: var(--ink-0); }
.hdr-logo:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.logo-mono { display: block; height: 24px; width: auto; flex: none; }
.hdr-actions { grid-area: actions; display: flex; align-items: center; gap: 0; margin-right: -10px; }
.hdr-search { grid-area: search; height: var(--search-row-h-mobile); display: flex; align-items: center; padding-bottom: var(--space-2); }
.hdr-icon {
position: relative; display: inline-flex; align-items: center; justify-content: center;
min-width: var(--tap-min); height: var(--tap-min); padding: 0;
color: inherit; text-decoration: none; border-radius: var(--radius-sm);
transition: background-color var(--duration-fast) var(--ease-standard);
}
.hdr-icon:hover { background: rgb(255 255 255 / 0.08); color: inherit; }
.hdr-icon:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hdr-icon svg { width: 22px; height: 22px; }
/* rótulos só para leitor de tela (ações só com ícone, como na SCUF) */
.hdr-icon__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hdr-count {
position: absolute; top: 5px; right: 3px;
min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-pill);
background: var(--blue-500); color: #fff; font-size: 10.5px; font-weight: var(--weight-bold); line-height: 17px; text-align: center;
font-variant-numeric: var(--numeric-price);
box-shadow: 0 0 0 2px var(--ink-900);
transition: background-color var(--hdr-transition), color var(--hdr-transition), box-shadow var(--hdr-transition);
}
.hdr-count:empty { display: none; }
.hdr-cart__value { display: none; }
.hdr-wish { display: none; }
@media (min-width: 1024px) {
.hdr-row {
grid-template-columns: minmax(140px, 1fr) minmax(320px, 600px) minmax(140px, 1fr);
grid-template-areas: "logo search actions";
column-gap: var(--space-8);
height: var(--header-h);
transition: height var(--duration-base) var(--ease-standard);
}
.hdr-logo { height: auto; padding: var(--space-1); margin-left: calc(-1 * var(--space-1)); }
.logo-mono { height: 28px; }
.hdr-search { height: auto; padding: 0; }
.hdr-actions { justify-self: end; gap: var(--space-1); margin: 0 calc(-1 * var(--space-2)) 0 0; }
.hdr-wish { display: inline-flex; }
}
/* Altura visível do header fixo, para barras sticky das páginas (filtros da PLP, abas e galeria da PDP) */
:root { --hdr-top: calc(var(--header-h-mobile) + var(--search-row-h-mobile)); }
html.hdr-compact { --hdr-top: var(--search-row-h-mobile); }
html.hdr-hide { --hdr-top: 0px; }
@media (min-width: 1024px) {
:root { --hdr-top: calc(var(--header-h) + var(--category-nav-h) + 1px); }
html.hdr-compact, html.hdr-hide { --hdr-top: calc(var(--header-h-compact) + 1px); }
}
/* Headroom (§3.3): classes no */
@media (max-width: 1023.98px) {
html.hdr-compact .site-header { transform: translateY(calc(-1 * var(--header-h-mobile))); }
html.hdr-hide .site-header { transform: translateY(-100%); }
}
@media (min-width: 1024px) {
html.hdr-compact .hdr-row { height: var(--header-h-compact); }
/* M-03: a barra de categorias recolhe de verdade (altura 0), sem deixar faixa escura vazia */
html.hdr-compact .catnav { height: 0; overflow: hidden; border-top-width: 0; opacity: 0; visibility: hidden; }
}
/* Busca em tela cheia (C-01): o header não pode criar containing block para o overlay fixo
(transform/will-change prendem o position:fixed dentro dele) */
html.search-open .site-header { transform: none !important; will-change: auto; transition: none; }
html.search-open .hdr-slot { z-index: var(--z-drawer); }
/* ---- Estado ao rolar (SCUF): a barra de anúncio saiu da tela, o header gruda e fica na cor de destaque ---- */
html.hdr-scrolled .site-header:not(.site-header--min),
html.mega-open .site-header:not(.site-header--min) {
background: var(--hdr-scrolled-bg);
color: var(--hdr-scrolled-fg);
border-bottom-color: transparent;
box-shadow: 0 1px 2px rgb(11 12 16 / 0.12), 0 8px 24px -12px rgb(11 12 16 / 0.45);
/* foco branco sobre o azul (anel com contraste >= 3:1) */
--shadow-focus: 0 0 0 2px var(--hdr-scrolled-bg), 0 0 0 4px var(--ink-0);
}
html.hdr-scrolled .site-header:not(.site-header--min) .hdr-logo,
html.hdr-scrolled .site-header:not(.site-header--min) .hdr-logo:hover,
html.mega-open .site-header:not(.site-header--min) .hdr-logo,
html.mega-open .site-header:not(.site-header--min) .hdr-logo:hover { color: var(--hdr-scrolled-fg); }
html.hdr-scrolled .site-header:not(.site-header--min) .hdr-icon:hover,
html.hdr-scrolled .site-header:not(.site-header--min) .hdr-burger:hover,
html.mega-open .site-header:not(.site-header--min) .hdr-icon:hover,
html.mega-open .site-header:not(.site-header--min) .hdr-burger:hover { background: var(--hdr-scrolled-hover); }
html.hdr-scrolled .hdr-count,
html.mega-open .hdr-count { background: var(--ink-0); color: var(--blue-700); box-shadow: 0 0 0 2px var(--hdr-scrolled-bg); }
/* Header mínimo do checkout */
.hdr-slot--min { height: 56px; }
.hdr-row--min { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 56px; }
.hdr-row--min .hdr-logo { height: auto; }
.hdr-secure { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-xs); color: var(--color-text-2); margin-left: auto; }
.hdr-secure svg { width: 16px; height: 16px; color: var(--green-400); }
.hdr-help { display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: var(--tap-min); padding: 0 var(--space-2); color: var(--color-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-decoration: none; border-radius: var(--radius-sm); }
.hdr-help:hover { background: var(--ink-800); color: var(--color-text); }
.hdr-help svg { width: 18px; height: 18px; color: var(--whatsapp-green); }
@media (max-width: 479.98px) { .hdr-secure span { display: none; } }
@media (min-width: 1024px) { .hdr-slot--min { height: 64px; } .hdr-row--min { height: 64px; display: flex; } }
/* Campo de busca: sempre visível (decisão do dono, diferente da SCUF), leve e sem atalho à mostra.
Fechado: campo translúcido sobre o header; com foco: claro, como o painel de sugestões. */
.search { position: relative; width: 100%; }
.search__form {
position: relative; display: flex; align-items: center; gap: var(--space-2);
height: 40px; padding: 0 var(--space-1) 0 var(--space-3);
background: var(--ink-0); color: var(--ink-900);
border: 1px solid transparent; border-radius: var(--radius-md);
transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.search__icon { width: 18px; height: 18px; color: var(--ink-550); flex: none; }
.search__input {
flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink-900);
font-size: 16px; outline: none;
}
.search__input::placeholder { color: var(--ink-450); text-overflow: ellipsis; opacity: 1; }
.search__input::-webkit-search-cancel-button { display: none; }
.search__kbd { display: none !important; }
.search__clear, .search__back, .search__close { display: none; width: 36px; height: 36px; place-items: center; color: var(--ink-550); border-radius: var(--radius-sm); flex: none; }
.search__clear svg, .search__back svg, .search__close svg { width: 18px; height: 18px; }
.search.has-value .search__clear { display: grid; }
/* no header (fechado): translúcido */
.site-header .search:not(.is-open) .search__form { background: rgb(255 255 255 / 0.07); color: var(--ink-text-on-dark); border-color: rgb(255 255 255 / 0.06); }
.site-header .search:not(.is-open) .search__form:hover { background: rgb(255 255 255 / 0.1); }
.site-header .search:not(.is-open) .search__icon,
.site-header .search:not(.is-open) .search__clear { color: var(--ink-300); }
.site-header .search:not(.is-open) .search__input { color: var(--ink-text-on-dark); }
.site-header .search:not(.is-open) .search__input::placeholder { color: var(--ink-300); } /* 7,3:1 */
/* com foco: claro (o painel de sugestões também é claro) */
.site-header .search:not(.is-open) .search__form:focus-within { background: var(--ink-0); border-color: transparent; box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--blue-400); }
.site-header .search:not(.is-open) .search__form:focus-within .search__icon,
.site-header .search:not(.is-open) .search__form:focus-within .search__clear { color: var(--ink-550); }
.site-header .search:not(.is-open) .search__form:focus-within .search__input { color: var(--ink-900); }
.site-header .search:not(.is-open) .search__form:focus-within .search__input::placeholder { color: var(--ink-450); }
/* sobre o azul (ao rolar) */
html.hdr-scrolled .site-header .search:not(.is-open) .search__form,
html.mega-open .site-header .search:not(.is-open) .search__form { background: var(--hdr-scrolled-field); border-color: transparent; }
html.hdr-scrolled .site-header .search:not(.is-open) .search__form:hover,
html.mega-open .site-header .search:not(.is-open) .search__form:hover { background: rgb(11 12 16 / 0.3); }
html.hdr-scrolled .site-header .search:not(.is-open) .search__icon,
html.hdr-scrolled .site-header .search:not(.is-open) .search__clear,
html.mega-open .site-header .search:not(.is-open) .search__icon,
html.mega-open .site-header .search:not(.is-open) .search__clear { color: var(--hdr-scrolled-fg); }
html.hdr-scrolled .site-header .search:not(.is-open) .search__input,
html.mega-open .site-header .search:not(.is-open) .search__input { color: var(--hdr-scrolled-fg); }
html.hdr-scrolled .site-header .search:not(.is-open) .search__input::placeholder,
html.mega-open .site-header .search:not(.is-open) .search__input::placeholder { color: rgb(255 255 255 / 0.82); }
html.hdr-scrolled .site-header .search:not(.is-open) .search__form:focus-within,
html.mega-open .site-header .search:not(.is-open) .search__form:focus-within { background: var(--ink-0); box-shadow: 0 0 0 2px var(--hdr-scrolled-bg), 0 0 0 4px var(--ink-0); }
html.hdr-scrolled .site-header .search:not(.is-open) .search__form:focus-within .search__icon,
html.mega-open .site-header .search:not(.is-open) .search__form:focus-within .search__icon { color: var(--ink-550); }
html.hdr-scrolled .site-header .search:not(.is-open) .search__form:focus-within .search__input,
html.mega-open .site-header .search:not(.is-open) .search__form:focus-within .search__input { color: var(--ink-900); }
html.hdr-scrolled .site-header .search:not(.is-open) .search__form:focus-within .search__input::placeholder,
html.mega-open .site-header .search:not(.is-open) .search__form:focus-within .search__input::placeholder { color: var(--ink-450); }
/* Barra de categorias (desktop): caixa-alta, centralizada, indicador sublinhado (SCUF) */
.catnav { position: relative; height: var(--category-nav-h); background: transparent; border-top: 1px solid var(--color-border); transition: height var(--duration-base) var(--ease-standard), opacity var(--duration-base), visibility var(--duration-base), border-color var(--hdr-transition); z-index: -1; }
.catnav__list { display: flex; align-items: center; justify-content: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; height: var(--category-nav-h); }
.catnav__sep { width: 1px; height: 16px; background: var(--color-border); margin-inline: var(--space-2); }
.catnav__btn {
position: relative; display: inline-flex; align-items: center; gap: var(--space-1);
height: var(--category-nav-h); padding: 0 var(--space-3);
color: inherit; text-decoration: none;
font-family: var(--font-display); font-stretch: var(--font-stretch-display); font-size: 0.9375rem; font-weight: var(--weight-semibold);
letter-spacing: 0.05em; text-transform: uppercase;
}
.catnav__btn:hover, .catnav__btn[aria-expanded="true"] { color: inherit; }
.catnav__btn:focus-visible { outline: none; box-shadow: inset var(--shadow-focus); border-radius: var(--radius-sm); }
.catnav__btn svg { width: 14px; height: 14px; opacity: 0.7; transition: transform var(--duration-fast); }
.catnav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.catnav__btn--accent { color: var(--color-link); }
html.hdr-scrolled .site-header:not(.site-header--min) .catnav,
html.mega-open .site-header:not(.site-header--min) .catnav { border-top-color: var(--hdr-scrolled-line); }
html.hdr-scrolled .site-header:not(.site-header--min) .catnav__sep,
html.mega-open .site-header:not(.site-header--min) .catnav__sep { background: var(--hdr-scrolled-line); }
html.hdr-scrolled .site-header:not(.site-header--min) .catnav__btn--accent,
html.mega-open .site-header:not(.site-header--min) .catnav__btn--accent { color: var(--hdr-scrolled-fg); }
/* Mega-menu (iteração 09, igual à SCUF): .mega é a "janela" logo abaixo da barra de categorias
(overflow hidden, sem área clicável quando fechada); .mega__panel desce de trás do header
com translateY em 0,5 s e sobe ao fechar. Fundo rgba(51,49,50,.85) + blur 10px, borda
inferior #575656 e sombra 0 4px 34px rgba(0,0,0,.95). A página atrás não escurece. */
.mega {
position: absolute; left: 0; right: 0; top: 100%;
overflow: hidden; pointer-events: none; visibility: hidden;
padding-bottom: 40px; /* deixa a sombra do painel aparecer dentro da janela */
transition: visibility 0s linear var(--mega-duration);
}
.mega.is-open { visibility: visible; transition-delay: 0s; }
.mega__panel {
pointer-events: auto;
background: var(--mega-bg); color: var(--ink-text-on-dark);
-webkit-backdrop-filter: blur(var(--mega-blur)); backdrop-filter: blur(var(--mega-blur));
border-bottom: 1px solid var(--mega-line);
box-shadow: var(--mega-shadow);
max-height: var(--megamenu-max-h); overflow-y: auto;
transform: translateY(calc(-100% - 48px));
transition: transform var(--mega-duration) var(--mega-ease);
}
.mega.is-open .mega__panel { transform: none; }
.mega.is-instant, .mega.is-instant .mega__panel { transition: none !important; }
.mega__in { display: grid; grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 1fr)) 240px; gap: var(--space-8); padding-block: var(--space-6); }
.mega__in--tiles { grid-template-columns: minmax(0, 1fr) 248px; gap: var(--space-10); padding-block: var(--space-8) var(--space-6); max-width: 1120px; margin-inline: auto; }
.mega__in--tiles:not(:has(.mega__feat)) { grid-template-columns: minmax(0, 1fr); }
.mega__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.mtile {
display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-3);
min-height: 116px; padding: var(--space-4) var(--space-2) var(--space-3);
border-radius: var(--radius-md); color: var(--ink-text-on-dark); text-decoration: none; text-align: center;
transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast);
}
.mtile__ic { display: grid; place-items: center; width: 52px; height: 52px; color: var(--ink-200); transition: color var(--duration-fast), transform var(--duration-base) var(--ease-standard); }
.mtile__ic svg { width: 46px; height: 46px; }
.mtile__label { font-family: var(--font-display); font-stretch: var(--font-stretch-display); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; line-height: var(--leading-tight); }
.mtile:hover { background: rgb(255 255 255 / 0.06); color: #fff; }
.mtile:hover .mtile__ic { color: var(--blue-300); transform: translateY(-2px); }
.mtile:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.mega__brands { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--ink-700); }
.mega__label, .mega__col h3, .mega__title { font-family: var(--font-text); font-stretch: normal; font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-400); margin: 0; }
.mega__brands ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); list-style: none; margin: 0; padding: 0; }
.mega__brands a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-300); text-decoration: none; font-size: var(--text-sm); }
.mega__brands a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mega__col ul { list-style: none; margin: 0; padding: 0; }
.mega__col h3 { margin-bottom: var(--space-2); }
.mega__col a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 32px; color: var(--color-text); text-decoration: none; font-size: var(--text-sm); }
.mega__col a:hover { color: var(--color-link); }
.mega__col a span { color: var(--color-text-3); font-size: var(--text-xs); font-variant-numeric: var(--numeric-price); }
.mega__all { margin-top: var(--space-2); font-weight: var(--weight-semibold); color: var(--color-link) !important; }
.mega__feat { position: relative; display: flex; flex-direction: column; gap: var(--space-3); align-self: start; padding: var(--space-3); border-radius: var(--radius-lg); background: rgb(255 255 255 / 0.04); border: 1px solid var(--ink-700); color: var(--ink-text-on-dark); text-decoration: none; transition: border-color var(--duration-fast), background-color var(--duration-fast); }
.mega__feat:hover { color: #fff; border-color: var(--ink-500); background: rgb(255 255 255 / 0.07); }
.mega__feat .stage { border-radius: var(--radius-md); }
.mega__feat-body { display: grid; gap: 2px; padding-inline: var(--space-1); }
.mega__feat-eyebrow { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--blue-300); }
.mega__feat-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); line-height: var(--leading-snug); }
.mega__foot { display: flex; justify-content: space-between; gap: var(--space-4); max-width: 1120px; margin-inline: auto; padding: var(--space-2) 0; border-top: 1px solid var(--ink-700); font-size: var(--text-sm); }
.mega__foot a { color: var(--ink-300); text-decoration: none; display: inline-flex; gap: var(--space-2); align-items: center; min-height: var(--tap-min); }
.mega__foot a:hover { color: #fff; }
.mega__foot svg { width: 16px; height: 16px; }
.brand-filter { max-width: 280px; margin-bottom: var(--space-3); }
.brand-filter .field__input { background: rgb(255 255 255 / 0.05); border-color: var(--ink-600); color: var(--color-text); min-height: 40px; }
.brand-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.brand-tile {
display: grid; place-items: center; height: 52px; padding: 0 var(--space-2);
background: rgb(255 255 255 / 0.04); color: var(--ink-text-on-dark); text-decoration: none; text-align: center;
border: 1px solid var(--ink-700); border-radius: var(--radius-md);
font-family: var(--font-display); font-stretch: var(--font-stretch-display); font-weight: var(--weight-semibold); font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase;
transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.brand-tile:hover { background: rgb(255 255 255 / 0.08); border-color: var(--ink-500); color: #fff; }
#mega-brands .mega__in { max-width: 1120px; margin-inline: auto; padding-block: var(--space-8) var(--space-6); }
/* =========================================================================
9. MENU MOBILE, DRAWERS E DIÁLOGOS (CP-06, CP-48)
========================================================================= */
.scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--color-overlay); opacity: 0; transition: opacity var(--duration-slow) var(--ease-standard); }
.scrim.is-on { opacity: 1; }
.drawer {
position: fixed; top: 0; bottom: 0; right: 0; z-index: var(--z-drawer);
width: 100%; max-width: 100%;
display: flex; flex-direction: column;
background: var(--color-surface); color: var(--color-text);
box-shadow: var(--shadow-xl);
transform: translateX(100%);
transition: transform var(--duration-slow) var(--ease-enter);
}
.drawer--left { right: auto; left: 0; transform: translateX(-100%); }
.drawer.is-open { transform: none; }
@media (min-width: 768px) { .drawer { width: var(--drawer-w); } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 60px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5); border-bottom: 1px solid var(--color-border); }
.drawer__title { font-size: var(--text-xl); }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-5); }
.drawer__foot { border-top: 1px solid var(--color-border); padding: var(--space-4) var(--space-5) calc(var(--space-4) + var(--safe-bottom)); background: var(--color-surface); box-shadow: var(--shadow-sticky-bottom); }
.mnav { background: var(--ink-900); --color-surface: var(--ink-900); }
.mnav .drawer__body { padding: 0; }
.mnav__search { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.mnav__list { list-style: none; margin: 0; padding: var(--space-2) 0; }
.mnav__item {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%;
min-height: 52px; padding: 0 var(--space-5); color: var(--color-text); text-decoration: none; text-align: left; font-size: var(--text-md); font-weight: var(--weight-medium);
}
.mnav__item:hover { background: var(--ink-800); color: var(--color-text); }
.mnav__item svg { width: 18px; height: 18px; color: var(--color-text-3); }
.mnav__item span.count { color: var(--color-text-3); font-size: var(--text-sm); margin-left: auto; margin-right: var(--space-2); }
.mnav__sep { height: 1px; background: var(--color-border); margin: var(--space-2) var(--space-5); }
.mnav__label { padding: var(--space-3) var(--space-5) var(--space-1); }
.mnav__chips { padding: 0 var(--space-5) var(--space-3); }
.mnav__panel { padding-bottom: var(--space-6); }
/* =========================================================================
10. TOASTS (CP-12), COOKIES (CP-10), WHATSAPP (CP-11)
========================================================================= */
.toasts { position: fixed; left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-4) + var(--safe-bottom) + var(--toast-lift, 0px)); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; }
html.has-buybar .toasts { --toast-lift: var(--buybar-h); }
@media (min-width: 768px) { .toasts { right: auto; width: 400px; } }
.toast {
pointer-events: auto; display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
background: var(--ink-900); color: var(--ink-text-on-dark);
border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: var(--text-sm);
animation: dm-toast-in var(--duration-base) var(--ease-enter);
}
.toast svg { width: 18px; height: 18px; flex: none; }
.toast--success svg { color: var(--green-400); }
.toast--error { background: var(--red-600); }
.toast__text { flex: 1; }
.toast__action { color: var(--blue-300); font-weight: var(--weight-semibold); min-height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-sm); }
.toast--error .toast__action { color: #fff; text-decoration: underline; }
.toast__close { width: 36px; height: 36px; display: grid; place-items: center; color: inherit; border-radius: var(--radius-sm); }
.toast__close svg { width: 16px; height: 16px; }
@keyframes dm-toast-in { from { opacity: 0; transform: translateY(8px); } }
.cookie-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-consent);
max-height: var(--consent-max-h); overflow-y: auto;
background: var(--ink-850); color: var(--ink-text-on-dark);
border-top: 1px solid var(--ink-700);
box-shadow: var(--shadow-sticky-bottom);
padding: var(--space-3) 0 calc(var(--space-3) + var(--safe-bottom));
font-size: var(--text-xs);
}
.cookie-bar__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.cookie-bar__text { flex: 1 1 320px; margin: 0; color: var(--ink-300); }
.cookie-bar__text a { color: var(--blue-300); }
.cookie-bar__btns { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cookie-bar__btns .btn { --btn-h: 36px; min-width: 96px; font-size: var(--text-sm); }
@media (max-width: 479.98px) { .cookie-bar__btns { width: 100%; } .cookie-bar__btns .btn { flex: 1; min-width: 0; padding: 0 var(--space-2); } }
.cookie-prefs { flex-basis: 100%; display: grid; gap: var(--space-1); }
.cookie-prefs .check { min-height: 36px; padding: 0; color: var(--ink-300); }
.wa-float {
position: fixed; right: var(--float-offset); bottom: calc(var(--float-offset) + var(--safe-bottom) + var(--cookie-h, 0px)); z-index: var(--z-float);
width: var(--float-size); height: var(--float-size); border-radius: 50%;
display: grid; place-items: center;
background: var(--whatsapp-green); color: #fff; box-shadow: var(--shadow-lg);
transition: transform var(--duration-fast) var(--ease-standard), bottom var(--duration-base) var(--ease-standard);
}
.wa-float:hover { transform: scale(1.05); color: #fff; }
.wa-float svg { width: 28px; height: 28px; }
.wa-float:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; }
@media (max-width: 1023.98px) { html.wa-mobile-off .wa-float { display: none; } }
/* ★13 (A-03/M-04): o flutuante nunca cobre CTA, resumo ou preço.
- html.wa-avoid: algum [data-wa-avoid] (caixa de compra, resumo do carrinho) está na tela (layout.js)
- html.wa-wait: home/categoria no mobile antes de 1 tela de rolagem
- banner de cookies aberto no mobile: o flutuante espera a escolha */
.wa-float { transition: opacity var(--duration-fast) var(--ease-standard), visibility var(--duration-fast), transform var(--duration-fast) var(--ease-standard), bottom var(--duration-base) var(--ease-standard); }
html.wa-avoid .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 1023.98px) {
.wa-float { width: 48px; height: 48px; right: 12px; bottom: calc(12px + var(--safe-bottom) + var(--cookie-h, 0px)); }
.wa-float svg { width: 24px; height: 24px; }
html.wa-wait .wa-float, html.has-cookie .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* =========================================================================
11. RODAPÉ (CP-09) + CAPTURA (CP-66)
========================================================================= */
.site-footer { background: var(--ink-950); color: var(--color-text-2); font-size: var(--text-sm); }
.site-footer a { color: var(--color-text-2); text-decoration: none; }
.site-footer a:hover { color: var(--color-text); text-decoration: underline; }
.footer-main { display: grid; gap: var(--space-6); padding-block: var(--space-10) var(--space-6); }
@media (min-width: 1024px) { .footer-main { grid-template-columns: 1.3fr repeat(4, 1fr); gap: var(--space-8); } }
.footer-logo { display: inline-flex; color: var(--ink-0); border-radius: var(--radius-sm); }
.footer-logo:hover { color: var(--ink-0); }
.footer-logo .logo-mono { height: 28px; }
.footer-store { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-3); }
.footer-brand p { margin-top: var(--space-3); max-width: 28ch; color: var(--color-text-2); }
.social { display: flex; gap: var(--space-1); margin-top: var(--space-3); }
.social a { width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--color-text-2); }
.social a:hover { background: var(--ink-800); color: var(--color-text); }
.social svg { width: 20px; height: 20px; }
.fcol h2 { font-family: var(--font-text); font-stretch: normal; font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--color-text); }
.fcol__btn { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 52px; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.fcol__btn svg { width: 16px; height: 16px; transition: transform var(--duration-fast); }
.fcol__btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.fcol__list { list-style: none; margin: 0; padding: 0 0 var(--space-3); display: grid; gap: var(--space-1); }
.fcol__list a, .fcol__list button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; color: var(--color-text-2); text-align: left; }
.fcol__list button:hover { color: var(--color-text); text-decoration: underline; }
.fcol__list svg { width: 16px; height: 16px; }
@media (max-width: 1023.98px) {
.fcol { border-bottom: 1px solid var(--color-border); }
.fcol__btn[aria-expanded="false"] + .fcol__list { display: none; }
}
@media (min-width: 1024px) {
.fcol__btn { min-height: 0; margin-bottom: var(--space-3); pointer-events: none; }
.fcol__btn svg { display: none; }
.fcol__list { display: grid !important; }
}
.footer-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); border-top: 1px solid var(--color-border); }
.pay-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.pay {
display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; min-width: 44px; padding: 0 var(--space-2);
border-radius: var(--radius-xs); background: var(--ink-0); color: var(--ink-900);
font-size: 11px; font-weight: var(--weight-black); letter-spacing: 0.02em;
}
.pay svg { width: 14px; height: 14px; }
.pay--pix svg { color: var(--pix-teal); }
.pay--mp { background: #00B1EA; color: #fff; }
.secure-badge { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-weight: var(--weight-semibold); font-size: var(--text-xs); }
.secure-badge svg { width: 18px; height: 18px; color: var(--green-400); }
.arrep-btn { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-4); border: 1.5px solid var(--ink-text-on-dark); border-radius: var(--radius-sm); color: var(--ink-text-on-dark) !important; font-weight: var(--weight-semibold); }
.footer-legal { padding-block: var(--space-5) calc(var(--space-6) + var(--safe-bottom)); border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-3); display: grid; gap: var(--space-2); }
.footer-legal__row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; }
.footer-legal button { color: var(--color-text-2); text-decoration: underline; min-height: 32px; }
.footer-min { padding-block: var(--space-6); }
/* =========================================================================
12. TRILHO (CP-60), ABAS, ACORDEÃO (CP-59), BREADCRUMB (CP-14), STEPPER (CP-52)
========================================================================= */
.rail { position: relative; }
.rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1.2 * var(--grid-gap)) / 2.2); gap: var(--grid-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: var(--space-2); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); list-style: none; margin-block: 0; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; display: flex; }
.rail__track > * > .pcard { width: 100%; }
@media (min-width: 768px) { .rail__track { grid-auto-columns: calc((100% - 2 * var(--grid-gap)) / 3.2); } }
@media (min-width: 1024px) { .rail__track { grid-auto-columns: calc((100% - 4 * var(--grid-gap)) / 5); margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }
.rail__nav { display: none; gap: var(--space-2); }
@media (min-width: 1024px) { .rail__nav { display: flex; } }
.rail__nav .btn--icon { border: 1px solid var(--color-border-strong); border-radius: 50%; }
.rail__nav .btn--icon:disabled { opacity: 0.3; }
.section-head__right { display: flex; align-items: center; gap: var(--space-4); }
.tabs { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--color-border); margin-bottom: var(--stack-gap); }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: none; min-height: var(--tap-min); padding: 0 var(--space-4); color: var(--color-text-2); font-weight: var(--weight-semibold); font-size: var(--text-sm); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tab:hover { color: var(--color-text); background: var(--color-surface-2); }
.tab[aria-selected="true"] { color: var(--color-text); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: -1px; height: 2px; background: var(--color-primary); }
.acc { border-bottom: 1px solid var(--color-border); }
.acc__btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 52px; text-align: left; font-weight: var(--weight-semibold); color: var(--color-text); }
.acc__btn svg { width: 18px; height: 18px; transition: transform var(--duration-fast) var(--ease-standard); flex: none; }
.acc__btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.acc__panel { padding-bottom: var(--space-4); }
.breadcrumb { font-size: var(--text-xs); color: var(--color-text-3); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-1); color: var(--color-text-3); }
.breadcrumb a { color: var(--color-text-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.breadcrumb a:hover { color: var(--color-link); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-text); }
.breadcrumb__back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); font-size: var(--text-sm); color: var(--color-text-2); text-decoration: none; }
.breadcrumb__back svg { width: 16px; height: 16px; }
@media (max-width: 1023.98px) { .breadcrumb--full { display: none; } }
@media (min-width: 1024px) { .breadcrumb__back { display: none; } }
/* =========================================================================
13. ESTADOS (CP-67, CP-68), BANNER DEMO
========================================================================= */
.empty { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-8) 0; }
.empty h2, .empty h1 { font-size: var(--text-display-md); }
.empty p { color: var(--color-text-2); max-width: 60ch; }
.alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); background: var(--color-warning-bg); color: var(--color-warning); }
.alert--error { background: var(--color-danger-bg); color: var(--color-danger); }
.alert--info { background: var(--color-primary-soft); color: var(--color-text); }
.alert--success { background: var(--color-success-bg); color: var(--color-success); }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
/* =========================================================================
14. AJUSTES DE LARGURA INTERMEDIÁRIA (1024–1279 px)
========================================================================= */
.store-switch__btn, .hdr-icon { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279.98px) {
.hdr-row { column-gap: var(--space-5); }
.catnav__btn { padding: 0 var(--space-2); }
}
/* Com o banner de cookies visível, o fim da página continua alcançável e o foco/âncora
nunca para embaixo dele (B-15, WCAG 2.4.11) */
html.has-cookie body { padding-bottom: var(--cookie-h, 0px); }
html.has-cookie { scroll-padding-bottom: calc(var(--buybar-h) + var(--cookie-h, 0px) + 16px); }
/* Dados da empresa (institucional.html?p=sobre) */
.legal-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; }
.legal-dl dt { font-weight: var(--weight-semibold); color: var(--color-text); }
.legal-dl dd { margin: 0; color: var(--color-text-2); }
@media (max-width: 479.98px) { .legal-dl { grid-template-columns: 1fr; gap: 0; } .legal-dl dd + dt { margin-top: var(--space-3); } }
.mnav [data-mnav-back] { justify-content: flex-start; gap: var(--space-2); font-weight: var(--weight-semibold); border-bottom: 1px solid var(--color-border); }
.drawer__head .store-switch { margin-left: auto; }
/* =========================================================================
15. ITERAÇÃO 08 · menu mobile com ícones, tag e incentivo de frete grátis
========================================================================= */
/* Menu mobile: mesmo padrão de ícones do mega-menu, títulos em caixa-alta (SCUF) */
.mnav .drawer__head { min-height: 56px; }
.mnav__item { font-size: var(--text-md); }
.mnav__item--ic { justify-content: flex-start; gap: var(--space-3); }
.mnav__item--ic > svg:last-child { margin-left: auto; }
.mnav__item--ic .count + svg { margin-left: 0; }
.mnav__item--ic .count { margin-left: auto; }
.mnav__txt { min-width: 0; }
.mnav__list:not(.mnav__list--sm) > li > .mnav__item--ic .mnav__txt { font-family: var(--font-display); font-stretch: var(--font-stretch-display); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.mnav__ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; color: var(--ink-300); }
.mnav__item .mnav__ic svg { width: 28px; height: 28px; color: inherit; }
.mnav__item:hover .mnav__ic { color: var(--blue-300); }
.mnav__list > li + li > .mnav__item--ic { border-top: 1px solid rgb(255 255 255 / 0.05); }
.mnav__list--sm .mnav__item { min-height: 48px; font-size: var(--text-sm); color: var(--color-text-2); }
.mnav__back { justify-content: flex-start; gap: var(--space-2); font-family: var(--font-display); font-stretch: var(--font-stretch-display); text-transform: uppercase; letter-spacing: 0.04em; }
.mnav__store { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) var(--space-5) 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-3); }
/* Tag "Frete grátis" (cards, PDP, autocomplete): mesma regra do carrinho */
.ftag {
display: inline-flex; align-items: center; gap: var(--space-1); width: max-content;
height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-xs);
background: var(--blue-50); color: var(--blue-700); /* 7,9:1 */
font-size: var(--text-2xs); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap;
}
.ftag svg { width: 14px; height: 14px; flex: none; }
.theme-dark .ftag { background: rgb(143 168 255 / 0.14); color: var(--blue-200); }
.ftag--sm { height: 18px; padding: 0 6px; margin-top: 2px; }
.ftag--sm svg { width: 12px; height: 12px; }
.ftag--lg { height: 26px; padding: 0 var(--space-2-5, 10px); font-size: var(--text-xs); }
.ftag--lg svg { width: 16px; height: 16px; }
.pcard__ftag { margin-top: var(--space-2); }
/* Card de produto mais limpo (iteração 08): sem contorno no claro, cantos 12 px, mais respiro,
1 selo só, specs em tom terciário. Comparar/Adicionar continuam (decisão do dono, M-09). */
.pcard { border-color: transparent; border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgb(11 12 16 / 0.05), 0 0 0 1px rgb(11 12 16 / 0.04); }
.theme-dark .pcard { border-color: var(--color-border); box-shadow: none; }
.pcard__media { border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.pcard__link::after { border-radius: var(--radius-lg); }
.pcard__body { gap: 2px; }
@media (min-width: 768px) { .pcard__body { padding: var(--space-4) var(--space-4) var(--space-5); } }
.pcard__name { margin-top: 2px; }
.pcard__specs { color: var(--color-text-3); margin-top: 2px; }
.pcard__price { padding-top: var(--space-3); }
.pcard__badges .badge { box-shadow: 0 1px 2px rgb(11 12 16 / 0.12); }
/* =========================================================================
16. ITERAÇÃO 09 · fontes da SCUF na navegação, NEW, header transparente,
"Combina muito com" e atendimento flutuante (padrão do .com.ar)
Medidas e motivos em docs/09-iteracao-marcas-whatsapp.md
========================================================================= */
/* ---- Barra de anúncio: Sofia Sans Semi Condensed 400, 14 px (mobile) / 16 px, +0,72 px, caixa-alta (SCUF) ---- */
.announce__item { font-family: var(--font-nav-sub); font-stretch: normal; font-size: 14px; font-weight: 400; letter-spacing: 0.72px; text-transform: uppercase; }
.announce__item strong { font-weight: 700; }
@media (min-width: 1024px) { .announce__item { font-size: 16px; } }
/* ---- Navegação principal: Tomorrow 600, 18 px, caixa-alta, sem tracking (SCUF), sem seta.
O indicador listrado da SCUF saiu na iteração 10 (ver "Indicador que desliza" no fim). ---- */
.catnav__list { gap: 0; }
.catnav__btn { font-family: var(--font-nav); font-stretch: normal; font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 24px; padding: 0 14px; }
.catnav__btn svg { display: none; }
@media (min-width: 1024px) and (max-width: 1279.98px) { .catnav__btn { font-size: 15px; padding: 0 10px; } }
/* ---- Mega-menu: títulos Sofia 700 18 px / links Sofia 300 16 px, caixa-alta (SCUF) ---- */
.mtile__label { font-family: var(--font-nav-sub); font-stretch: normal; font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 20px; }
.mega__label, .mega__col h3 { font-family: var(--font-nav-sub); font-stretch: normal; font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--ink-300); }
.mega__brands a, .mega__col a, .mega__foot a {
font-family: var(--font-nav-sub); font-size: 16px; font-weight: 300; line-height: 24px; text-transform: uppercase;
padding-block: 4px; transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mega__brands a:hover, .mega__col a:hover, .mega__foot a:hover { color: #fff; transform: scale(1.05); text-decoration: none; }
.mega__foot a { font-weight: 400; }
.brand-tile { font-family: var(--font-nav-sub); font-stretch: normal; font-size: 16px; font-weight: 700; letter-spacing: 0; }
.mega__feat-new { justify-self: start; align-self: start; margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .mega__brands a:hover, .mega__col a:hover, .mega__foot a:hover { transform: none; } }
/* ---- Menu mobile: Tomorrow 600 18 px (itens principais), Sofia 700 18 px (subitens), Tomorrow 400 14 px (links menores) ---- */
.mnav .drawer__title { font-family: var(--font-nav); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.48px; }
#mn-root .mnav__list:not(.mnav__list--sm) .mnav__txt,
.mnav__back { font-family: var(--font-nav); font-stretch: normal; font-size: 18px; font-weight: 600; letter-spacing: 0.48px; text-transform: uppercase; }
.mnav__panel:not(#mn-root) .mnav__list .mnav__txt,
#mn-brands .mnav__item { font-family: var(--font-nav-sub); font-stretch: normal; font-size: 18px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.mnav__panel:not(#mn-root) .mnav__txt strong { font-weight: 700; }
.mnav__list--sm .mnav__item { font-family: var(--font-nav); font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: 0; }
.mnav__chips .chip { font-family: var(--font-nav-sub); font-size: 15px; font-weight: 400; text-transform: uppercase; }
/* ---- Selo NEW: fita simples e reta (iteração 10: sem o corte em diagonal da SCUF).
Tomorrow 600 12,75 px, caixa-alta, 23 px ---- */
.badge--new {
height: 23px; min-width: 56px; justify-content: center;
padding: 3px 12px; border-radius: 0;
clip-path: none;
font-family: var(--font-nav); font-stretch: normal; font-size: 12.75px; font-weight: 600; letter-spacing: 0.4px; line-height: 16px;
background: var(--blue-500); color: #fff; /* branco sobre o Azul Doctor: 5,18:1 */
}
/* no card, a fita encosta na borda esquerda, 12 px abaixo do topo (como na SCUF) */
.pcard__badges:has(.badge--new) { top: 12px; left: 0; }
.pcard__badges .badge--new { box-shadow: none; }
/* na PDP fica à direita, também reta */
.pdp-badges .badge--new { clip-path: none; padding: 3px 12px; font-size: 12px; font-weight: 500; height: 24px; }
/* ---- Header transparente sobre o hero da home (SCUF): só no topo; ao grudar (hdr-scrolled)
ou ao abrir um mega-menu vira o estado azul. A busca ganha fundo escuro translúcido com
desfoque para continuar legível sobre a foto. ---- */
html.hdr-over .hdr-slot { height: 0; }
html.hdr-over:not(.hdr-scrolled):not(.mega-open) .site-header:not(.site-header--min) {
background: transparent; border-bottom-color: transparent; box-shadow: none;
}
html.hdr-over:not(.hdr-scrolled):not(.mega-open) .site-header:not(.site-header--min) .catnav { border-top-color: rgb(255 255 255 / 0.12); }
html.hdr-over:not(.hdr-scrolled):not(.mega-open) .site-header .search:not(.is-open) .search__form {
background: rgb(11 12 16 / 0.42); border-color: rgb(255 255 255 / 0.16);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html.hdr-over:not(.hdr-scrolled):not(.mega-open) .site-header .search:not(.is-open) .search__form:focus-within { background: var(--ink-0); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.hdr-over:not(.hdr-scrolled):not(.mega-open) .site-header .search:not(.is-open) .search__form:not(:focus-within) .search__input::placeholder { color: rgb(255 255 255 / 0.86); }
html.hdr-over:not(.hdr-scrolled):not(.mega-open) .site-header .search:not(.is-open) .search__form:not(:focus-within) .search__icon { color: rgb(255 255 255 / 0.86); }
html.hdr-over:not(.hdr-scrolled):not(.mega-open) .hdr-count { box-shadow: none; }
html.hdr-over:not(.hdr-scrolled):not(.mega-open) .site-header .hdr-icon,
html.hdr-over:not(.hdr-scrolled):not(.mega-open) .site-header .catnav__btn { text-shadow: 0 1px 2px rgb(0 0 0 / 0.35); }
html.hdr-over:not(.hdr-scrolled):not(.mega-open) .site-header .logo-mono { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35)); }
html.hdr-over:not(.hdr-scrolled):not(.mega-open) .site-header .catnav__btn--accent { color: #fff; }
/* ---- "Combina muito com": par forte e específico (PDP, carrinho, drawer) ---- */
.pair {
position: relative; display: grid; gap: var(--space-3);
padding: var(--space-4); border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--blue-50) 0%, var(--color-surface) 75%);
border: 1.5px solid var(--blue-500); color: var(--color-text);
}
.pair__eyebrow { display: flex; align-items: center; gap: var(--space-1-5); margin: 0; font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--blue-700); }
.pair__eyebrow svg { flex: none; }
.pair__row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.pair__img { border-radius: var(--radius-md); width: 88px; height: 88px; }
.pair__info { display: grid; gap: 2px; min-width: 0; }
.pair__name { font-weight: var(--weight-bold); font-size: var(--text-md); line-height: var(--leading-snug); color: var(--color-text); text-decoration: none; }
.pair__name:hover { color: var(--color-link); }
.pair__why { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-2); line-height: var(--leading-snug); }
.pair__price { margin: var(--space-1) 0 0; font-size: var(--text-sm); font-variant-numeric: var(--numeric-price); color: var(--color-saving); font-weight: var(--weight-semibold); }
.pair__price strong { color: var(--color-text); font-size: var(--text-md); font-weight: var(--weight-black); }
.pair__act { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.pair__sel { flex: 1 1 140px; min-height: 40px; font-size: var(--text-sm); }
.pair__add { flex: 1 1 160px; --btn-h: 40px; }
.pair__in { display: inline-flex; align-items: center; gap: var(--space-1-5); margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-success); }
.drawer .pair { padding: var(--space-3); }
.drawer .pair__row { grid-template-columns: 64px minmax(0, 1fr); }
.drawer .pair__img { width: 64px; height: 64px; }
.drawer .pair__name { font-size: var(--text-sm); }
.drawer .pair__why { font-size: var(--text-xs); }
.drawer-pair { margin-top: var(--space-4); }
.theme-dark .pair { background: linear-gradient(135deg, rgb(46 91 255 / 0.16) 0%, var(--color-surface) 75%); border-color: var(--blue-400); }
.theme-dark .pair__eyebrow { color: var(--blue-300); }
/* ---- Atendimento flutuante ----
Posição e tamanho do botão como no doctormouse.com.ar (58 px; 54 até 900 px; 52 até 520 px; 60 px da borda).
Visual do site: botão azul com o raio dos painéis e pulso de 2 ciclos (WCAG 2.2.2). Aberto, painel escuro igual ao
mega-menu e ao "Adicionado ao carrinho" (ink-850, borda ink-700, raio 12 px, filete azul no topo), acima do botão,
com título em Saira e as 4 opções em linhas; o headset vira "X" enquanto o painel está aberto. */
.wa-float.sup {
--sup-size: 58px; --sup-gap: 12px; --sup-accent: var(--blue-500);
position: fixed; z-index: var(--z-float);
right: 48px; bottom: calc(20px + var(--safe-bottom) + var(--cookie-h, 0px));
width: calc(var(--sup-size) + 2 * var(--sup-gap)); height: calc(var(--sup-size) + 2 * var(--sup-gap));
display: block; border-radius: 0; background: none; box-shadow: none; color: inherit;
}
.wa-float.sup:hover { transform: none; }
.sup__btn {
position: absolute; right: var(--sup-gap); bottom: var(--sup-gap); z-index: 2;
width: var(--sup-size); height: var(--sup-size); display: inline-flex; align-items: center; justify-content: center;
border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--sup-accent); color: #fff;
box-shadow: 0 10px 28px -6px rgb(46 91 255 / 0.55); cursor: pointer;
transition: background-color 180ms, border-color 180ms, box-shadow 180ms, color 180ms, transform 180ms;
}
.sup__btn svg { width: 28px; height: 28px; stroke-width: 1.8; transition: transform 220ms, opacity 180ms; }
.sup__btn .sup__x { position: absolute; width: 24px; height: 24px; opacity: 0; transform: rotate(-90deg); }
.sup__btn::before, .sup__btn::after {
content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
border: 2px solid rgb(46 91 255 / 0.62); opacity: 0;
animation: dm-sup-pulse 2s ease-out 0s 2 both;
}
.sup__btn::after { animation-delay: 1s; }
@keyframes dm-sup-pulse { 0% { opacity: 0.72; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1.5); } }
.sup__btn:hover { background: var(--blue-600); transform: translateY(-2px); box-shadow: 0 14px 32px -6px rgb(46 91 255 / 0.65); }
.sup__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ink-900), 0 0 0 5px var(--blue-400); }
.sup__btn:active { transform: scale(0.95); }
.sup.is-open .sup__btn { background: var(--ink-800); border-color: var(--ink-600); color: #fff; box-shadow: var(--shadow-lg); }
.sup.is-open .sup__btn:hover { background: var(--ink-750); transform: none; }
.sup.is-open .sup__btn svg:not(.sup__x) { opacity: 0; transform: rotate(90deg); }
.sup.is-open .sup__btn .sup__x { opacity: 1; transform: none; }
.sup.is-open .sup__btn::before, .sup.is-open .sup__btn::after { animation: none; opacity: 0; }
.sup__menu {
position: absolute; right: var(--sup-gap); bottom: calc(var(--sup-size) + 2 * var(--sup-gap)); z-index: 1;
width: min(320px, calc(100vw - 24px));
background: var(--ink-850); color: #fff;
border: 1px solid var(--ink-700); border-top: 2px solid var(--sup-accent); border-radius: var(--radius-lg);
box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(0 0 0 / 0.2);
overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(8px) scale(0.97); transform-origin: right bottom;
transition: opacity 180ms, transform 180ms ease-out, visibility 0s linear 180ms;
}
.sup.is-open .sup__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 180ms, transform 180ms ease-out, visibility 0s; }
.sup__head {
width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3);
padding: var(--space-4) var(--space-4) var(--space-3);
background: transparent; border: 0; border-bottom: 1px solid var(--ink-700);
color: #fff; text-align: left; font: inherit; cursor: pointer;
}
.sup__head strong {
display: block; font-family: var(--font-display); font-stretch: var(--font-stretch-display);
font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.15;
}
.sup__head small { grid-column: 1; display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--ink-300); }
.sup__head > svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--ink-300); transition: color 180ms; }
.sup__head:hover > svg, .sup__head:focus-visible > svg { color: #fff; }
.sup__head:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue-400); }
.sup__opts { display: grid; gap: 2px; padding: 6px; }
.sup__opt {
position: relative; width: 100%; display: flex; align-items: center; gap: var(--space-3);
padding: 10px; border: 0; border-radius: var(--radius-md);
background: transparent; color: #fff; text-align: left; text-decoration: none; font: inherit; cursor: pointer;
transition: background-color 160ms;
}
.sup__opt:hover, .sup__opt:focus-visible, .sup__opt.is-copied { background: var(--ink-800); color: #fff; outline: none; }
.sup__opt:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-400); }
.sup__ic {
width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md); background: rgb(46 91 255 / 0.14); color: var(--blue-300);
transition: background-color 160ms, color 160ms;
}
.sup__ic svg { width: 20px; height: 20px; stroke-width: 1.8; }
.sup__opt:hover .sup__ic, .sup__opt:focus-visible .sup__ic, .sup__opt.is-copied .sup__ic { background: var(--sup-accent); color: #fff; }
.sup__txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.sup__opt strong { display: block; font-size: var(--text-sm); font-weight: 600; line-height: 1.2; }
.sup__opt small { display: block; font-size: var(--text-xs); line-height: 1.25; color: var(--ink-300); overflow-wrap: anywhere; }
.sup__opt.is-copied small { color: var(--green-400); }
.sup__go { flex: none; width: 16px; height: 16px; color: var(--ink-400); opacity: 0; transform: translateX(-4px); transition: opacity 160ms, transform 160ms, color 160ms; }
.sup__opt:hover .sup__go, .sup__opt:focus-visible .sup__go { opacity: 1; transform: none; color: #fff; }
@media (hover: none) { .sup__go { opacity: 1; transform: none; } }
@media (max-width: 900px) { .wa-float.sup { --sup-size: 54px; right: 12px; bottom: calc(16px + var(--safe-bottom) + var(--cookie-h, 0px)); } }
@media (max-width: 520px) {
.wa-float.sup { --sup-size: 52px; right: 12px; bottom: calc(14px + var(--safe-bottom) + var(--cookie-h, 0px)); }
.sup__btn svg { width: 25px; height: 25px; }
.sup__btn:hover { transform: none; }
}
@media (max-width: 1023.98px) { .wa-float.sup { width: calc(var(--sup-size) + 2 * var(--sup-gap)); height: calc(var(--sup-size) + 2 * var(--sup-gap)); } }
@media (prefers-reduced-motion: reduce) { .sup__btn::before, .sup__btn::after { animation: none; } .sup__menu, .sup__btn svg { transition: none; } }
/* =========================================================================
17. Iteração 10 · menu de categorias (link + chevron + indicador que desliza) e logo maior
========================================================================= */
/* Categoria = link para a página inteira + botão de chevron separado (abre o painel sem navegar;
para teclado e telas de toque). O hover no item inteiro continua abrindo o mega-menu. */
.catnav__item--cat { display: flex; align-items: center; }
.catnav__item--cat .catnav__link { padding-right: 2px; }
.catnav__exp {
display: inline-grid; place-items: center; flex: none;
width: 18px; height: 32px; margin-right: 8px; padding: 0;
color: inherit; background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
opacity: 0.5; transition: opacity var(--duration-fast) var(--ease-standard);
}
.catnav__exp svg { width: 12px; height: 12px; transition: transform var(--duration-fast) var(--ease-standard); }
.catnav__item:hover .catnav__exp, .catnav__item.is-open .catnav__exp, .catnav__exp:focus-visible { opacity: 1; }
.catnav__item.is-open .catnav__exp svg { transform: rotate(180deg); }
.catnav__exp:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@media (min-width: 1024px) and (max-width: 1279.98px) {
.catnav__item--cat .catnav__link { padding-right: 0; }
.catnav__exp { width: 14px; margin-right: 4px; }
.catnav__exp svg { width: 10px; height: 10px; }
}
/* Indicador que desliza (identidade Doctor Mouse, no lugar do traço listrado igual ao da SCUF):
barra fina de 2 px em Azul Doctor terminando num "bloco" quadrado de 6 px (o quadrado do
símbolo do logo), com brilho leve. Corre de um item ao outro acompanhando o mouse/foco e
descansa no item aberto ou na categoria da página. No header azul (rolado ou com o mega
aberto) fica branco. Posição e largura vêm do JS (--x, --w; bloco de referência = .catnav). */
.catnav__ink {
--ink-c: var(--blue-500);
--ink-glow: rgb(46 91 255 / 0.65);
position: absolute; left: 0; bottom: 6px; z-index: 1;
width: var(--w, 0px); height: 6px; list-style: none; pointer-events: none;
transform: translateX(var(--x, 0px)); opacity: 0;
transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms var(--ease-standard);
}
.catnav__ink.is-on { opacity: 1; }
.catnav__ink.is-instant { transition: none; }
.catnav__ink-bar, .catnav__ink-dot { position: absolute; bottom: 0; background: var(--ink-c); box-shadow: 0 0 10px var(--ink-glow); }
.catnav__ink-bar { left: 0; right: 9px; height: 2px; border-radius: 2px; }
.catnav__ink-dot { right: 0; width: 6px; height: 6px; border-radius: 1px; }
html.hdr-scrolled .site-header:not(.site-header--min) .catnav__ink,
html.mega-open .site-header:not(.site-header--min) .catnav__ink { --ink-c: #fff; --ink-glow: rgb(255 255 255 / 0.4); }
@media (prefers-reduced-motion: reduce) {
/* deslize mais curto, mas visível (é um realce de interface, não animação contínua; o dono quer ver o efeito) */
.catnav__ink { transition-duration: 260ms, 260ms, 160ms; }
}
/* Logo um pouco maior (iteração 10): 24 → 28 px no mobile, 28 → 34 px no desktop; rodapé acompanha */
.logo-mono { height: 28px; }
@media (min-width: 1024px) { .logo-mono { height: 34px; } }
.footer-logo .logo-mono { height: 34px; }
/* Logo cadastrada no painel (theme.store.logo_url / logo_footer_url): mesma altura do SVG embutido.
O header é escuro (azul ao rolar): use uma versão monocromática clara da logo. */
img.logo-img { width: auto; max-width: min(220px, 48vw); object-fit: contain; object-position: left center; }
/* ==========================================================================
TEMA ADMINO · ajustes da base (port do demo para a plataforma)
Contrato para as páginas: docs/11-port-tema-admino.md (repositório site-doctor)
========================================================================== */
/* ---------- Casca da página: rodapé sempre no fim ---------- */
body.dm-body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.dm-main { flex: 1 0 auto; outline: none; }
.site-footer { flex-shrink: 0; }
/* Altura do topo fixo, para quem precisa compensar o header transparente (hero da home)
ou posicionar barras sticky abaixo dele. --hdr-top já existe (altura visível do header). */
:root { --dm-hdr-h: calc(var(--header-h-mobile) + var(--search-row-h-mobile)); }
@media (min-width: 1024px) { :root { --dm-hdr-h: calc(var(--header-h) + var(--category-nav-h)); } }
/* ---------- Header: contador neutro até a hidratação, logo como link ---------- */
.hdr-logo svg, .hdr-logo img { pointer-events: none; }
.hdr-cart.is-bump .hdr-count { animation: dm-pop var(--duration-slow) var(--ease-enter); }
.search__form { margin: 0; }
.search__clear { cursor: pointer; }
/* sem painel de sugestões na plataforma: o campo nunca abre em tela cheia */
.search__back, .search__panel { display: none !important; }
@media (max-width: 1023.98px) {
.hdr-row { padding-inline: var(--gutter); }
}
/* Item do menu sem filhos (link simples) e ladrilho "Ver tudo" */
.catnav__item { display: flex; align-items: center; }
.mtile--all .mtile__ic { color: var(--blue-300); }
.mega__in--brands { max-width: 1120px; margin-inline: auto; padding-block: var(--space-8) var(--space-6); display: block; }
.brand-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.brand-tile { height: 64px; }
.brand-tile--logo { padding: var(--space-2) var(--space-4); }
/* Mesmo filtro branco e mesma área visual da faixa "Marcas oficiais" (--lh = altura na caixa de 78 px; aqui, metade):
logos escuros (Artisan, Razer, Zowie) ou com muito respiro ficam legíveis como os outros */
.brand-tile__logo { max-width: 100%; height: calc(var(--lh, 56) * 0.5px); max-height: 40px; width: auto; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 0 0.6px rgb(255 255 255 / 0.9)); opacity: 1; }
.brand-tile--logo { padding-inline: var(--space-2); }
@media (min-width: 1024px) and (max-width: 1279.98px) { .brand-tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
/* ---------- Menu mobile: drawer com scrim ---------- */
.scrim[hidden] { display: none !important; }
.drawer[hidden] { display: none !important; }
.mnav { width: min(400px, 92vw); }
.mnav__item svg:not(.nav-ic) { flex: none; }
.mnav__list--sm .mnav__item svg { width: 18px; height: 18px; color: var(--color-text-3); }
.mnav__store .store-links { flex-wrap: wrap; }
/* ---------- Card de produto: complementos da plataforma ---------- */
.pcard__media { aspect-ratio: 1; }
.pcard__noimg { color: var(--ink-350); }
.pcard__cta { position: relative; z-index: 2; margin-top: var(--space-3); }
.pcard__cta svg { width: 16px; height: 16px; }
.pcard .stock { margin-top: 2px; }
.price--consult { margin: 0; }
.price__consult { font-weight: var(--weight-bold); color: var(--color-text-2); font-size: var(--text-sm); }
.badge--soon { background: var(--ink-900); color: #fff; }
.theme-dark .badge--soon { background: var(--ink-0); color: var(--ink-900); }
.pcard.is-out .price__value { color: var(--color-text-3); }
/* grade e trilho usam /- */
.products-grid > li, .rail__track > li { min-width: 0; list-style: none; }
.products-grid > li > .pcard { height: 100%; }
.products-grid.list-reset { margin: 0; padding: 0; }
/* Grade de 5 (vitrine "Mais vendidos" da home, como o .best-grid do demo): 2 x 2 no mobile, 3 no tablet, 5 no desktop */
.products-grid--5 { --plp-columns: 2; }
.products-grid--5 > li:nth-child(n+5) { display: none; }
@media (min-width: 768px) { .products-grid--5 { --plp-columns: 3; } .products-grid--5 > li:nth-child(n+4) { display: none; } }
@media (min-width: 1024px) { .products-grid--5 { --plp-columns: 5; } .products-grid--5 > li:nth-child(n+4) { display: block; } .products-grid--5 > li:nth-child(n+6) { display: none; } }
/* ---------- Vitrine (elements/products_grid.twig) ---------- */
.pshelf .section-head { align-items: center; }
.pshelf .section-head h2 { font-size: var(--text-display-md); }
@media (min-width: 1024px) { .pshelf .section-head h2 { font-size: var(--text-display-lg); } }
.pshelf .rail__track { padding-top: 4px; }
/* ---------- Painel "Adicionado ao carrinho" (sem drawer: o carrinho é da plataforma) ---------- */
.cart-added {
position: fixed; z-index: var(--z-toast);
left: var(--space-3); right: var(--space-3); bottom: calc(var(--space-3) + var(--safe-bottom));
display: grid; gap: var(--space-3);
padding: var(--space-4);
background: var(--ink-850); color: var(--color-text);
border: 1px solid var(--ink-700); border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
animation: dm-added-in var(--duration-base) var(--ease-enter);
}
.cart-added[hidden] { display: none !important; }
@media (min-width: 768px) {
.cart-added { left: auto; right: var(--gutter); bottom: auto; top: calc(var(--hdr-top) + 12px); width: 380px; }
}
.cart-added__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0; }
.cart-added__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: var(--weight-semibold); font-size: var(--text-md); }
.cart-added__title svg { width: 20px; height: 20px; color: var(--green-400); flex: none; }
.cart-added__close { color: var(--color-text-2); }
.cart-added__close svg { width: 18px; height: 18px; }
.cart-added__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.cart-added__item[hidden] { display: none; }
.cart-added__img { border-radius: var(--radius-sm); width: 64px; height: 64px; }
.cart-added__info { display: grid; gap: 2px; min-width: 0; }
.cart-added__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-added__price { font-size: var(--text-xs); color: var(--color-text-2); font-variant-numeric: var(--numeric-price); }
.cart-added__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.cart-added__actions .btn { --btn-h: 44px; font-size: var(--text-sm); padding: 0 var(--space-3); }
.cart-added .btn--secondary { border-color: var(--ink-500); }
@keyframes dm-added-in { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .cart-added { animation: none; } }
/* ---------- Toasts (window.DMTheme.toast) ---------- */
.toast--info svg { color: var(--blue-300); }
.toast--error svg { color: #fff; }
.toast__action { text-decoration: none; display: inline-flex; align-items: center; }
.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity var(--duration-fast), transform var(--duration-fast); }
/* ---------- Cookies: só "Aceitar" (a plataforma registra apenas o aceite) ---------- */
.cookie-bar[hidden] { display: none !important; }
.cookie-bar__btns .btn { min-width: 120px; }
.cookie-bar.is-leaving { opacity: 0; transition: opacity var(--duration-base); }
/* ---------- Atendimento flutuante: aparece depois da hidratação dos cookies no mobile ---------- */
.sup__opt .sup__ic svg { stroke-width: 1.8; }
/* ---------- Rodapé ---------- */
.pay-list { flex-wrap: wrap; }
.footer-store { display: inline-flex; align-items: center; gap: var(--space-2); }
.fcol__list a svg { flex: none; }
.footer-legal__row span { max-width: 100%; }
/* ---------- Paginação (componente compartilhado; a listagem decide se usa) ---------- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1); list-style: none; margin: var(--space-8) 0 0; padding: 0; font-variant-numeric: var(--numeric-price); }
.pagination a, .pagination span {
display: inline-grid; place-items: center; min-width: var(--tap-min); height: var(--tap-min); padding: 0 var(--space-3);
border: 1px solid var(--color-border); border-radius: var(--radius-sm);
color: var(--color-text); text-decoration: none; font-weight: var(--weight-semibold); font-size: var(--text-sm);
}
.pagination a:hover { border-color: var(--color-text); color: var(--color-text); }
.pagination [aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.pagination .is-disabled { opacity: 0.4; pointer-events: none; }
/* ---------- Faixa de marcas (logos brancos andando; a home decide se usa) ---------- */
.brand-logo-white { filter: brightness(0) invert(1); }
/* ==========================================================================
Correções (QA): menu "Mais", setas do menu mobile
========================================================================== */
/* Itens que o script.js tira da barra quando não cabem (vão para o painel "Mais") */
.catnav__list > li[hidden], .catnav__list > li.is-overflow, .mega__tiles > li[hidden] { display: none !important; }
/* Menu mobile: link final (sem painel) com seta "→" mais discreta que o chevron dos itens que abrem painel */
.mnav__item--link > svg:last-child { width: 16px; height: 16px; opacity: 0.6; }
/* Barra de categorias antes do script.js medir (fitNav): os itens não encolhem nem quebram o texto em duas linhas;
o que não cabe fica cortado à direita até ir para "Mais". O painel (.mega) é posicionado pelo .catnav, fora do corte. */
.catnav__list { justify-content: center; justify-content: safe center; overflow-x: clip; }
.catnav__list > li { flex-shrink: 0; }
.catnav__btn { white-space: nowrap; }
/* Blocos do submenu: largura fixa (não esticam com poucos itens) e nome que quebra em linhas equilibradas,
para nomes longos ("Switches e acessórios") não invadirem o bloco vizinho */
.mega__tiles { grid-template-columns: repeat(auto-fill, minmax(128px, 152px)); gap: var(--space-2) var(--space-3); }
.mtile { min-width: 0; padding-inline: var(--space-3); }
.mtile__label { max-width: 100%; font-size: 16px; line-height: 19px; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
/* Aviso de cookies no celular: texto e "Aceitar" na mesma linha, para somar menos altura com a barra fixa de compra */
@media (max-width: 479.98px) {
.cookie-bar { padding-block: var(--space-2) calc(var(--space-2) + var(--safe-bottom)); }
.cookie-bar__in { flex-wrap: nowrap; gap: var(--space-3); }
.cookie-bar__text { flex: 1 1 auto; line-height: 1.35; }
.cookie-bar__btns { width: auto; flex: none; }
.cookie-bar__btns .btn { min-width: 0; padding: 0 var(--space-4); }
}