/* ═══════════════════════════════════════════════════════════
   CloudShops — Site Público CSS
   Estilos base do site do cliente.
   ═══════════════════════════════════════════════════════════ */
[x-cloak] { display: none !important; }

/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--cs-font-body); scroll-behavior: smooth; -webkit-font-smoothing: antialiased; min-height: 100%; }
body { color: var(--cs-site-texto); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

/* ── Variáveis (sobrescritas pelo Renderer via <style> inline) ── */
:root {
    /* Configuráveis (10 cores — personalizáveis via Layout) */
    --cs-site-primaria:      #1e3a8a;
    --cs-site-secundaria:    #1e2f6a;
    --cs-site-destaque:      #f97316;
    --cs-site-clara:         #eff6ff;
    --cs-site-texto:         #1e293b;
    --cs-site-texto-suave:   #64748b;
    --cs-site-barra-fundo:   #1e3a8a;
    --cs-site-rodape-fundo:  #0f172a;
    /* Fixas (não configuráveis) */
    --cs-site-fundo:       #ffffff;
    --cs-site-borda:       #e2e8f0;
    --cs-site-max-width:   1280px;

    /* Semânticas — status e feedback (fixas, reutilizáveis) */
    --cs-cor-pendente:     #f59e0b;
    --cs-cor-pago:         #3b82f6;
    --cs-cor-preparando:   #8b5cf6;
    --cs-cor-enviado:      #06b6d4;
    --cs-cor-entregue:     #10b981;
    --cs-cor-cancelado:    #ef4444;
    --cs-cor-erro:         #e74c3c;
    --cs-cor-sucesso:      #00b894;
    --cs-cor-desconto:     #00b894;
    /* Alertas (bg / borda / texto) */
    --cs-alerta-erro-bg:      #fef2f2;
    --cs-alerta-erro-borda:   #fecaca;
    --cs-alerta-erro-texto:   #991b1b;
    --cs-alerta-aviso-bg:     #fffbeb;
    --cs-alerta-aviso-borda:  #fde68a;
    --cs-alerta-aviso-texto:  #92400e;
    --cs-alerta-sucesso-bg:   #f0fdf4;
    --cs-alerta-sucesso-borda:#bbf7d0;
    --cs-alerta-sucesso-texto:#166534;
    --cs-alerta-info-bg:      #eff6ff;
    --cs-alerta-info-borda:   #bfdbfe;
    --cs-alerta-info-texto:   #1e40af;
    /* Neutros fixos */
    --cs-site-neutro:      #f8fafc;

    /* Tipografia — tamanhos centralizados (alterar aqui muda no site todo) */
    --cs-font-banner:   32px;   /* Título do banner (h1 de página interna) */
    --cs-font-hero:     36px;   /* Título do hero (home) */
    --cs-font-h2:       22px;   /* Títulos de destaque (h2) */
    --cs-font-h3:       18px;   /* Títulos de seção (h3) */
    --cs-font-h4:       16px;   /* Sub-títulos menores (h4) */
    --cs-font-titulo-pg:20px;   /* Título de página interna (ex: "Consultar Pedido") */
    --cs-font-body:     16px;   /* Texto base do site */
    --cs-font-body-sm:  14px;   /* Texto secundário / inputs / itens */
    --cs-font-label:    13px;   /* Labels de formulário / captions */
    --cs-font-small:    12px;   /* Texto pequeno (breadcrumb, SKU, datas) */
    --cs-font-tiny:     11px;   /* Texto mínimo (detalhes, badges) */
    --cs-font-badge:    10px;   /* Badges numéricos */
    --cs-font-preco-xl: 28px;   /* Preço grande (PIX na página produto) */
    --cs-font-preco-lg: 22px;   /* Preço médio (total do carrinho) */
    --cs-font-preco-md: 17px;   /* Preço no card de produto */
    --cs-font-btn:      16px;   /* Botão primário */
    --cs-font-btn-sm:   14px;   /* Botão secundário / card */
}

/* ── Container ─────────────────────────────────────────── */
.cs-site-container {
    width: 100%;
    max-width: var(--cs-site-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ══ HEADER ═══════════════════════════════════════════════ */
.cs-site-header {
    position: relative;
    z-index: 100;
    background: var(--cs-site-fundo);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ── Top Bar ──────────────────────────────────────────── */
.cs-site-topbar {
    background: var(--cs-site-barra-fundo);
    color: #ffffff;
    font-size: var(--cs-font-small);
    padding: 20px 0;
}
.cs-site-topbar-cards {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    flex-wrap: wrap;
}
.cs-site-topbar-card {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    padding: 2px 0;
    transition: opacity .15s;
}
a.cs-site-topbar-card:hover { opacity: .8; }
.cs-site-topbar-icone {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .9;
}
.cs-site-topbar-icone svg { width: 26px; height: 26px; }
.cs-site-topbar-texto { opacity: .9; }

/* ── Top Bar — Variante Clara ────────────────────────── */
.cs-site-topbar-claro {
    background: #f8fafc !important;
    color: #334155 !important;
}
.cs-site-topbar-claro .cs-site-topbar-icone svg { stroke: #334155; }

/* ══ TOPO ════════════════════════════════════════════════ */

/* Fundo Escuro (padrão) */
.cs-site-topo {
    background: var(--cs-site-rodape-fundo, #0f172a);
    color: #cbd5e1;
    padding: 0;
    border-bottom: none;
    position: relative;
}
.cs-site-topo a { color: #cbd5e1; }
.cs-site-topo a:hover { color: #fff; }

/* Fundo Claro */
.cs-site-topo-claro {
    background: #fff;
    color: var(--cs-site-texto);
    border-bottom: 1px solid var(--cs-site-borda, #e2e8f0);
}
.cs-site-topo-claro a { color: var(--cs-site-texto); }
.cs-site-topo-claro a:hover { color: var(--cs-site-primaria); }

.cs-site-topo-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 30px 10px;
}

/* ── Logo ────────────────────────────────────────────── */
.cs-site-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.cs-site-logo a { display: flex; align-items: center; text-decoration: none; }
.cs-site-logo-img {
    height: var(--cs-topo-logo-altura, 60px);
    width: auto;
    max-width: 260px;
    object-fit: contain;
}
.cs-site-logo-texto strong {
    font-size: var(--cs-font-h2);
    font-weight: 800;
}

/* ── Menu — base (Modelo 02: links com underline) ────────── */
/* Seletores usam `a.classe` para vencer `.cs-site-topo a` por ordem */
.cs-site-menu-link {
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    transition: border-color .2s, color .2s;
    white-space: nowrap;
}
a.cs-site-menu-link:hover,
a.cs-site-menu-link.cs-site-menu-ativo {
    border-bottom-color: var(--cs-site-primaria);
    color: var(--cs-site-primaria);
}

/* ── Menu containers — flex base unificada ───────────── */
.cs-site-menu-desktop,
.cs-site-menu-loja {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cs-site-menu-desktop { margin-left: auto; }
.cs-site-menu-loja { justify-content: center; padding: 16px 10px; }

/* ── Ícones — containers unificados ──────────────────── */
.cs-site-icone-busca,
.cs-site-busca-loja-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cs-site-destaque);
    color: #fff;
}
.cs-site-icone-busca {
    width: 40px; height: 40px; border-radius: 50%;
}
.cs-site-icone-busca svg { width: 20px; height: 20px; fill: #fff; }
.cs-site-icone-carrinho { display: flex; align-items: center; }
.cs-site-icone-carrinho svg { width: 34px; height: 34px; fill: var(--cs-site-secundaria); }

/* ── Carrinho — link unificado ───────────────────────── */
.cs-site-carrinho-link,
.cs-site-carrinho-loja-icone {
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.cs-site-carrinho-link { transition: color .2s; }
.cs-site-carrinho-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--cs-site-destaque);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Ações (busca + carrinho, tipo institucional) ────── */
.cs-site-acoes {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    margin-left: 16px;
}
.cs-site-busca-icone {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.cs-site-busca-icone:hover {
    background: rgba(255,255,255,.12);
}
.cs-site-topo-claro .cs-site-busca-icone:hover {
    background: var(--cs-site-clara);
    color: var(--cs-site-primaria);
}

/* ── Hambúrguer (mobile only) ────────────────────────── */
.cs-site-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}
.cs-site-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}
.cs-site-topo-claro .cs-site-menu-toggle { color: var(--cs-site-texto); }

/* ═══ TIPO LOJA — topo com busca grande + carrinho detalhado + menu 2ª linha ═══ */

/* Busca grande (tipo loja) — centralizada */
.cs-site-busca-loja {
    flex: 1;
    max-width: 520px;
    margin: 0 auto;
}
.cs-site-busca-loja-inner {
    display: flex;
    align-items: center;
    border: 1px solid var(--cs-site-destaque);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color .2s;
}
.cs-site-busca-loja-inner:hover {
    border-color: var(--cs-site-secundaria, var(--cs-site-primaria));
}
.cs-site-busca-loja-texto {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--cs-site-texto-suave);
    background: #fff;
}
.cs-site-busca-loja-btn {
    width: 46px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 0 8px 8px 0;
}
.cs-site-busca-loja-btn svg { stroke: #fff; }

/* Carrinho detalhado (tipo loja) — alinhado à direita */
.cs-site-carrinho-loja {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity .15s;
}
.cs-site-carrinho-loja:hover { opacity: .8; }
.cs-site-carrinho-loja-icone {
    justify-content: center;
}
.cs-site-carrinho-loja-icone svg { stroke: currentColor; }
.cs-site-carrinho-loja-valor {
    font-size: 14px;
    font-weight: 700;
}

/* Menu segunda linha (tipo loja) — wrapper full-width */
.cs-site-menu-loja-wrap {
    background: var(--cs-site-clara);
    border-top: 1px solid var(--cs-site-secundaria);
}
.cs-site-topo-v2 ~ .cs-site-menu-loja-wrap {
    border-top: none;
}
/* ═══ MODELO 02 — card logo + pills + onda ═══════════ */

/* Logo card branco */
.cs-site-topo-v2 .cs-site-logo-card {
    background: #fff;
    border-radius: 20px;
    padding: 16px 28px;
    margin-top: -60px;
    margin-bottom: -40px;
    align-self: stretch;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* ── Menu Modelo 01 — Botões preenchidos ────────────── */
/* `a.classe` garante especificidade (0,1,1) — vence `.cs-site-topo a` por ordem */
a.cs-site-menu-v1 {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    border-bottom: none;
    transition: background .2s, color .2s;
    background: var(--cs-site-primaria);
    color: #fff;
}
a.cs-site-menu-v1:hover,
a.cs-site-menu-v1.cs-site-menu-ativo {
    background: var(--cs-site-secundaria);
    color: #fff;
}

/* Onda decorativa (absolute dentro do topo) */
.cs-site-topo-v2 { padding-top: 50px; padding-bottom: 50px; border-top: 10px solid var(--cs-site-barra-fundo); }
.cs-site-topo-v2 .cs-site-topo-inner { padding-top: 0; padding-bottom: 0; }
.cs-site-topo-onda {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    line-height: 0;
}
.cs-site-topo-onda svg {
    display: block;
    width: 100%;
    height: 50px;
    transform: scaleX(-1);
}
/* Onda topo (de cima) */
.cs-site-topo-onda-top {
    position: absolute;
    left: 0;
    top: -1px;
    width: 100%;
    line-height: 0;
}
.cs-site-topo-onda-top svg {
    display: block;
    width: 100%;
    height: 30px;
    transform: scaleY(-1);
}

/* ── Menu mobile overlay ─────────────────────────────── */
.cs-site-menu-mobile {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 9999;
}
.cs-site-menu-mobile-inner {
    background: #fff;
    width: 280px;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
    overflow-y: auto;
}
.cs-site-menu-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cs-site-borda, #e2e8f0);
}
.cs-site-menu-mobile-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cs-site-texto-suave);
    padding: 4px;
    display: flex;
}
.cs-site-menu-mobile-item {
    padding: 12px 16px;
    color: var(--cs-site-texto);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.cs-site-menu-mobile-item:hover,
.cs-site-menu-mobile-item.cs-site-menu-ativo {
    background: var(--cs-site-clara);
    color: var(--cs-site-primaria);
}
body.cs-menu-aberto .cs-site-menu-mobile { display: block; }
body.cs-menu-aberto { overflow: hidden; }

/* ══ MAIN ════════════════════════════════════════════════ */
.cs-site-main {
    flex: 1;
    background: var(--cs-site-clara);
}

/* ══ HERO CAROUSEL (Página Inicial) ════════════════════════ */
.cs-hero-carousel {
    position: relative;
    width: 100%;
    height: clamp(300px, 39vw, 500px);
    overflow: hidden;
    background: var(--cs-site-secundaria);
}
.cs-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .8s ease-in-out;
    pointer-events: none;
}
.cs-hero-slide-ativo {
    opacity: 1;
    pointer-events: auto;
}
.cs-hero-conteudo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--cs-site-max-width);
    margin: 0 auto;
    padding: 60px 40px;
    height: 100%;
    gap: 40px;
    box-sizing: border-box;
}
.cs-hero-texto {
    flex: 1;
    max-width: 520px;
    color: #fff;
}
.cs-hero-subtitulo {
    display: block;
    font-size: var(--cs-font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: .7;
    margin-bottom: 12px;
}
.cs-hero-titulo {
    font-size: clamp(28px, 4vw, var(--cs-font-hero));
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
    color: #fff;
}
.cs-hero-descricao {
    font-size: var(--cs-font-body);
    line-height: 1.7;
    opacity: .85;
    margin-bottom: 28px;
    max-width: 460px;
}
.cs-hero-cta {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    background: var(--cs-site-destaque);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    transition: filter .2s, transform .15s;
    text-decoration: none;
}
.cs-hero-cta:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.cs-hero-cta-whatsapp {
    background: #25d366;
    gap: 8px;
}
.cs-hero-cta-whatsapp:hover {
    filter: brightness(1.1);
}
.cs-hero-imagem {
    flex: 0 0 auto;
    width: 380px;
    aspect-ratio: 4/3;
}
.cs-hero-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.cs-hero-slide-fundo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(6px);
    transform: scale(1.05);
}
.cs-hero-slide-fundo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cs-site-secundaria, #1e293b);
    opacity: .65;
}
.cs-hero-conteudo { position: relative; z-index: 1; }
.cs-hero-fullwidth {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.cs-hero-fullwidth::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: inherit;
    filter: blur(20px) brightness(.8);
}
.cs-hero-fullwidth-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cs-hero-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
    z-index: 10;
    backdrop-filter: blur(4px);
}
.cs-hero-seta:hover {
    background: rgba(255,255,255,.3);
}
.cs-hero-seta-esq { left: 20px; }
.cs-hero-seta-dir { right: 20px; }
.cs-hero-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.cs-hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    border: none;
    cursor: pointer;
    transition: background .2s, transform .15s;
    padding: 0;
}
.cs-hero-dot-ativo {
    background: #fff;
    transform: scale(1.2);
}
.cs-hero-dot:hover {
    background: rgba(255,255,255,.7);
}

/* ── Hero fallback (sem carrossel) ────────────────────── */
.cs-site-hero {
    text-align: center;
    padding: 80px 20px;
}
.cs-site-hero h1 {
    font-size: var(--cs-font-hero);
    font-weight: 800;
    color: var(--cs-site-texto);
    margin-bottom: 12px;
}
.cs-site-hero p {
    font-size: var(--cs-font-h3);
    color: var(--cs-site-texto-suave);
    max-width: 600px;
    margin: 0 auto;
}

/* ══ HOME — SEÇÃO SERVIÇOS ══════════════════════════════════ */
/* ── Seção Serviços na Home ──────────────────────── */

/* Base */
.cs-home-servicos {
    padding: 50px 0 60px;
}

/* Fundo Claro */
.cs-home-servicos--claro {
    background: linear-gradient(to bottom, var(--cs-site-fundo) 0%, var(--cs-site-clara) 100%);
}

/* Fundo Escuro */
.cs-home-servicos--escuro {
    background: linear-gradient(to bottom right, var(--cs-site-primaria) 0%, var(--cs-site-secundaria) 100%);
}

/* Header — Modelo 01 (linhas decorativas) */
.cs-home-servicos-titulo {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: var(--cs-font-h2);
    font-weight: 800;
    color: var(--cs-site-secundaria);
    margin: 0 0 32px;
    white-space: nowrap;
}
.cs-home-servicos-linha {
    flex: 1;
    height: 2px;
    background: var(--cs-site-secundaria);
    opacity: .3;
}
.cs-home-servicos-descricao {
    text-align: center;
    font-size: var(--cs-font-body);
    color: var(--cs-site-texto-suave);
    max-width: 800px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

/* Header — Modelo 02 (tag centralizada) */
.cs-home-servicos-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
}
.cs-home-servicos-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: var(--cs-font-h2);
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cs-site-secundaria);
    margin: 0 0 16px;
}
.cs-home-servicos-tag::before,
.cs-home-servicos-tag::after {
    content: '';
    width: 36px;
    height: 2px;
    background: var(--cs-site-secundaria);
    border-radius: 1px;
    opacity: .3;
}
.cs-home-servicos-descricao-v2 {
    font-size: var(--cs-font-body);
    color: var(--cs-site-texto-suave);
    max-width: 750px;
    line-height: 1.7;
    margin: 0;
}

/* Fundo Escuro — overrides de cor */
.cs-home-servicos--escuro .cs-home-servicos-titulo { color: #fff; }
.cs-home-servicos--escuro .cs-home-servicos-linha { background: #fff; opacity: .35; }
.cs-home-servicos--escuro .cs-home-servicos-descricao { color: rgba(255,255,255,.7); }
.cs-home-servicos--escuro .cs-home-servicos-tag { color: #fff; }
.cs-home-servicos--escuro .cs-home-servicos-tag::before,
.cs-home-servicos--escuro .cs-home-servicos-tag::after { background: #fff; }
.cs-home-servicos--escuro .cs-home-servicos-descricao-v2 { color: rgba(255,255,255,.7); }

/* Slider — layout: [seta] [viewport] [seta] */
.cs-home-servicos-slider {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cs-home-servicos-viewport {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    padding: 8px 0;
    margin: -8px 0;
}
.cs-home-servicos-track {
    display: flex;
    transition: transform .4s ease;
}
.cs-home-servicos-slide {
    flex-shrink: 0;
    padding: 0 12px;
    box-sizing: border-box;
}
/* Centralizar itens quando cabem todos na tela (Alpine toggle) */
.cs-track-centered { justify-content: center; }

/* ── Seta padrão para todos os carrosséis ──── */
.cs-seta-slide {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background: var(--cs-site-secundaria);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.cs-seta-slide:hover {
    background: var(--cs-site-primaria);
}
/* Dark mode overrides — setas */
.cs-home-servicos--escuro .cs-seta-slide,
.cs-home-produtos--escuro .cs-seta-slide {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: none;
}
.cs-home-servicos--escuro .cs-seta-slide:hover,
.cs-home-produtos--escuro .cs-seta-slide:hover {
    background: rgba(255,255,255,.3);
    border-color: rgba(255,255,255,.4);
}

/* ══ HOME — SEÇÃO PRODUTOS ══════════════════════════════════ */
.cs-home-produtos { padding: 50px 0 60px; }
.cs-home-produtos--claro { background: linear-gradient(to bottom, var(--cs-site-fundo) 0%, var(--cs-site-clara) 100%); }
.cs-home-produtos--escuro { background: linear-gradient(to bottom right, var(--cs-site-primaria) 0%, var(--cs-site-secundaria) 100%); }

/* Título — Modelo 01 (linha + título + linha) */
.cs-home-produtos-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 6px;
    font-size: var(--cs-font-h2);
    font-weight: 700;
    color: var(--cs-site-secundaria);
}
.cs-home-produtos-linha {
    flex: 1;
    height: 2px;
    background: var(--cs-site-secundaria);
    opacity: .3;
    border-radius: 1px;
}
.cs-home-produtos-subtitulo {
    text-align: center;
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto-suave);
    margin-bottom: 4px;
}
.cs-home-produtos-descricao {
    text-align: center;
    font-size: var(--cs-font-body);
    color: var(--cs-site-texto-suave);
    max-width: 800px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

/* Filtros por atributo — 3 colunas */
/* Filtros por atributo — grid dinâmico */
.cs-home-produtos-filtros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0 auto 36px;
    padding: 0 20px;
}
/* Primeiro filtro sempre sozinho na linha de cima */
.cs-home-produtos-filtros > .cs-home-produtos-filtro:first-child {
    grid-column: 1 / -1;
}
/* Primeiro filtro (linha de cima sozinho) — ícones maiores */
.cs-home-produtos-filtros > .cs-home-produtos-filtro:first-child .cs-filtro-icone-item {
    aspect-ratio: 3 / 2;
}

/* 1 filtro: tudo full-width */
.cs-filtros-1 { grid-template-columns: 1fr; }
/* 2 filtros: ambos full-width (1 por linha) */
.cs-filtros-2 { grid-template-columns: 1fr; }
/* 3 filtros: primeiro full-width, segundo e terceiro dividem */
.cs-filtros-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-home-produtos-filtro {
    text-align: center;
    min-width: 0;
}
.cs-home-produtos-filtro-subtitulo {
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto-suave);
    margin-bottom: -2px;
}
.cs-home-produtos-filtro-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: var(--cs-font-h3);
    font-weight: 700;
    color: var(--cs-site-primaria);
    margin-bottom: 16px;
}
.cs-home-produtos-filtro-linha {
    flex: 1;
    height: 2px;
    background: var(--cs-site-primaria);
    opacity: .15;
    border-radius: 1px;
}
.cs-home-produtos-filtro-valores {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.cs-home-produtos-filtro-track-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 4px 0;
    margin: -4px 0;
}
.cs-home-produtos-filtro-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    transition: transform .3s ease;
}
.cs-home-produtos-filtro-pill {
    flex: 0 0 calc(50% - 4px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    font-size: var(--cs-font-body);
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    text-align: center;
    background: var(--cs-site-primaria);
    transition: background .15s, transform .1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.cs-home-produtos-filtro-pill:hover {
    background: var(--cs-site-secundaria);
    transform: translateY(-2px);
}
/* Setas filtros — usa padrão cs-seta-slide */

/* Modo ícones dos filtros (dentro do slider) */
.cs-filtro-icone-item {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    aspect-ratio: 2 / 1;
    padding: 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid var(--cs-site-borda);
    text-decoration: none;
    transition: border-color .15s, transform .1s, background .15s;
    cursor: pointer;
    overflow: hidden;
}
.cs-filtro-icone-item:hover {
    border-color: var(--cs-site-primaria);
    background: #fff;
    transform: translateY(-2px);
}
.cs-filtro-icone-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cs-filtro-icone-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: var(--cs-font-body);
    font-weight: 700;
    color: var(--cs-site-texto);
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
}

/* Modo ícones — fundo escuro (opacidade maior pra logos coloridas) */
.cs-home-produtos--escuro .cs-filtro-icone-item {
    background: rgba(255,255,255,.4);
    border-color: rgba(255,255,255,.5);
}
.cs-home-produtos--escuro .cs-filtro-icone-item:hover {
    background: rgba(255,255,255,.6);
    border-color: rgba(255,255,255,.7);
}
.cs-home-produtos--escuro .cs-filtro-icone-fallback {
    color: #fff;
}

/* Destaque título */
.cs-home-produtos-destaque-sub {
    text-align: center;
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto-suave);
    margin-bottom: 2px;
}
.cs-home-produtos-destaque-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: var(--cs-font-h2);
    font-weight: 700;
    color: var(--cs-site-primaria);
    margin-bottom: 24px;
}

/* Grid de cards */
.cs-home-produtos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
}

/* Slider de cards */
.cs-home-produtos-slider {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1340px;
    margin: 0 auto;
}
/* Setas produtos — usa padrão cs-seta-slide */
.cs-home-produtos-track-wrap { flex: 1; overflow: hidden; padding: 6px 0; margin: -6px 0; }
.cs-home-produtos-track {
    display: flex;
    transition: transform .4s ease;
}
.cs-home-produtos-track > div {
    box-sizing: border-box;
    padding: 0 10px;
}

/* Ver todos */
.cs-home-produtos-ver-todos {
    text-align: center;
    margin-top: 32px;
}
.cs-home-produtos-ver-todos a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cs-font-body);
    font-weight: 600;
    color: var(--cs-site-primaria);
    text-decoration: none;
    border: 2px solid var(--cs-site-primaria);
    padding: 10px 28px;
    border-radius: 8px;
    transition: background .2s, color .2s;
}
.cs-home-produtos-ver-todos a:hover {
    background: var(--cs-site-primaria);
    color: #fff;
}

/* Dark overrides */
.cs-home-produtos--escuro .cs-home-produtos-titulo { color: #fff; }
.cs-home-produtos--escuro .cs-home-produtos-linha { background: #fff; opacity: .35; }
.cs-home-produtos--escuro .cs-home-produtos-subtitulo { color: rgba(255,255,255,.6); }
.cs-home-produtos--escuro .cs-home-produtos-descricao { color: rgba(255,255,255,.7); }
.cs-home-produtos--escuro .cs-home-produtos-filtro-subtitulo { color: rgba(255,255,255,.6); }
.cs-home-produtos--escuro .cs-home-produtos-filtro-titulo { color: #fff; }
.cs-home-produtos--escuro .cs-home-produtos-filtro-linha { background: #fff; }
.cs-home-produtos--escuro .cs-home-produtos-filtro-pill {
    background: rgba(255,255,255,.15);
}
.cs-home-produtos--escuro .cs-home-produtos-filtro-pill:hover {
    background: rgba(255,255,255,.3);
}
.cs-home-produtos--escuro .cs-home-produtos-destaque-sub { color: rgba(255,255,255,.6); }
.cs-home-produtos--escuro .cs-home-produtos-destaque-titulo { color: #fff; }
.cs-home-produtos--escuro .cs-home-produtos-ver-todos a {
    color: #fff;
    border-color: rgba(255,255,255,.4);
}
.cs-home-produtos--escuro .cs-home-produtos-ver-todos a:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.6);
}

/* Header — Modelo 02 Produtos (tag centralizada, espelho dos serviços) */
.cs-home-produtos-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 32px;
}
.cs-home-produtos-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: var(--cs-font-h2);
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cs-site-secundaria);
    margin: 0 0 12px;
}
.cs-home-produtos-tag::before,
.cs-home-produtos-tag::after {
    content: '';
    width: 36px;
    height: 2px;
    background: var(--cs-site-secundaria);
    border-radius: 1px;
    opacity: .3;
}
.cs-home-produtos-descricao-v2 {
    font-size: var(--cs-font-body);
    color: var(--cs-site-texto-suave);
    max-width: 750px;
    line-height: 1.7;
    margin: 0;
}
.cs-home-produtos--escuro .cs-home-produtos-tag { color: #fff; }
.cs-home-produtos--escuro .cs-home-produtos-tag::before,
.cs-home-produtos--escuro .cs-home-produtos-tag::after { background: #fff; }
.cs-home-produtos--escuro .cs-home-produtos-descricao-v2 { color: rgba(255,255,255,.7); }

/* ── Seção Fabricantes — Slider de Logomarcas ───────────────── */
.cs-home-fabricantes { padding: 50px 0 60px; }
.cs-home-fabricantes--claro { background: linear-gradient(to bottom, var(--cs-site-fundo) 0%, var(--cs-site-clara) 100%); }
.cs-home-fabricantes--escuro { background: linear-gradient(to bottom right, var(--cs-site-primaria) 0%, var(--cs-site-secundaria) 100%); }

/* Modelo 01: subtítulo + título com linhas (mesmo padrão de Serviços/Produtos) */
.cs-home-fabricantes-descricao {
    text-align: center;
    font-size: var(--cs-font-body);
    color: var(--cs-site-texto-suave);
    max-width: 800px;
    margin: 0 auto 24px;
}
.cs-home-fabricantes-titulo {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: var(--cs-font-h2);
    font-weight: 800;
    color: var(--cs-site-secundaria);
    margin: 0 0 32px;
    white-space: nowrap;
}
.cs-home-fabricantes-linha {
    flex: 1;
    height: 2px;
    background: var(--cs-site-secundaria);
    opacity: .3;
    border-radius: 1px;
}

/* Modelo 02: tag centralizada (mesmo padrão de Serviços/Produtos) */
.cs-home-fabricantes-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
}
.cs-home-fabricantes-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: var(--cs-font-h2);
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cs-site-secundaria);
    margin: 0 0 16px;
}
.cs-home-fabricantes-tag::before,
.cs-home-fabricantes-tag::after {
    content: '';
    width: 36px;
    height: 2px;
    background: var(--cs-site-secundaria);
    border-radius: 1px;
    opacity: .3;
}
.cs-home-fabricantes-descricao-v2 {
    font-size: var(--cs-font-body);
    color: var(--cs-site-texto-suave);
    max-width: 750px;
    line-height: 1.7;
    margin: 0;
}

/* Slider (mesmo padrão .cs-seta-slide + viewport/track de Serviços/Produtos) */
.cs-home-fabricantes-slider {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cs-home-fabricantes-viewport {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    padding: 6px 0;
    margin: -6px 0;
}
.cs-home-fabricantes-track {
    display: flex;
    transition: transform .4s ease;
}
.cs-home-fabricantes-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    box-sizing: border-box;
}
.cs-home-fabricantes-logo {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
    transition: transform .3s, filter .3s, opacity .3s;
}
.cs-home-fabricantes-item:hover .cs-home-fabricantes-logo {
    transform: scale(1.06);
}
.cs-home-fabricantes-nome {
    font-size: var(--cs-font-body-sm);
    font-weight: 700;
    color: var(--cs-site-texto-suave);
    text-align: center;
}

/* Fabricantes — escuro */
.cs-home-fabricantes--escuro .cs-home-fabricantes-titulo { color: #fff; }
.cs-home-fabricantes--escuro .cs-home-fabricantes-linha { background: #fff; opacity: .35; }
.cs-home-fabricantes--escuro .cs-home-fabricantes-descricao { color: rgba(255,255,255,.7); }
.cs-home-fabricantes--escuro .cs-home-fabricantes-tag { color: #fff; }
.cs-home-fabricantes--escuro .cs-home-fabricantes-tag::before,
.cs-home-fabricantes--escuro .cs-home-fabricantes-tag::after { background: #fff; }
.cs-home-fabricantes--escuro .cs-home-fabricantes-descricao-v2 { color: rgba(255,255,255,.7); }
.cs-home-fabricantes--escuro .cs-seta-slide {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: none;
}
.cs-home-fabricantes--escuro .cs-seta-slide:hover {
    background: rgba(255,255,255,.3);
    border-color: rgba(255,255,255,.4);
}
.cs-home-fabricantes--escuro .cs-home-fabricantes-logo {
    filter: grayscale(100%) brightness(1.8) contrast(.9);
    opacity: .85;
}
.cs-home-fabricantes--escuro .cs-home-fabricantes-item:hover .cs-home-fabricantes-logo {
    filter: grayscale(0%) brightness(1.5);
    opacity: 1;
}
.cs-home-fabricantes--escuro .cs-home-fabricantes-nome { color: rgba(255,255,255,.7); }

/* ── Avaliações do Google (embed Elfsight) ───── */
.cs-home-avaliacoes-embed { max-width: 1100px; margin: 0 auto; }

/* ── Nossos Clientes — card branco + logos maiores ───── */
.cs-home-clientes .cs-home-fabricantes-item {
    padding: 8px;
}
.cs-home-clientes .cs-home-fabricantes-item > img,
.cs-home-clientes .cs-home-fabricantes-item > span {
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.06);
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}
.cs-home-clientes .cs-home-fabricantes-logo {
    max-height: 90px;
}
.cs-home-clientes.cs-home-fabricantes--escuro .cs-home-fabricantes-item > img {
    filter: none;
    opacity: 1;
}
.cs-home-clientes.cs-home-fabricantes--escuro .cs-home-fabricantes-item:hover > img {
    filter: none;
    opacity: 1;
}

/* ── Card de Produto — Modelo 02 (moderno, centralizado) ───── */
.cs-produto-card-v2 {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--cs-site-borda);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s;
}
.cs-produto-card-v2:hover {
    transform: translateY(-6px);
}
.cs-produto-card-v2-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}
.cs-produto-card-v2-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f8fafc;
}
.cs-produto-card-v2-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s;
    padding: 12px;
}
.cs-produto-card-v2:hover .cs-produto-card-v2-img img {
    transform: scale(1.06);
}
.cs-produto-card-v2-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 16px 12px;
    flex: 1;
}
.cs-produto-card-v2-icones {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 10px;
}
.cs-produto-card-v2-icone {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--cs-site-fundo);
    padding: 3px;
}
.cs-produto-card-v2-titulo {
    font-size: var(--cs-font-body-sm);
    font-weight: 700;
    color: var(--cs-site-texto);
    margin: 0 0 12px;
    line-height: 1.35;
}
.cs-produto-card-v2-precos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: auto;
}
.cs-produto-card-v2-pix {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cs-font-h3);
    font-weight: 800;
    color: var(--cs-site-primaria);
}
.cs-produto-card-v2-pix-tag {
    font-size: 9px;
    font-weight: 700;
    background: var(--cs-site-destaque);
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: .5px;
}
.cs-produto-card-v2-preco {
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto-suave);
}
.cs-produto-card-v2-parcelas {
    font-size: var(--cs-font-small);
    color: var(--cs-site-texto-suave);
    opacity: .8;
}
.cs-produto-card-v2-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 24px);
    margin: 0 12px 12px;
    padding: 10px 0;
    background: transparent;
    color: var(--cs-site-primaria);
    font-size: var(--cs-font-body-sm);
    font-weight: 700;
    border: 2px solid var(--cs-site-primaria);
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.cs-produto-card-v2-btn:hover {
    background: var(--cs-site-primaria);
    color: #fff;
}
.cs-produto-card-v2-btn:disabled {
    opacity: .6;
    cursor: wait;
}

@media (max-width: 768px) {
    .cs-home-produtos-tag { font-size: var(--cs-font-h3); letter-spacing: 2px; }
}

/* ══ PÁGINA INTERNA (Quem Somos, Serviços, etc.) ════════════ */

/* ── Banner hero com título + breadcrumb ────────────────── */
.cs-site-pagina-banner {
    background: var(--cs-site-primaria);
    color: #fff;
    text-align: center;
    padding: 48px 20px 40px;
}
.cs-site-pagina-banner-titulo {
    font-size: var(--cs-font-banner);
    font-weight: 800;
    margin-bottom: 14px;
}

/* ── Breadcrumb ─────────────────────────────────────────── */
.cs-site-pagina-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: var(--cs-font-label);
}
.cs-site-pagina-breadcrumb a {
    color: rgba(255,255,255,.75);
    text-decoration: none;
    transition: color .15s;
}
.cs-site-pagina-breadcrumb a:hover {
    color: #fff;
}
.cs-site-pagina-breadcrumb-sep {
    color: rgba(255,255,255,.4);
    font-size: var(--cs-font-body);
}
.cs-site-pagina-breadcrumb-atual {
    background: rgba(255,255,255,.18);
    padding: 3px 14px;
    border-radius: 4px;
    font-weight: 600;
    color: #fff;
}

/* ── Fundo claro da área de conteúdo ────────────────────── */
.cs-site-pagina-fundo {
    background: var(--cs-site-clara);
    padding: 50px 0;
}

/* ── Seção de conteúdo (card branco) ───────────────────── */
.cs-site-pagina {
    background: var(--cs-site-fundo);
    border-radius: 15px;
    padding: 50px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* ── Imagem (centralizada, com sombra) ──────────────────── */
.cs-site-pagina-imagem {
    margin-bottom: 36px;
    text-align: center;
}
.cs-site-pagina-imagem img {
    max-width: 680px;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    object-fit: cover;
    margin: 0 auto;
}

/* ── Texto do conteúdo ──────────────────────────────────── */
.cs-site-pagina-conteudo {
    font-size: var(--cs-font-body);
    line-height: 1.85;
    color: var(--cs-site-texto);
}
.cs-site-pagina-conteudo h2,
.cs-site-pagina-conteudo h3 {
    font-weight: 700;
    color: var(--cs-site-texto);
    margin: 28px 0 12px;
}
.cs-site-pagina-conteudo h2 { font-size: var(--cs-font-h2); }
.cs-site-pagina-conteudo h3 { font-size: var(--cs-font-h3); }
.cs-site-pagina-conteudo p {
    margin-bottom: 16px;
}
.cs-site-pagina-conteudo strong {
    font-weight: 700;
}
.cs-site-pagina-conteudo ul,
.cs-site-pagina-conteudo ol {
    padding-left: 24px;
    margin-bottom: 16px;
    list-style: disc;
}
.cs-site-pagina-conteudo ol {
    list-style: decimal;
}
.cs-site-pagina-conteudo li {
    margin-bottom: 6px;
}
.cs-site-pagina-conteudo a {
    color: var(--cs-site-primaria);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cs-site-pagina-conteudo a:hover {
    color: var(--cs-site-secundaria);
}
.cs-site-pagina-conteudo br {
    display: block;
    margin-bottom: 8px;
    content: "";
}

/* ══ SERVIÇOS — Grid de Cards ════════════════════════════ */
.cs-site-servicos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
.cs-site-servicos-grid > * {
    flex: 0 0 calc(25% - 18px);
    min-width: 0;
}
.cs-site-servico-card {
    background: var(--cs-site-fundo);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--cs-site-clara);
    transition: transform .2s, border-color .2s;
    text-decoration: none;
    color: var(--cs-site-texto);
    display: flex;
    flex-direction: column;
}
.cs-site-servico-card:hover {
    transform: translateY(-4px);
    border-color: var(--cs-site-secundaria);
}
.cs-site-servico-card-img {
    aspect-ratio: 4/3;
    overflow: hidden;
}
.cs-site-servico-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cs-site-servico-card-body {
    padding: 20px;
}
.cs-site-servico-card-titulo {
    font-size: var(--cs-font-body);
    font-weight: 700;
    color: var(--cs-site-primaria);
    line-height: 1.4;
}
.cs-site-servico-card:hover .cs-site-servico-card-titulo { color: var(--cs-site-secundaria); }

/* ── Modelo 02 — Overlay Cards ───────────────────── */
.cs-site-servico-card-v2 {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4/3;
    display: block;
    text-decoration: none;
    transition: transform .3s;
}
.cs-site-servico-card-v2:hover {
    transform: translateY(-6px);
}
.cs-site-servico-card-v2-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}
.cs-site-servico-card-v2:hover .cs-site-servico-card-v2-img {
    transform: scale(1.08);
}
.cs-site-servico-card-v2-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 20px;
    transition: background .3s, padding .3s;
}
.cs-site-servico-card-v2:hover .cs-site-servico-card-v2-overlay {
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 55%, transparent 100%);
    padding-bottom: 28px;
}
.cs-site-servico-card-v2-titulo {
    color: #fff;
    font-size: var(--cs-font-h4);
    font-weight: 700;
    margin: 0;
    transition: transform .3s;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.cs-site-servico-card-v2:hover .cs-site-servico-card-v2-titulo {
    transform: translateY(-4px);
}
.cs-site-servico-card-v2-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: var(--cs-font-small);
    font-weight: 600;
    letter-spacing: .5px;
    margin-top: 10px;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.25);
    width: fit-content;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s, transform .3s, background .2s;
}
.cs-site-servico-card-v2:hover .cs-site-servico-card-v2-cta {
    opacity: 1;
    transform: translateY(0);
}
.cs-site-servico-card-v2-cta:hover {
    background: rgba(255,255,255,.25);
}
.cs-site-servico-card-v2-cta svg {
    transition: transform .2s;
}
.cs-site-servico-card-v2:hover .cs-site-servico-card-v2-cta svg {
    transform: translateX(3px);
}
/* Fallback sem imagem */
.cs-site-servico-card-v2--noimg {
    background: var(--cs-site-secundaria);
}
.cs-site-servico-card-v2--noimg .cs-site-servico-card-v2-overlay {
    background: none;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ══ SIMULADOR DE BTUS ═══════════════════════════════════ */
.cs-sim-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.cs-sim-card {
    background: var(--cs-site-fundo);
    border-radius: 12px;
    padding: 24px;
    border: 2px solid var(--cs-site-clara);
}
.cs-sim-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.cs-sim-card-icone {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cs-sim-card-titulo {
    font-size: var(--cs-font-body-sm);
    font-weight: 700;
    color: var(--cs-site-texto);
}
.cs-sim-campo {
    margin-bottom: 10px;
}
.cs-sim-campo-label {
    font-size: var(--cs-font-small);
    color: var(--cs-site-texto-suave);
    margin-bottom: 4px;
    display: block;
}
.cs-sim-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cs-sim-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--cs-site-borda);
    border-radius: 8px;
    background: var(--cs-site-clara);
    color: var(--cs-site-texto);
    font-size: var(--cs-font-h3);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
}
.cs-sim-btn:hover { background: var(--cs-site-borda); }
.cs-sim-btn:active { transform: scale(.95); }
.cs-sim-input {
    flex: 1;
    text-align: center;
    border: 1px solid var(--cs-site-borda);
    border-radius: 8px;
    padding: 8px;
    font-size: var(--cs-font-body);
    font-weight: 600;
    color: var(--cs-site-texto);
    background: var(--cs-site-fundo);
}
.cs-sim-input:focus { outline: 2px solid var(--cs-site-primaria); outline-offset: -1px; }
.cs-sim-hint {
    text-align: center;
    font-size: var(--cs-font-small);
    color: var(--cs-site-texto-suave);
    margin-top: 10px;
}
.cs-sim-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cs-site-borda);
    border-radius: 8px;
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto);
    background: var(--cs-site-fundo);
    cursor: pointer;
}
.cs-sim-select:focus { outline: 2px solid var(--cs-site-primaria); outline-offset: -1px; }
.cs-sim-resultado {
    background: var(--cs-site-primaria);
    border-radius: 12px;
    padding: 24px;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    border: none;
}
.cs-sim-resultado-label {
    font-size: var(--cs-font-small);
    opacity: .7;
    margin-bottom: 4px;
}
.cs-sim-resultado-valor {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}
.cs-sim-resultado-divisor {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.2);
}
.cs-sim-resultado-sugerido {
    font-size: var(--cs-font-preco-xl);
    font-weight: 800;
    color: #fff;
}
.cs-sim-resultado-limpar {
    margin-top: 16px;
    padding: 8px 20px;
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 8px;
    font-size: var(--cs-font-label);
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.cs-sim-resultado-limpar:hover { background: rgba(255,255,255,.25); }
.cs-sim-disclaimer {
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--cs-alerta-aviso-bg);
    border: 1px solid var(--cs-alerta-aviso-borda);
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.cs-sim-disclaimer p {
    font-size: var(--cs-font-label);
    color: var(--cs-alerta-aviso-texto);
    line-height: 1.5;
    margin: 0;
}

/* ══ FOOTER ══════════════════════════════════════════════ */
.cs-site-footer {
    background: var(--cs-site-rodape-fundo, #0f172a);
    color: #cbd5e1;
    padding: 48px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
}
.cs-site-footer a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color .15s;
}
.cs-site-footer a:hover { color: #fff; }

/* ── Variante Clara ────────────────────────────────── */
.cs-site-footer-claro {
    background: #f8fafc !important;
    color: #475569 !important;
}
.cs-site-footer-claro a { color: #334155; }
.cs-site-footer-claro a:hover { color: #0f172a; }
.cs-site-footer-claro .cs-footer-empresa { color: #1e293b !important; }
.cs-site-footer-claro .cs-footer-titulo { color: #1e293b !important; border-color: #cbd5e1 !important; }
.cs-site-footer-claro .cs-footer-separador { border-color: #e2e8f0 !important; }
.cs-site-footer-claro .cs-footer-rede-link { background: rgba(0,0,0,.06); color: #475569; }
.cs-site-footer-claro .cs-footer-rede-link:hover { background: var(--cs-site-primaria, #1e3a8a); color: #fff; }
.cs-site-footer-claro .cs-footer-selo { background: rgba(0,0,0,.03); }
.cs-site-footer-claro .cs-footer-bottom { background: #e2e8f0; color: #64748b; }
.cs-site-footer-claro .cs-footer-bottom a { color: #475569; }

/* ── Colunas: Cards com borda ─────────────────────── */
.cs-footer-col {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 28px 24px;
    background: rgba(255,255,255,.04);
}
.cs-site-footer-claro .cs-footer-col {
    border-color: rgba(0,0,0,.1);
    background: rgba(0,0,0,.02);
}

/* ── Modelo 01: 3 Colunas ─────────────────────────── */
.cs-footer-colunas {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 24px;
    padding-bottom: 0;
}

/* ── Modelo 02: Centralizado ──────────────────────── */
.cs-footer-centralizado {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 32px;
    gap: 6px;
}

/* ── Elementos comuns ─────────────────────────────── */
.cs-footer-logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.20);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 14px;
}
.cs-site-footer-claro .cs-footer-logo-box {
    background: rgba(0,0,0,.04);
}
.cs-footer-logo {
    max-height: 50px;
    width: auto;
    object-fit: contain;
    display: block;
}
.cs-footer-centralizado .cs-footer-logo-box { margin: 0 auto 14px; }
.cs-footer-centralizado .cs-footer-logo { margin: 0; }

.cs-footer-empresa {
    font-size: 16px;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 8px;
}

.cs-footer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 13px;
}
.cs-footer-info a { color: inherit; }
.cs-footer-info a:hover { color: #fff; }

.cs-footer-info-central {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
}
.cs-footer-info-central a { color: inherit; }

.cs-footer-icone {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: .7;
    vertical-align: middle;
}

.cs-footer-separador {
    border: none;
    border-top: 1px dashed rgba(148,163,184,.25);
    margin: 14px 0;
}
.cs-footer-centralizado .cs-footer-separador { width: 200px; }

/* ── Redes Sociais ────────────────────────────────── */
.cs-footer-redes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cs-footer-centralizado .cs-footer-redes { justify-content: center; }

.cs-footer-rede-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: background .15s, color .15s, transform .15s;
}
.cs-footer-rede-link:hover {
    background: var(--cs-site-primaria, #1e3a8a);
    color: #fff !important;
    transform: translateY(-2px);
}
.cs-footer-rede-link svg { width: 16px; height: 16px; }

/* ── Links Institucionais ─────────────────────────── */
.cs-footer-titulo {
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    color: #e2e8f0;
    margin-bottom: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cs-footer-titulo::before,
.cs-footer-titulo::after {
    content: '';
    flex: 1;
    border-top: 1px dashed rgba(255,255,255,.2);
}
.cs-site-footer-claro .cs-footer-titulo::before,
.cs-site-footer-claro .cs-footer-titulo::after {
    border-color: rgba(0,0,0,.15);
}

.cs-footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cs-footer-link {
    font-size: 13px;
    padding: 2px 0;
    transition: padding-left .15s, color .15s;
}
.cs-footer-link:hover { padding-left: 6px; }

.cs-footer-links-central {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 4px;
    justify-content: center;
    font-size: 13px;
}
.cs-footer-links-sep {
    color: rgba(148,163,184,.4);
    margin: 0 4px;
}

/* ── Selos ────────────────────────────────────────── */
.cs-footer-selos-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 0;
}
.cs-footer-selos-central {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.cs-footer-selo {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-site-footer-claro .cs-footer-selo {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.08);
}
.cs-footer-selo img {
    max-width: 100px;
    max-height: 55px;
    object-fit: contain;
}

/* ── Bottom Bar ───────────────────────────────────── */
.cs-footer-bottom {
    background: rgba(0,0,0,.2);
    padding: 14px 0;
    margin-top: 0;
    font-size: 12px;
}
.cs-footer-bottom .cs-site-container {
    text-align: center;
}
.cs-footer-bottom strong { font-weight: 600; opacity: .8; }

/* ── Endereço bloco ───────────────────────────────── */
.cs-footer-endereco {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12.5px;
    line-height: 1.5;
}
.cs-footer-endereco .cs-footer-icone {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Footer Responsive ────────────────────────────── */
@media (max-width: 768px) {
    .cs-footer-colunas {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }
    .cs-footer-col { padding: 24px 20px; }
    .cs-footer-colunas .cs-footer-info { justify-content: center; }
    .cs-footer-colunas .cs-footer-endereco { justify-content: center; text-align: center; }
    .cs-footer-colunas .cs-footer-redes { justify-content: center; }
    .cs-footer-colunas .cs-footer-logo-box { margin: 0 auto 14px; }
}

/* ══ PRODUTOS — Listagem ════════════════════════════════ */

/* ── Toolbar (total + busca expansível + ordenação) ───── */
.cs-produtos-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.cs-produtos-total {
    font-size: var(--cs-font-label);
    font-weight: 600;
    color: var(--cs-site-texto-suave);
    white-space: nowrap;
}

/* Busca expansível: ícone → clica → expande input */
.cs-produtos-busca-wrap {
    display: flex;
    align-items: center;
    position: relative;
}
.cs-produtos-busca-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cs-site-primaria);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
    z-index: 2;
}
.cs-produtos-busca-toggle:hover { background: var(--cs-site-secundaria); }
.cs-produtos-busca-form {
    display: flex;
    max-width: 0;
    overflow: hidden;
    transition: max-width .3s ease, opacity .2s;
    opacity: 0;
}
.cs-busca-aberta .cs-produtos-busca-form {
    max-width: 320px;
    opacity: 1;
    margin-left: 8px;
}
.cs-produtos-busca-input {
    width: 220px;
    padding: 8px 12px;
    border: 1px solid var(--cs-site-borda);
    border-right: none;
    border-radius: 6px 0 0 6px;
    font-size: var(--cs-font-label);
    outline: none;
    background: var(--cs-site-fundo);
}
.cs-produtos-busca-input:focus { border-color: var(--cs-site-primaria); }
.cs-produtos-busca-btn {
    padding: 8px 10px;
    background: var(--cs-site-primaria);
    color: #fff;
    border: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.cs-produtos-busca-btn:hover { opacity: .9; }

.cs-produtos-ordenar {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cs-font-label);
    color: var(--cs-site-texto-suave);
}
.cs-produtos-ordenar select {
    padding: 6px 10px;
    border: 1px solid var(--cs-site-borda);
    border-radius: 6px;
    font-size: var(--cs-font-label);
    background: var(--cs-site-fundo);
    cursor: pointer;
}

/* ── Botão Filtrar (toolbar) ──────────────────────────── */
.cs-produtos-btn-filtrar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--cs-site-primaria);
    color: #fff;
    font-size: var(--cs-font-label);
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.cs-produtos-btn-filtrar:hover { background: var(--cs-site-secundaria); }
.cs-btn-filtrar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--cs-site-destaque);
    color: #fff;
    font-size: var(--cs-font-badge);
    font-weight: 700;
    border-radius: 9px;
    margin-left: 2px;
}

/* ── Drawer Overlay ──────────────────────────────────── */
.cs-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.cs-drawer-overlay.cs-drawer-aberto {
    opacity: 1;
    visibility: visible;
}

/* ── Drawer Filtros (off-canvas direito) ──────────────── */
.cs-drawer-filtros {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background: var(--cs-site-fundo);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,.12);
}
.cs-drawer-filtros.cs-drawer-aberto {
    transform: translateX(0);
}
.cs-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--cs-site-borda);
    flex-shrink: 0;
}
.cs-drawer-titulo {
    font-size: var(--cs-font-body);
    font-weight: 700;
    color: var(--cs-site-primaria);
}
.cs-drawer-aplicar {
    padding: 8px 20px;
    background: var(--cs-site-primaria);
    color: #fff;
    font-size: var(--cs-font-label);
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}
.cs-drawer-aplicar:hover { background: var(--cs-site-secundaria); }
.cs-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.cs-drawer-footer {
    flex-shrink: 0;
    padding: 14px 20px;
    border-top: 1px solid var(--cs-site-borda);
    text-align: center;
}
.cs-drawer-limpar {
    font-size: var(--cs-font-label);
    color: var(--cs-site-destaque);
    text-decoration: none;
    font-weight: 600;
}
.cs-drawer-limpar:hover { text-decoration: underline; }

/* ── Chips de Filtros Ativos ─────────────────────────── */
.cs-filtros-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.cs-filtro-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--cs-site-primaria);
    color: #fff;
    font-size: var(--cs-font-small);
    font-weight: 600;
    border-radius: 20px;
    text-decoration: none;
    transition: opacity .15s;
}
.cs-filtro-chip:hover { opacity: .85; }
.cs-filtro-chip svg { flex-shrink: 0; }
.cs-filtros-limpar {
    font-size: var(--cs-font-small);
    color: var(--cs-site-destaque);
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
}
.cs-filtros-limpar:hover { text-decoration: underline; }

/* ── Filtro Grupo (usado dentro do drawer) ────────────── */
.cs-produtos-filtro-grupo {
    margin-bottom: 16px;
}
.cs-produtos-filtro-nome {
    font-size: var(--cs-font-tiny);
    font-weight: 700;
    color: var(--cs-site-primaria);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.cs-produtos-filtro-opcoes {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cs-filtro-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    font-size: var(--cs-font-small);
    color: var(--cs-site-texto-suave);
    text-decoration: none;
    border-radius: 4px;
    transition: background .15s;
}
.cs-filtro-checkbox:hover {
    background: var(--cs-site-clara);
}
.cs-filtro-check-box {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--cs-site-borda);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
}
.cs-filtro-ativo .cs-filtro-check-box {
    background: var(--cs-site-primaria);
    border-color: var(--cs-site-primaria);
}
.cs-filtro-check-label {
    flex: 1;
    color: var(--cs-site-texto);
    font-weight: 400;
    font-size: var(--cs-font-small);
}
.cs-filtro-ativo .cs-filtro-check-label {
    font-weight: 600;
    color: var(--cs-site-primaria);
}
.cs-filtro-check-count {
    font-size: var(--cs-font-badge);
    color: var(--cs-site-texto);
}
.cs-filtro-ativo .cs-filtro-check-count {
    color: var(--cs-site-primaria);
}
.cs-filtro-desabilitado .cs-filtro-check-label,
.cs-filtro-desabilitado .cs-filtro-check-count {
    color: var(--cs-site-texto-suave);
}
.cs-filtro-desabilitado .cs-filtro-check-box {
    border-color: var(--cs-site-borda);
}
.cs-filtro-desabilitado {
    opacity: .5;
}

/* ── Grid de Produtos (4 colunas) ────────────────────── */
.cs-produtos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.cs-produto-card {
    background: var(--cs-site-fundo);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--cs-site-clara);
    transition: transform .2s, border-color .2s;
    color: var(--cs-site-texto);
    display: flex;
    flex-direction: column;
}
.cs-produto-card:hover {
    transform: translateY(-4px);
    border-color: var(--cs-site-secundaria);
}
.cs-produto-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.cs-produto-card-img {
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative;
    background: var(--cs-site-neutro);
}
.cs-produto-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.cs-produto-card:hover .cs-produto-card-img img {
    transform: scale(1.05);
}
/* Badge PIX (top-left) */
.cs-produto-badge-pix {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--cs-site-destaque);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Mini-cards de ícones (abaixo da foto) */
.cs-produto-card-icones {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--cs-site-neutro);
    border-top: 1px solid var(--cs-site-borda);
}
.cs-produto-card-icone {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: .8;
    transition: opacity .15s;
}
.cs-produto-card-icone:hover { opacity: 1; }

.cs-produto-card-body {
    padding: 14px 16px 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.cs-produto-card-titulo {
    font-size: var(--cs-font-label);
    font-weight: 600;
    color: var(--cs-site-primaria);
    line-height: 1.4;
    margin-bottom: 10px;
}
.cs-produto-card:hover .cs-produto-card-titulo { color: var(--cs-site-secundaria); }

/* Preços estilo v3 */
.cs-produto-card-precos {
    margin-top: auto;
}
.cs-card-pix-preco {
    font-size: var(--cs-font-titulo-pg);
    font-weight: 800;
    color: var(--cs-site-secundaria);
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}
.cs-produto-badge-pix-inline {
    font-size: 9px;
    font-weight: 700;
    background: var(--cs-site-destaque);
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: .5px;
}
.cs-card-preco-normal {
    font-size: var(--cs-font-label);
    color: var(--cs-site-texto-suave);
    display: block;
    margin-top: 2px;
}
.cs-card-parcelas {
    font-size: var(--cs-font-small);
    color: var(--cs-site-texto-suave);
    display: block;
    margin-top: 1px;
}

/* Botão Comprar no card */
.cs-produto-card-btn-comprar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 0;
    background: var(--cs-site-primaria);
    color: #fff;
    font-size: var(--cs-font-body-sm);
    font-weight: 700;
    border: none;
    border-radius: 0 0 12px 12px;
    cursor: pointer;
    transition: background .15s;
}
.cs-produto-card-btn-comprar:hover { background: var(--cs-site-secundaria); }
.cs-produto-card-btn-comprar:disabled { opacity: .7; cursor: wait; }

/* ── Vazio ────────────────────────────────────────────── */
.cs-produtos-vazio {
    text-align: center;
    padding: 60px 20px;
    color: var(--cs-site-texto-suave);
}
.cs-produtos-vazio a {
    display: inline-block;
    margin-top: 12px;
    color: var(--cs-site-primaria);
    text-decoration: underline;
}

/* ── Paginação ───────────────────────────────────────── */
.cs-paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
    padding-bottom: 8px;
}
.cs-pag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: var(--cs-site-fundo);
    color: var(--cs-site-texto);
    font-size: var(--cs-font-body-sm);
    font-weight: 500;
    border: 1px solid var(--cs-site-borda);
    border-radius: 8px;
    text-decoration: none;
    transition: all .15s;
}
.cs-pag-btn:hover {
    background: var(--cs-site-primaria);
    color: #fff;
    border-color: var(--cs-site-primaria);
}
.cs-pag-atual {
    background: var(--cs-site-primaria);
    color: #fff;
    border-color: var(--cs-site-primaria);
    font-weight: 700;
}
.cs-pag-dots {
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto-suave);
    padding: 0 4px;
}

/* ══ PRODUTO — Página Individual ═══════════════════════ */
.cs-produto-detalhe {
    display: flex;
    gap: 40px;
    border: 2px solid var(--cs-site-clara);
    border-radius: 8px;
    padding: 30px;
}

/* ── Galeria ─────────────────────────────────────────── */
.cs-produto-galeria {
    flex: 0 0 480px;
    max-width: 480px;
}
.cs-produto-imagem-principal {
    border-radius: 12px;
    overflow: hidden;
    background: var(--cs-site-neutro);
    margin-bottom: 12px;
}
.cs-produto-imagem-principal img {
    width: 100%;
    height: auto;
    object-fit: contain;
    aspect-ratio: 1/1;
}
.cs-produto-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cs-produto-thumb {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: var(--cs-site-neutro);
    transition: border-color .15s;
}
.cs-produto-thumb:hover,
.cs-produto-thumb.cs-thumb-ativo {
    border-color: var(--cs-site-primaria);
}
.cs-produto-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Info ─────────────────────────────────────────────── */
.cs-produto-info {
    flex: 1;
    min-width: 0;
}
.cs-produto-titulo {
    font-size: var(--cs-font-h2);
    font-weight: 800;
    color: var(--cs-site-primaria);
    margin-bottom: 8px;
    line-height: 1.3;
}
.cs-produto-sku {
    font-size: var(--cs-font-small);
    color: var(--cs-site-texto-suave);
    margin-bottom: 20px;
}

/* ── Mini-cards de ícones (página produto) ────────────── */
.cs-produto-icones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px;
    background: var(--cs-site-neutro);
    border-radius: 10px;
    border: 1px solid var(--cs-site-borda);
}
.cs-produto-icone-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cs-font-label);
    font-weight: 500;
    color: var(--cs-site-texto);
    padding: 6px 12px;
    background: var(--cs-site-fundo);
    border-radius: 6px;
    border: 1px solid var(--cs-site-borda);
}
.cs-produto-icone-item img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* ── Preços (estilo v3) ──────────────────────────────── */
.cs-produto-precos {
    margin-bottom: 24px;
}
.cs-produto-preco-pix {
    font-size: var(--cs-font-preco-lg);
    font-weight: 800;
    color: var(--cs-site-secundaria);
    display: block;
    line-height: 1.2;
}
.cs-produto-preco-pix small {
    font-size: var(--cs-font-body-sm);
    font-weight: 600;
}
.cs-produto-preco-normal {
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto-suave);
    display: block;
    margin-top: 4px;
}
.cs-produto-preco-parcelas {
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto-suave);
    display: block;
    margin-top: 2px;
}
.cs-produto-preco-parcelas svg {
    vertical-align: middle;
    margin-left: 4px;
    color: var(--cs-site-texto-suave);
}

/* ── Atributos (tabela informação adicional) ─────────── */
.cs-produto-info-adicional {
    margin-top: 30px;
    border: 2px solid var(--cs-site-clara);
    border-radius: 8px;
    padding: 24px;
}
.cs-produto-info-adicional h2 {
    font-size: var(--cs-font-h3);
    font-weight: 700;
    color: var(--cs-site-primaria);
    margin-bottom: 16px;
}
.cs-produto-info-tabela {
    width: 100%;
    border-collapse: collapse;
}
.cs-produto-info-tabela tr:nth-child(even) {
    background: var(--cs-site-neutro);
}
.cs-produto-info-tabela th,
.cs-produto-info-tabela td {
    padding: 10px 16px;
    text-align: left;
    font-size: var(--cs-font-body-sm);
    border-bottom: 1px solid var(--cs-site-borda);
}
.cs-produto-info-tabela th {
    font-weight: 600;
    color: var(--cs-site-texto);
    width: 200px;
}
.cs-produto-info-tabela td {
    color: var(--cs-site-texto-suave);
}

/* ── Botão comprar ───────────────────────────────────── */
.cs-produto-acoes {
    margin-top: 8px;
}
.cs-produto-btn-comprar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: var(--cs-site-primaria);
    color: #fff;
    font-size: var(--cs-font-body);
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.cs-produto-btn-comprar:hover {
    background: var(--cs-site-secundaria);
    transform: translateY(-1px);
}

/* ── Descrição completa ──────────────────────────────── */
.cs-produto-descricao {
    margin-top: 30px;
    border-top: 2px solid var(--cs-site-borda);
    padding-top: 24px;
}
.cs-produto-descricao h2 {
    font-size: var(--cs-font-h3);
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--cs-site-primaria);
}

/* ══ CARRINHO ═══════════════════════════════════════════ */
.cs-carrinho-carregando {
    text-align: center;
    padding: 60px 20px;
    color: var(--cs-site-texto-suave);
    font-size: var(--cs-font-body-sm);
}
.cs-carrinho-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.cs-carrinho-itens {
    flex: 1;
    min-width: 0;
}
.cs-carrinho-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    margin-bottom: 12px;
    border: 2px solid var(--cs-site-clara);
    border-radius: 8px;
}
.cs-carrinho-item-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--cs-site-neutro);
}
.cs-carrinho-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cs-carrinho-item-info {
    flex: 1;
    min-width: 0;
}
.cs-carrinho-item-titulo {
    font-size: var(--cs-font-body-sm);
    font-weight: 600;
    color: var(--cs-site-primaria);
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}
.cs-carrinho-item-titulo:hover { color: var(--cs-site-secundaria); }
.cs-carrinho-item-sku {
    font-size: var(--cs-font-tiny);
    color: var(--cs-site-texto-suave);
    display: block;
}
.cs-carrinho-item-preco-un {
    font-size: var(--cs-font-small);
    color: var(--cs-site-texto-suave);
}
.cs-carrinho-item-qtd {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cs-carrinho-qtd-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--cs-site-borda);
    border-radius: 6px;
    background: var(--cs-site-fundo);
    cursor: pointer;
    font-size: var(--cs-font-body);
    font-weight: 700;
    color: var(--cs-site-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.cs-carrinho-qtd-btn:hover:not(:disabled) {
    background: var(--cs-site-clara);
    border-color: var(--cs-site-primaria);
}
.cs-carrinho-qtd-btn:disabled { opacity: .4; cursor: default; }
.cs-carrinho-qtd-num {
    font-size: var(--cs-font-body-sm);
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}
.cs-carrinho-item-subtotal {
    font-size: var(--cs-font-body);
    font-weight: 700;
    color: var(--cs-site-secundaria);
    white-space: nowrap;
    min-width: 100px;
    text-align: right;
}
.cs-carrinho-item-remover {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cs-site-texto-suave);
    padding: 4px;
    border-radius: 4px;
    transition: color .15s;
}
.cs-carrinho-item-remover:hover { color: var(--cs-cor-erro); }

/* ── Resumo lateral ──────────────────────────────────── */
.cs-carrinho-resumo {
    width: 340px;
    flex-shrink: 0;
    padding: 24px;
    background: var(--cs-site-fundo);
    border: 2px solid var(--cs-site-clara);
    border-radius: 8px;
}
.cs-carrinho-resumo h3 {
    font-size: var(--cs-font-h3);
    font-weight: 700;
    color: var(--cs-site-primaria);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--cs-site-primaria);
}
.cs-carrinho-resumo-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto);
}
.cs-carrinho-resumo-linha > span { color: var(--cs-site-texto-suave); }
.cs-carrinho-resumo-linha strong { color: var(--cs-site-texto-suave); }
.cs-linha-subtotal > span,
.cs-linha-subtotal strong { color: var(--cs-site-texto); }
.cs-linha-desconto span,
.cs-linha-desconto strong { color: var(--cs-cor-desconto) !important; }
.cs-carrinho-resumo-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
    margin-top: 12px;
    border-top: 2px solid var(--cs-site-borda);
    font-size: var(--cs-font-h3);
    color: var(--cs-site-secundaria);
}
.cs-carrinho-resumo-total strong {
    font-size: var(--cs-font-preco-lg);
    color: var(--cs-site-secundaria);
}

/* ── Frete box ───────────────────────────────────────── */
.cs-carrinho-frete-box {
    padding: 12px 0;
    border-top: 1px solid var(--cs-site-borda);
    margin-top: 8px;
}
.cs-carrinho-frete-box label {
    font-size: var(--cs-font-label);
    font-weight: 600;
    color: var(--cs-site-texto);
    margin-bottom: 8px;
    display: block;
}
.cs-carrinho-cep-row {
    display: flex;
    gap: 8px;
}
.cs-carrinho-cep-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--cs-site-borda);
    border-radius: 6px;
    font-size: var(--cs-font-body-sm);
    background: var(--cs-site-fundo);
}
.cs-carrinho-cep-input:focus {
    outline: none;
    border-color: var(--cs-site-primaria);
}
.cs-carrinho-cep-btn {
    padding: 8px 16px;
    background: var(--cs-site-primaria);
    color: #fff;
    font-size: var(--cs-font-label);
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.cs-carrinho-cep-btn:hover { background: var(--cs-site-secundaria); }
.cs-carrinho-cep-btn:disabled { opacity: .6; cursor: wait; }
.cs-carrinho-frete-prazo {
    font-size: var(--cs-font-small);
    color: var(--cs-site-texto-suave);
    margin-top: 6px;
}
.cs-carrinho-frete-erro {
    font-size: var(--cs-font-small);
    color: var(--cs-cor-erro);
    margin-top: 6px;
}

/* ── Botões carrinho ─────────────────────────────────── */
.cs-carrinho-btn-checkout {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px;
    background: var(--cs-site-primaria);
    color: #fff;
    font-size: var(--cs-font-body);
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    margin-top: 20px;
    transition: filter .15s;
}
.cs-carrinho-btn-checkout:hover { background: var(--cs-site-secundaria); }
.cs-carrinho-continuar {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: var(--cs-font-label);
    color: var(--cs-site-primaria);
    text-decoration: none;
}
.cs-carrinho-continuar:hover { text-decoration: underline; }

/* ══ CHECKOUT ═══════════════════════════════════════════ */
.cs-checkout-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.cs-checkout-form {
    flex: 1;
    padding: 32px;
    background: var(--cs-site-fundo);
    border: 2px solid var(--cs-site-clara);
    border-radius: 8px;
}
.cs-checkout-form h2 {
    font-size: var(--cs-font-titulo-pg);
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--cs-site-primaria);
}
.cs-checkout-form h3 {
    font-size: var(--cs-font-body);
    font-weight: 600;
    color: var(--cs-site-primaria);
    margin-bottom: 12px;
}
.cs-checkout-row {
    display: flex;
    gap: 12px;
}
.cs-checkout-campo {
    flex: 1;
    margin-bottom: 14px;
}
.cs-checkout-campo label {
    display: block;
    font-size: var(--cs-font-label);
    font-weight: 600;
    color: var(--cs-site-texto);
    margin-bottom: 4px;
}
.cs-checkout-campo input,
.cs-checkout-campo select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--cs-site-texto-suave);
    border-radius: 8px;
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto);
    background: var(--cs-site-fundo);
    outline: none;
    transition: border-color .15s;
}
.cs-checkout-campo input::placeholder {
    color: var(--cs-site-texto-suave);
}
.cs-checkout-campo input:focus,
.cs-checkout-campo select:focus {
    border-color: var(--cs-site-primaria);
}

/* ── Pagamento opções ────────────────────────────────── */
.cs-checkout-pgto-opcoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cs-checkout-pgto-opcao {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--cs-site-borda);
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s;
}
.cs-checkout-pgto-opcao:hover {
    border-color: var(--cs-site-primaria);
}
.cs-checkout-pgto-opcao.cs-pgto-selecionado {
    border-color: var(--cs-site-primaria);
    background: var(--cs-site-clara);
}
.cs-checkout-pgto-opcao input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--cs-site-primaria);
}
.cs-checkout-pgto-opcao div { display: flex; flex-direction: column; gap: 2px; }
.cs-checkout-pgto-opcao strong { font-size: var(--cs-font-body-sm); color: var(--cs-site-texto); }
.cs-checkout-pgto-opcao span { font-size: var(--cs-font-small); color: var(--cs-site-texto-suave); }

.cs-checkout-erro {
    color: var(--cs-alerta-erro-texto);
    font-size: var(--cs-font-body-sm);
    margin-top: 12px;
    padding: 10px;
    background: var(--cs-alerta-erro-bg);
    border-radius: 8px;
}

/* ── Resumo item checkout ────────────────────────────── */
.cs-checkout-resumo-item {
    display: flex;
    justify-content: space-between;
    font-size: var(--cs-font-label);
    padding: 6px 0;
    border-bottom: 1px solid var(--cs-site-borda);
}
.cs-checkout-resumo-item > span {
    color: var(--cs-site-texto-suave);
    flex: 1;
}
.cs-checkout-resumo-item strong {
    color: var(--cs-site-texto);
}

/* ── Sucesso ─────────────────────────────────────────── */
.cs-checkout-sucesso {
    text-align: center;
    padding: 60px 20px;
    background: var(--cs-site-fundo);
    border-radius: 15px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.cs-checkout-sucesso-icone {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--cs-cor-sucesso);
    color: #fff;
    font-size: var(--cs-font-hero);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.cs-checkout-sucesso h2 {
    font-size: var(--cs-font-preco-xl);
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--cs-site-texto);
}
.cs-checkout-pix {
    margin-top: 24px;
    padding: 24px;
    background: var(--cs-site-clara);
    border-radius: 12px;
}
.cs-checkout-pix h3 { margin-bottom: 16px; }
.cs-checkout-pix-qr {
    max-width: 250px;
    margin: 0 auto 16px;
    border-radius: 12px;
}
.cs-checkout-pix-code {
    width: 100%;
    min-height: 60px;
    padding: 10px;
    border: 1px solid var(--cs-site-borda);
    border-radius: 8px;
    font-size: var(--cs-font-tiny);
    font-family: monospace;
    resize: none;
    background: var(--cs-site-fundo);
}
.cs-checkout-pix-legenda {
    font-size: var(--cs-font-small);
    color: var(--cs-site-texto-suave);
}

/* ── Formulário cartão ─────────────────────────────────── */
.cs-checkout-cartao {
    margin-top: 20px;
    background: var(--cs-site-neutro);
    border: 1px solid var(--cs-site-borda);
    border-radius: 12px;
    padding: 20px;
}
.cs-checkout-cartao h4 {
    font-size: var(--cs-font-body-sm);
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--cs-site-texto);
}
.cs-checkout-cartao-campo {
    margin-bottom: 12px;
}
.cs-checkout-cartao-campo:last-child { margin-bottom: 0; }
.cs-checkout-cartao-campo label,
.cs-checkout-cartao-row label {
    font-size: var(--cs-font-label);
    font-weight: 500;
    color: var(--cs-site-texto-suave);
    display: block;
    margin-bottom: 4px;
}
.cs-checkout-cartao-campo input,
.cs-checkout-cartao-campo select,
.cs-checkout-cartao-row input,
.cs-checkout-cartao-row select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cs-site-borda);
    border-radius: 8px;
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto);
    background: var(--cs-site-fundo);
}
.cs-checkout-cartao-campo input:focus,
.cs-checkout-cartao-campo select:focus,
.cs-checkout-cartao-row input:focus,
.cs-checkout-cartao-row select:focus {
    outline: none;
    border-color: var(--cs-site-primaria);
}
.cs-checkout-cartao-campo .cs-cartao-bandeira {
    font-size: var(--cs-font-tiny);
    color: var(--cs-site-texto-suave);
    margin: 4px 0 0;
}
.cs-checkout-cartao-campo input.cs-cartao-numero {
    letter-spacing: 1px;
}
.cs-checkout-cartao-campo input.cs-cartao-cvv {
    text-align: center;
}
.cs-checkout-cartao-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.cs-checkout-cartao-row > div { flex: 1; }
.cs-checkout-cartao-row > div.cs-cartao-cvv-col { flex: 0 0 100px; }

/* ── Alerta cartão de crédito ───────────────────────────── */
.cs-checkout-cartao-alerta {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    background: var(--cs-alerta-aviso-bg);
    border: 1px solid var(--cs-alerta-aviso-borda);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: var(--cs-font-small);
    color: var(--cs-alerta-aviso-texto);
    line-height: 1.5;
}
.cs-checkout-cartao-alerta svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Checkout inline layout helpers ────────────────────── */
.cs-checkout-form h3.cs-checkout-secao { margin-top: 24px; }
.cs-checkout-campo.cs-campo-cep { max-width: 140px; }
.cs-checkout-campo.cs-campo-uf { max-width: 80px; }
.cs-checkout-campo.cs-campo-endereco { flex: 3; }
.cs-checkout-campo.cs-campo-numero { max-width: 100px; }
.cs-checkout-campo input.cs-campo-readonly {
    background: var(--cs-site-neutro);
    cursor: not-allowed;
}
.cs-checkout-btn-finalizar {
    width: 100%;
    justify-content: center;
    margin-top: 24px;
}
.cs-checkout-resumo-mt { margin-top: 16px; }

/* ── Sucesso — status pagamento ────────────────────────── */
.cs-checkout-pgto-aprovado {
    color: var(--cs-cor-sucesso);
    font-weight: 600;
    font-size: var(--cs-font-body);
}
.cs-checkout-pgto-processando {
    color: var(--cs-cor-pendente);
    font-size: var(--cs-font-small);
}
.cs-checkout-sucesso-voltar {
    display: inline-block;
    margin-top: 20px;
    color: var(--cs-site-primaria);
}
.cs-checkout-sucesso-mt { margin-top: 16px; text-align: center; }
.cs-checkout-sucesso-boleto { margin-top: 16px; }

/* ══ DESIGN SYSTEM — Componentes Reutilizáveis ═══════════
   Classes universais "cs-" para uso em QUALQUER página.
   Evitar inline styles — sempre preferir estas classes.
   ══════════════════════════════════════════════════════════ */

/* ── Títulos de seção (h3 com barra primária) ──────────── */
.cs-titulo-secao {
    font-size: var(--cs-font-h3);
    font-weight: 700;
    color: var(--cs-site-primaria);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--cs-site-primaria);
}

/* ── Subtítulo (h2 destaque) ──────────────────────────── */
.cs-titulo-destaque {
    font-size: var(--cs-font-h2);
    font-weight: 700;
    color: var(--cs-site-secundaria);
    margin: 0;
}
.cs-titulo-destaque-sub {
    font-size: var(--cs-font-label);
    color: var(--cs-site-texto-suave);
}

/* ── Título de página interna (centralizado) ──────────── */
.cs-titulo-pagina {
    font-size: var(--cs-font-titulo-pg);
    font-weight: 700;
    color: var(--cs-site-primaria);
    margin: 0 0 8px;
}
.cs-subtitulo-pagina {
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto-suave);
    margin: 0 0 32px;
}

/* ── Botão primário (block, full-width) ───────────────── */
.cs-btn-primario {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px;
    background: var(--cs-site-primaria);
    color: #fff;
    font-size: var(--cs-font-body);
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, transform .1s;
}
.cs-btn-primario:hover { background: var(--cs-site-secundaria); }
.cs-btn-primario:disabled { opacity: .6; cursor: wait; }

/* ── Botão primário inline (auto-width) ───────────────── */
.cs-btn-primario-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: var(--cs-site-primaria);
    color: #fff;
    font-size: var(--cs-font-body);
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, transform .1s;
}
.cs-btn-primario-inline:hover { background: var(--cs-site-secundaria); transform: translateY(-1px); }
.cs-btn-primario-inline:disabled { opacity: .6; cursor: wait; }

/* ── Link de voltar / link secundário ─────────────────── */
.cs-link-voltar {
    display: inline-block;
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-primaria);
    text-decoration: none;
    margin-bottom: 24px;
}
.cs-link-voltar:hover { text-decoration: underline; }

/* ── Campo de formulário ──────────────────────────────── */
.cs-campo {
    margin-bottom: 14px;
}
.cs-campo label {
    display: block;
    font-size: var(--cs-font-label);
    font-weight: 600;
    color: var(--cs-site-texto);
    margin-bottom: 4px;
}
.cs-campo input,
.cs-campo select,
.cs-campo textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--cs-site-texto-suave);
    border-radius: 8px;
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto);
    background: var(--cs-site-fundo);
    outline: none;
    transition: border-color .15s;
}
.cs-campo input::placeholder,
.cs-campo textarea::placeholder {
    color: var(--cs-site-texto-suave);
}
.cs-campo input:focus,
.cs-campo select:focus,
.cs-campo textarea:focus {
    border-color: var(--cs-site-primaria);
}

/* ── Row de campos (side-by-side) ─────────────────────── */
.cs-campo-row {
    display: flex;
    gap: 12px;
}

/* ── Linha de resumo (chave — valor) ──────────────────── */
.cs-resumo-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto);
}
.cs-resumo-linha span { color: var(--cs-site-texto-suave); }
.cs-resumo-linha strong { color: var(--cs-site-texto); }
.cs-resumo-linha.cs-desconto span,
.cs-resumo-linha.cs-desconto strong { color: var(--cs-cor-desconto) !important; }

/* ── Linha de total ───────────────────────────────────── */
.cs-resumo-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
    margin-top: 12px;
    border-top: 2px solid var(--cs-site-borda);
    font-size: var(--cs-font-h3);
    color: var(--cs-site-secundaria);
}
.cs-resumo-total strong {
    font-size: var(--cs-font-preco-lg);
    color: var(--cs-site-secundaria);
}

/* ── Badge de status ──────────────────────────────────── */
.cs-badge {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: var(--cs-font-small);
    font-weight: 700;
    color: #fff;
    letter-spacing: .3px;
}

/* ── Classes de status (badge, ponto, qualquer elemento) ── */
.cs-status-pendente   { background: var(--cs-cor-pendente); }
.cs-status-pago       { background: var(--cs-cor-pago); }
.cs-status-preparando { background: var(--cs-cor-preparando); }
.cs-status-enviado    { background: var(--cs-cor-enviado); }
.cs-status-entregue   { background: var(--cs-cor-entregue); }
.cs-status-cancelado  { background: var(--cs-cor-cancelado); }

/* ── Alertas ──────────────────────────────────────────── */
.cs-alerta {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: var(--cs-font-body-sm);
}
.cs-alerta-erro {
    background: var(--cs-alerta-erro-bg);
    border: 1px solid var(--cs-alerta-erro-borda);
    color: var(--cs-alerta-erro-texto);
}
.cs-alerta-aviso {
    background: var(--cs-alerta-aviso-bg);
    border: 1px solid var(--cs-alerta-aviso-borda);
    color: var(--cs-alerta-aviso-texto);
}
.cs-alerta-sucesso {
    background: var(--cs-alerta-sucesso-bg);
    border: 1px solid var(--cs-alerta-sucesso-borda);
    color: var(--cs-alerta-sucesso-texto);
}
.cs-alerta-info {
    background: var(--cs-alerta-info-bg);
    border: 1px solid var(--cs-alerta-info-borda);
    color: var(--cs-alerta-info-texto);
}

/* ── Item com imagem (lista de itens/produtos) ────────── */
.cs-item-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--cs-site-borda);
}
.cs-item-row:last-child { border-bottom: none; }
.cs-item-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--cs-site-neutro);
    flex-shrink: 0;
}
.cs-item-info {
    flex: 1;
    min-width: 0;
}
.cs-item-titulo {
    font-size: var(--cs-font-body-sm);
    font-weight: 600;
    color: var(--cs-site-primaria);
}
.cs-item-detalhe {
    font-size: var(--cs-font-tiny);
    color: var(--cs-site-texto-suave);
    margin-top: 2px;
}
.cs-item-valores {
    text-align: right;
    white-space: nowrap;
}
.cs-item-qtd {
    font-size: var(--cs-font-small);
    color: var(--cs-site-texto-suave);
}
.cs-item-preco {
    font-size: var(--cs-font-body);
    font-weight: 700;
    color: var(--cs-site-secundaria);
}

/* ── Grid 2 colunas responsivo ────────────────────────── */
.cs-grid-2 {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 28px;
}
.cs-grid-2 > div {
    flex: 1;
    min-width: 250px;
}

/* ── Header do pedido (título + badge) ────────────────── */
.cs-pedido-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

/* ── Timeline de etapas ───────────────────────────────── */
.cs-timeline {
    display: flex;
    align-items: center;
    margin: 0 -4px 28px;
}
.cs-timeline-etapa {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cs-timeline-barra {
    display: flex;
    align-items: center;
    width: 100%;
}
.cs-timeline-linha { flex: 1; height: 3px; background: var(--cs-site-borda); }
.cs-timeline-linha.cs-ativo { background: var(--cs-site-primaria); }
.cs-timeline-linha.cs-oculto { background: transparent; }
.cs-timeline-ponto {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--cs-site-borda);
}
.cs-timeline-ponto.cs-ativo { background: var(--cs-site-primaria); }
.cs-timeline-label {
    font-size: var(--cs-font-tiny);
    font-weight: 500;
    color: var(--cs-site-texto-suave);
    margin-top: 8px;
}

/* ── Histórico (timeline vertical) ────────────────────── */
.cs-historico-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cs-site-borda);
}
.cs-historico-item:last-child { border-bottom: none; }
.cs-historico-ponto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cs-historico-texto {
    flex: 1;
    font-size: var(--cs-font-body-sm);
    font-weight: 600;
    color: var(--cs-site-texto);
}
.cs-historico-data {
    font-size: var(--cs-font-small);
    color: var(--cs-site-texto-suave);
    white-space: nowrap;
}

/* ── Endereço formatado ───────────────────────────────── */
.cs-endereco {
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto);
    line-height: 1.7;
}

/* ── Nota de data (pago em, enviado em) ───────────────── */
.cs-nota-data {
    font-size: var(--cs-font-small);
    margin-top: 8px;
}
.cs-nota-data-sucesso { color: var(--cs-cor-entregue); }
.cs-nota-data-info { color: var(--cs-cor-enviado); }

/* ── Formulário centralizado (max-width dentro da seção) ─ */
.cs-form-central {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 380px;
    margin: 0 auto;
}

/* ── Descrição centralizada (intro de módulos) ───────── */
.cs-descricao-central {
    text-align: center;
    margin-bottom: 40px;
    font-size: var(--cs-font-body-sm);
    line-height: 1.7;
    color: var(--cs-site-texto-suave);
}

/* ── Texto auxiliar vazio ─────────────────────────────── */
.cs-texto-vazio {
    font-size: var(--cs-font-body-sm);
    color: var(--cs-site-texto-suave);
    padding: 8px 0;
}

/* ══ RESPONSIVO ══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .cs-site-servicos-grid > * {
        flex: 0 0 calc(33.333% - 16px);
    }
    .cs-sim-grid { grid-template-columns: repeat(2, 1fr); }
    .cs-produtos-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .cs-produto-galeria { flex: 0 0 380px; max-width: 380px; }
    .cs-hero-conteudo { padding: 50px 30px; gap: 30px; }
    .cs-hero-imagem { width: 320px; }
    .cs-home-produtos-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .cs-home-produtos-filtros { gap: 16px; }
    .cs-home-fabricantes-titulo { font-size: var(--cs-font-h3); gap: 14px; }
}

@media (max-width: 768px) {
    /* Topbar — oculta no mobile (regras prontas p/ reativar) */
    .cs-site-topbar { display: none; padding: 10px 0; }
    .cs-site-topbar-cards { gap: 8px; justify-content: center; }
    .cs-site-topbar-card { font-size: 12px; }
    .cs-site-topbar-icone { width: 20px; height: 20px; }
    .cs-site-topbar-icone svg { width: 20px; height: 20px; }
    .cs-site-menu-desktop { display: none; }
    .cs-site-menu-toggle { display: flex; }
    .cs-site-logo-img { height: calc(var(--cs-topo-logo-altura, 60px) * 0.8); max-width: 160px; }
    .cs-site-logo-texto strong { font-size: var(--cs-font-h3); }
    .cs-site-topo-inner { padding: 12px 10px; gap: 12px; }
    .cs-site-acoes { gap: 10px; margin-left: auto; }
    .cs-site-busca-icone { width: 34px; height: 34px; }
    /* Tipo Loja — mobile */
    .cs-site-menu-loja-wrap { display: none; }
    .cs-site-busca-loja { display: none; }
    .cs-site-carrinho-loja-valor { display: none; }
    .cs-site-carrinho-loja { gap: 0; margin-left: auto; }
    /* Modelo 02 — mobile */
    .cs-site-topo-v2 { padding-top: 40px; padding-bottom: 40px; }
    .cs-site-topo-onda-top svg { height: 40px; }
    .cs-site-topo-v2 .cs-site-logo-card {
        padding: 10px 16px;
        border-radius: 0 0 14px 14px;
        margin: -12px 0 -12px 0;
    }
    .cs-site-topo-onda svg { height: 40px; }
    .cs-hero-carousel { height: 480px; }
    .cs-hero-conteudo {
        flex-direction: column-reverse;
        text-align: center;
        padding: 40px 20px;
    }
    .cs-hero-texto { max-width: 100%; }
    .cs-hero-descricao { max-width: 100%; margin-left: auto; margin-right: auto; }
    .cs-hero-imagem { width: 240px; margin-bottom: 10px; }
    .cs-hero-cta { margin: 0 auto; }
    .cs-hero-seta { width: 22px; height: 22px; }
    .cs-hero-seta-esq { left: 10px; }
    .cs-hero-seta-dir { right: 10px; }
    .cs-site-hero { padding: 50px 16px; }
    .cs-site-hero h1 { font-size: 26px; }
    .cs-site-hero p { font-size: 15px; }
    .cs-site-pagina-banner { padding: 32px 16px 28px; }
    .cs-site-pagina-banner-titulo { font-size: 24px; }
    .cs-site-pagina-breadcrumb { font-size: var(--cs-font-small); gap: 8px; }
    .cs-site-pagina-fundo { padding: 32px 0 50px; }
    .cs-site-pagina { padding: 32px 20px; border-radius: 15px; }
    .cs-site-pagina-imagem img { max-width: 100%; }
    .cs-site-pagina-conteudo { font-size: 15px; }
    .cs-site-pagina-conteudo h2 { font-size: 19px; }
    .cs-site-pagina-conteudo h3 { font-size: var(--cs-font-body); }
    .cs-site-servicos-grid { gap: 16px; }
    .cs-site-servicos-grid > * { flex: 0 0 calc(50% - 8px); }
    .cs-home-servicos { padding: 36px 0 44px; }
    .cs-home-servicos-titulo { font-size: var(--cs-font-h3); gap: 14px; margin-bottom: 24px; }
    .cs-home-servicos-tag { font-size: var(--cs-font-h3); }
    .cs-home-servicos-header { margin-bottom: 28px; }
    .cs-home-servicos-descricao-v2 { font-size: var(--cs-font-body-sm); }
    .cs-site-servico-card-v2-titulo { font-size: var(--cs-font-body-sm); }
    .cs-sim-grid { grid-template-columns: 1fr; gap: 16px; }
    .cs-sim-card { padding: 20px; }
    .cs-sim-resultado-valor { font-size: var(--cs-font-preco-xl); }
    .cs-sim-resultado-sugerido { font-size: var(--cs-font-preco-lg); }

    /* Produtos responsivo */
    .cs-filtros-chips { gap: 6px; }
    .cs-produtos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .cs-card-pix-preco { font-size: 17px; }
    .cs-produto-card-titulo { font-size: var(--cs-font-small); }
    .cs-produto-detalhe {
        flex-direction: column;
    }
    .cs-produto-galeria {
        flex: none;
        max-width: 100%;
    }
    .cs-produto-preco-pix { font-size: 22px; }
    .cs-produto-info-tabela th { width: 140px; }

    /* Produto detalhe responsivo */
    .cs-produto-detalhe { padding: 20px; }

    /* Carrinho/Checkout: wrapper transparente no mobile, cards independentes */
    .cs-site-pagina:has(.cs-carrinho-layout),
    .cs-site-pagina:has(.cs-checkout-layout) {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    /* Carrinho responsivo */
    .cs-carrinho-layout { flex-direction: column; gap: 16px; align-items: stretch; }
    .cs-carrinho-itens { background: var(--cs-site-fundo); border: 2px solid var(--cs-site-clara); border-radius: 8px; padding: 0 16px; }
    .cs-carrinho-resumo { width: 100%; }
    .cs-carrinho-item {
        flex-wrap: wrap; position: relative; padding: 16px 28px 16px 0; margin-bottom: 0;
        border: none; border-radius: 0; border-bottom: 1px solid var(--cs-site-borda);
    }
    .cs-carrinho-item:last-child { border-bottom: none; }
    .cs-carrinho-item-img { width: 64px; height: 64px; }
    .cs-carrinho-item-info { flex: 1 1 calc(100% - 80px); }
    .cs-carrinho-item-qtd { margin-top: 4px; }
    .cs-carrinho-item-subtotal { min-width: auto; margin-left: auto; margin-top: 4px; }
    .cs-carrinho-item-remover { position: absolute; top: 16px; right: 0; }

    /* Checkout responsivo — resumo primeiro */
    .cs-checkout-layout { flex-direction: column; gap: 16px; align-items: stretch; }
    .cs-checkout-layout > .cs-carrinho-resumo { order: -1; }
    .cs-checkout-form { padding: 20px; }
    .cs-checkout-row { flex-direction: column; gap: 0; }
    .cs-checkout-row .cs-checkout-campo { max-width: none !important; flex: 1 1 100% !important; }
    .cs-checkout-cartao-row { flex-direction: column !important; }
    .cs-checkout-cartao-row > div { flex: 1 1 100% !important; max-width: none !important; }

    /* Design System responsivo 768px */
    .cs-grid-2 { flex-direction: column; gap: 24px; }
    .cs-grid-2 > div { min-width: 0; }
    .cs-campo-row { flex-direction: column; gap: 0; }
    .cs-item-img { width: 64px; height: 64px; }
    .cs-timeline-label { font-size: var(--cs-font-badge); }
    .cs-home-produtos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .cs-home-produtos-filtros { grid-template-columns: 1fr !important; gap: 16px; }
    .cs-home-produtos-filtros > .cs-home-produtos-filtro:first-child { grid-column: auto; }
    .cs-home-produtos { padding: 32px 0 40px; }
    .cs-home-produtos-filtro-pill { flex: 0 0 calc(50% - 4px) !important; padding: 10px 6px; font-size: var(--cs-font-body-sm); }
    .cs-filtro-icone-item { padding: 6px; aspect-ratio: auto; height: 60px; }
    .cs-home-produtos-filtros > .cs-home-produtos-filtro:first-child .cs-filtro-icone-item { aspect-ratio: auto; height: 60px; }
    .cs-filtro-icone-img { max-height: 48px; width: auto; }
    .cs-filtro-icone-fallback { font-size: var(--cs-font-body-sm); }
    .cs-home-fabricantes { padding: 32px 0 40px; }
    .cs-home-fabricantes-titulo { font-size: var(--cs-font-h4); gap: 10px; }
    .cs-home-fabricantes-tag { font-size: var(--cs-font-h3); letter-spacing: 2px; }
    .cs-home-fabricantes-header { margin-bottom: 24px; }
    .cs-home-fabricantes-logo { max-height: 45px; }
}

@media (max-width: 480px) {
    .cs-hero-conteudo { padding: 30px 16px; }
    .cs-hero-titulo { font-size: 24px; }
    .cs-site-servicos-grid > * { flex: 0 0 100%; }
    .cs-home-servicos-titulo { font-size: 16px; gap: 10px; }
    .cs-home-servicos-descricao { font-size: 12px; }
    .cs-seta-slide { width: 22px; height: 22px; }
    .cs-home-servicos-slider { gap: 6px; }
    .cs-home-servicos-titulo { font-size: var(--cs-font-h4); }
    .cs-home-servicos-tag { font-size: var(--cs-font-h4); letter-spacing: 2px; }
    .cs-home-servicos-header { margin-bottom: 20px; }
    .cs-sim-card { padding: 16px; border-radius: 10px; }
    .cs-sim-card-icone { width: 34px; height: 34px; }
    .cs-produtos-grid { grid-template-columns: 1fr; }
    .cs-home-produtos-grid { grid-template-columns: 1fr; }
    /* produtos seta — usa cs-seta-slide */
    .cs-home-produtos-slider { gap: 6px; }
    .cs-home-produtos-titulo { font-size: var(--cs-font-h4); gap: 10px; }
    .cs-home-produtos-destaque-titulo { font-size: var(--cs-font-h4); gap: 10px; }
    .cs-produtos-toolbar { flex-wrap: wrap; gap: 8px; }
    .cs-busca-aberta .cs-produtos-busca-form { max-width: 200px; }
    .cs-produtos-busca-input { width: 140px; }
    .cs-produto-detalhe { padding: 16px; }
    .cs-produto-info-adicional { padding: 16px; }
    .cs-carrinho-item { gap: 10px; padding: 12px; }
    .cs-carrinho-item-img { width: 56px; height: 56px; }
    .cs-carrinho-resumo { padding: 16px; }
    .cs-checkout-form { padding: 16px; }
    .cs-checkout-pgto-opcao { padding: 12px; gap: 10px; }
    .cs-site-pagina { padding: 20px 16px; border-radius: 12px; }
    .cs-home-fabricantes { padding: 24px 0 30px; }
    .cs-home-fabricantes-slider { gap: 6px; }
    .cs-home-fabricantes-logo { max-height: 36px; }
    .cs-home-fabricantes-item { padding: 8px 10px; }
    .cs-home-fabricantes-titulo { font-size: var(--cs-font-h4); gap: 10px; }
    .cs-home-fabricantes-tag { font-size: var(--cs-font-h4); letter-spacing: 2px; }

    /* Design System responsivo 480px */
    .cs-item-img { width: 56px; height: 56px; }
    .cs-item-row { gap: 10px; }
    .cs-titulo-secao { font-size: var(--cs-font-body); }
    .cs-titulo-destaque { font-size: var(--cs-font-h3); }
    .cs-resumo-total strong { font-size: var(--cs-font-h3); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GALERIA DE FOTOS — Lightbox + estilo fotos
   ═══════════════════════════════════════════════════════════════════════════════ */
.cs-home-galeria .cs-home-fabricantes-item {
    padding: 8px;
}
.cs-home-galeria .cs-home-fabricantes-logo {
    max-height: none;
    width: 100%;
    height: auto;
    border-radius: 12px;
    aspect-ratio: 4/3;
    object-fit: cover;
    cursor: pointer;
    transition: transform .25s;
}
.cs-home-galeria .cs-home-fabricantes-logo:hover {
    transform: scale(1.03);
}
.cs-home-galeria.cs-home-fabricantes--escuro .cs-home-fabricantes-logo {
    filter: none;
    opacity: 1;
}
.cs-home-galeria.cs-home-fabricantes--escuro .cs-home-fabricantes-item:hover .cs-home-fabricantes-logo {
    filter: none;
    opacity: 1;
}

/* Lightbox */
.cs-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,.4);
}
.cs-lightbox-fechar {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,.15);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background .2s;
}
.cs-lightbox-fechar:hover { background: rgba(255,255,255,.3); }
.cs-lightbox-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.15);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background .2s;
}
.cs-lightbox-seta:hover { background: rgba(255,255,255,.3); }
.cs-lightbox-seta--prev { left: 16px; }
.cs-lightbox-seta--next { right: 16px; }
@media (max-width: 1024px) {
    .cs-home-galeria .cs-home-fabricantes-logo { max-height: none; }
}
@media (max-width: 480px) {
    .cs-home-galeria .cs-home-fabricantes-logo { max-height: none; }
    .cs-lightbox-seta { width: 36px; height: 36px; }
    .cs-lightbox-fechar { width: 34px; height: 34px; top: 10px; right: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SEÇÃO QUEM SOMOS — Homepage
   ══════════════════════════════════════════════════════════════════════════ */
.cs-home-quem-somos { padding: 60px 0 70px; }
.cs-home-quem-somos--claro { background: linear-gradient(to bottom, var(--cs-site-fundo) 0%, var(--cs-site-clara) 100%); }
.cs-home-quem-somos--escuro { background: linear-gradient(to bottom right, var(--cs-site-primaria) 0%, var(--cs-site-secundaria) 100%); }

/* ── Modelo 01 (padrão) ─────────────────────────────────────── */
.cs-home-qs-content {
    display: flex;
    gap: 50px;
    align-items: center;
}
.cs-home-qs-texto { flex: 1; }
.cs-home-qs-imagem { flex: 0 0 45%; }
.cs-home-qs-imagem img {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    max-height: 420px;
}

.cs-home-qs-subtitulo {
    display: block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cs-site-texto-suave);
    margin-bottom: 8px;
}
.cs-home-qs-nome {
    font-size: 36px;
    font-weight: 800;
    color: var(--cs-site-texto);
    margin: 0 0 16px;
    line-height: 1.2;
    position: relative;
    padding-bottom: 16px;
}
.cs-home-qs-nome::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--cs-site-secundaria);
    border-radius: 2px;
}
.cs-home-qs-destaque {
    font-size: 16px;
    line-height: 1.7;
    color: var(--cs-site-texto-suave);
    margin: 0 0 24px;
}
.cs-home-qs-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--cs-site-primaria);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity .2s, transform .15s;
}
.cs-home-qs-cta:hover { opacity: .9; transform: translateY(-1px); }
.cs-home-qs-cta--whatsapp { background: #25d366; }

/* ── Modelo 02 — imagem atrás, texto centralizado sobre overlay ── */
.cs-home-qs-content--v2 {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 380px;
}
.cs-home-qs-content--v2 .cs-home-qs-imagem {
    position: absolute;
    left: 0;
    right: 0;
    top: -60%;
    flex: none;
    width: 100%;
    height: 160%;
    will-change: transform;
}
.cs-home-qs-content--v2 .cs-home-qs-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    max-height: none;
}
.cs-home-qs-content--v2 .cs-home-qs-imagem::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 100%);
}
.cs-home-qs-content--v2 .cs-home-qs-texto {
    position: relative;
    z-index: 1;
    padding: 50px 50px;
    max-width: 60%;
}
.cs-home-qs-content--v2 .cs-home-qs-subtitulo {
    color: rgba(255,255,255,.7);
    font-size: 12px;
    letter-spacing: 3px;
}
.cs-home-qs-content--v2 .cs-home-qs-nome {
    color: #fff;
    padding-bottom: 0;
}
.cs-home-qs-content--v2 .cs-home-qs-nome::after { display: none; }
.cs-home-qs-content--v2 .cs-home-qs-destaque { color: rgba(255,255,255,.85); }
.cs-home-qs-content--v2 .cs-home-qs-cta {
    background: #fff;
    color: var(--cs-site-primaria);
}
.cs-home-qs-content--v2 .cs-home-qs-cta--whatsapp { background: #25d366; color: #fff; }

/* Modelo 02 + Escuro (overlay usa cor primária) */
.cs-home-quem-somos--escuro .cs-home-qs-content--v2 .cs-home-qs-imagem::after {
    background: linear-gradient(to right, var(--cs-site-primaria) 0%, rgba(0,0,0,.15) 100%);
}

/* ── Escuro (Modelo 01) ─────────────────────────────────────── */
.cs-home-quem-somos--escuro .cs-home-qs-subtitulo { color: rgba(255,255,255,.6); }
.cs-home-quem-somos--escuro .cs-home-qs-nome { color: #fff; }
.cs-home-quem-somos--escuro .cs-home-qs-nome::after { background: rgba(255,255,255,.4); }
.cs-home-quem-somos--escuro .cs-home-qs-destaque { color: rgba(255,255,255,.75); }
.cs-home-quem-somos--escuro .cs-home-qs-cta { background: #fff; color: var(--cs-site-primaria); }
.cs-home-quem-somos--escuro .cs-home-qs-cta--whatsapp { background: #25d366; color: #fff; }

/* ── Onde Estamos (dentro de Quem Somos) ────────────────────── */
.cs-home-oe-area {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid var(--cs-site-borda);
}
.cs-home-oe-subtitulo {
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--cs-site-texto-suave);
    margin-bottom: 24px;
}
.cs-home-oe-cards {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
.cs-home-oe-card {
    flex: 0 0 calc(33.333% - 14px);
    max-width: calc(33.333% - 14px);
    background: var(--cs-site-fundo);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .2s;
}
.cs-home-oe-cards--1 .cs-home-oe-card { flex: 0 0 33.333%; max-width: 33.333%; }
.cs-home-oe-cards--2 .cs-home-oe-card { flex: 0 0 calc(33.333% - 10px); max-width: calc(33.333% - 10px); }
.cs-home-oe-card:hover {
    transform: translateY(-3px);
}
.cs-home-oe-card-foto {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.cs-home-oe-card-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.cs-home-oe-card:hover .cs-home-oe-card-foto img { transform: scale(1.05); }
.cs-home-oe-card-cidade {
    font-size: 15px;
    font-weight: 700;
    color: var(--cs-site-texto);
    margin: 12px 16px 3px;
}
.cs-home-oe-card-endereco {
    font-size: 13px;
    color: var(--cs-site-texto-suave);
    margin: 0 16px 14px;
    line-height: 1.5;
}

/* Escuro — Onde Estamos */
.cs-home-quem-somos--escuro .cs-home-oe-area { border-top-color: rgba(255,255,255,.1); }
.cs-home-quem-somos--escuro .cs-home-oe-subtitulo { color: rgba(255,255,255,.5); }
.cs-home-quem-somos--escuro .cs-home-oe-card {
    background: rgba(255,255,255,.08);
}
.cs-home-quem-somos--escuro .cs-home-oe-card-cidade { color: #fff; }
.cs-home-quem-somos--escuro .cs-home-oe-card-endereco { color: rgba(255,255,255,.7); }

/* Modelo 02 — Onde Estamos dentro do card arredondado */
.cs-home-qs-content--v2 ~ .cs-home-oe-area {
    border-top: none;
    margin-top: 40px;
    padding-top: 0;
}

/* ── Responsivo ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cs-home-qs-content { flex-direction: column-reverse; gap: 30px; }
    .cs-home-qs-imagem { flex: none; width: 100%; }
    .cs-home-qs-texto { text-align: center; }
    .cs-home-qs-nome { font-size: 28px; }
    .cs-home-qs-nome::after { left: 50%; transform: translateX(-50%); }
    .cs-home-quem-somos { padding: 40px 0 50px; }
    .cs-home-oe-area { margin-top: 30px; padding-top: 24px; }
    .cs-home-oe-card { flex: 0 0 100% !important; max-width: 100% !important; }

    /* Modelo 02 mobile */
    .cs-home-qs-content--v2 { min-height: 300px; }
    .cs-home-qs-content--v2 .cs-home-qs-texto {
        max-width: 100%;
        padding: 30px 24px;
        text-align: center;
    }
    .cs-home-qs-content--v2 .cs-home-qs-imagem::after {
        background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 100%);
    }
    .cs-home-qs-content--v2 .cs-home-qs-texto {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 300px;
    }
    .cs-home-qs-content--v2 .cs-home-qs-nome::after { display: none; }
}