/* =============================================================
   SOLUÇÕES IMPER — E-COMMERCE STOREFRONT
   Sprint E.5 | Meet Platform
   ============================================================= */

/* **** VARIABLES **** */
:root {
    --ec-primary: #e67e22;
    --ec-primary-dark: #c56312;
    --ec-primary-light: #f39c12;
    --ec-dark: #1a2332;
    --ec-dark-soft: #2c3e50;
    --ec-accent: #f1c40f;
    --ec-success: #16a34a;
    --ec-danger: #dc2626;
    --ec-warning: #f59e0b;

    --ec-white: #ffffff;
    --ec-bg: #fafaf7;
    --ec-surface: #ffffff;
    --ec-border: #e5e5e0;
    --ec-border-soft: #f0ede8;
    --ec-text: #1a2332;
    --ec-text-muted: #6b7280;
    --ec-text-soft: #9ca3af;

    --ec-font-title: 'Montserrat', -apple-system, sans-serif;
    --ec-font-body: 'Inter', -apple-system, sans-serif;

    --ec-shadow-sm: 0 1px 2px rgba(26, 35, 50, 0.04);
    --ec-shadow: 0 2px 8px rgba(26, 35, 50, 0.06);
    --ec-shadow-lg: 0 12px 32px rgba(26, 35, 50, 0.08);
    --ec-shadow-hover: 0 16px 48px rgba(230, 126, 34, 0.12);

    --ec-radius: 12px;
    --ec-radius-sm: 8px;
    --ec-radius-lg: 20px;
    --ec-radius-pill: 999px;

    --ec-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ec-transition: all 0.25s var(--ec-ease);

    --ec-max: 1360px;
}

/* **** RESET **** */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--ec-font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ec-text);
    background: var(--ec-bg);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }

.ec-container {
    max-width: var(--ec-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* **** HEADER **** */
.ec-header {
    position: relative;
    z-index: 100;
    background: var(--ec-white);
    border-bottom: 1px solid var(--ec-border);
}
.ec-header__topbar {
    background: var(--ec-dark);
    color: var(--ec-white);
    font-size: 13px;
    padding: 8px 0;
}
.ec-header__topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.ec-header__topbar-left { display: flex; gap: 20px; align-items: center; }
.ec-header__topbar-left a { opacity: 0.85; transition: opacity 0.2s; }
.ec-header__topbar-left a:hover { opacity: 1; color: var(--ec-primary-light); }
.ec-header__topbar .fa-solid, .ec-header__topbar .fa-brands { margin-right: 6px; color: var(--ec-primary-light); }

.ec-header__main {
    display: flex;
    align-items: center;
    padding: 20px 0;
    gap: 32px;
}
.ec-header__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ec-font-title);
    font-weight: 800;
    font-size: 22px;
    color: var(--ec-dark);
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.ec-header__logo-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--ec-primary) 0%, var(--ec-primary-dark) 100%);
    color: var(--ec-white);
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 20px;
    box-shadow: var(--ec-shadow);
}
.ec-header__logo-text small {
    display: block;
    font-family: var(--ec-font-body);
    font-size: 11px;
    font-weight: 500;
    color: var(--ec-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: -2px;
}
/* Logo real (img) — header e footer */
.ec-header__logo-img {
    display: block;
    height: 76px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
}
.ec-header__logo-img--footer {
    height: 44px;
    max-width: 220px;
    background: var(--ec-white);
    padding: 8px 14px;
    border-radius: 8px;
}

.ec-header__search {
    flex: 1;
    max-width: 540px;
    position: relative;
}
.ec-header__search input {
    width: 100%;
    padding: 12px 48px 12px 20px;
    font-family: inherit;
    font-size: 14px;
    /* Fix 2026-04-30: <input> NAO herda color por default em browsers modernos.
       Combinado com meta color-scheme: light dark, dark mode do OS fazia o
       browser renderizar inputs com texto branco — invisivel no fundo branco
       do :focus. Cores explicitas resolvem. */
    color: var(--ec-text);
    border: 2px solid var(--ec-border);
    border-radius: var(--ec-radius-pill);
    background: var(--ec-bg);
    transition: var(--ec-transition);
    outline: none;
}
.ec-header__search input::placeholder {
    color: var(--ec-text-muted);
    opacity: 1; /* Firefox usa opacity 0.54 por default */
}
.ec-header__search input:focus {
    color: var(--ec-text);
    border-color: var(--ec-primary);
    background: var(--ec-white);
    box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.08);
}
/* Autofill amarelo do Chrome em dark mode tambem fica invisivel — forca cor */
.ec-header__search input:-webkit-autofill,
.ec-header__search input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ec-text);
    -webkit-box-shadow: 0 0 0 1000px var(--ec-white) inset;
}
.ec-header__search button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ec-primary);
    color: var(--ec-white);
    display: grid;
    place-items: center;
    transition: var(--ec-transition);
}
.ec-header__search button:hover { background: var(--ec-primary-dark); }

.ec-header__actions { display: flex; align-items: center; gap: 8px; }
.ec-header__cart {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: var(--ec-dark);
    color: var(--ec-white);
    border-radius: var(--ec-radius-pill);
    font-weight: 600;
    font-size: 14px;
    transition: var(--ec-transition);
    position: relative;
}
.ec-header__cart:hover { background: var(--ec-primary); transform: translateY(-1px); }
.ec-header__cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--ec-primary);
    color: var(--ec-white);
    border-radius: 50%;
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid var(--ec-white);
}

/* Bloco de atendimento — telefone do especialista, ancorado a direita.
   Só aparece em telas largas (>=1200px), que é onde sobrava o vazio à direita
   do botão Cotação; abaixo disso o header é apertado e o bloco fica oculto
   (o telefone segue na topbar e no drawer). Ativado no @media min-width:1200px
   mais abaixo. margin-left:auto empurra o cluster direito (atendimento +
   Cotação) para a borda e absorve o espaço livre do header. flex-shrink:0 para
   só a busca encolher. Renderiza no HTML só se o tenant tem telefone. */
.ec-header__contact {
    display: none;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--ec-dark);
    white-space: nowrap;
    transition: var(--ec-transition);
}
.ec-header__contact-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(230, 126, 34, 0.12);
    color: var(--ec-primary);
    font-size: 17px;
    flex-shrink: 0;
    transition: var(--ec-transition);
}
.ec-header__contact:hover .ec-header__contact-icon {
    background: var(--ec-primary);
    color: var(--ec-white);
}
.ec-header__contact-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.ec-header__contact-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--ec-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* Cada linha de telefone é um link próprio (fixo → tel:, WhatsApp → wa.me) —
   o bloco deixou de ser um <a> único quando o WhatsApp entrou (2026-08-03). */
.ec-header__contact-phone {
    font-family: var(--ec-font-title);
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-dark);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.ec-header__contact-phone:hover { color: var(--ec-primary); }
.ec-header__contact-phone--wa i { color: #25d366; }
/* Só em telas largas: exibe o atendimento e trava a busca em 540px (flex-grow 0),
   assim o espaço livre migra para a margem automática do bloco e o cluster
   direito cola na borda — sem o vazio após o Cotação. Abaixo de 1200px a busca
   volta a crescer (flex:1) e o bloco fica oculto, evitando aperto no header. */
@media (min-width: 1200px) {
    .ec-header__contact { display: flex; }
    .ec-header__search { flex: 0 1 540px; }
}

/* Nav categorias */
.ec-nav {
    border-top: 1px solid var(--ec-border-soft);
    background: var(--ec-white);
}
.ec-nav__list {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.ec-nav__list::-webkit-scrollbar { display: none; }
.ec-nav__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ec-text);
    border-bottom: 3px solid transparent;
    transition: var(--ec-transition);
    white-space: nowrap;
}
.ec-nav__link:hover {
    color: var(--ec-primary);
    border-bottom-color: var(--ec-primary);
}
.ec-nav__link--all {
    color: var(--ec-primary);
    font-weight: 600;
}

/* =============================================================================
   MENU PRINCIPAL (2026-08-31) — Home · Empresa · Fábricas/Marcas ▾ ·
   Produtos ▾ · Promoções · Blog · Localização · Contato.
   Mesma estrutura do site que o cliente já tem no ar.

   ⚠️ NÃO reaproveitar `.ec-nav__list` aqui: ela tem `overflow-x: auto`, e um
   painel `position: absolute` dentro de um ancestral com overflow é CLIPADO
   (o overflow-y computa para `auto` junto, mesmo sem ser declarado) — nenhum
   z-index resolve. Por isso o menu tem prefixo próprio e `overflow: visible`.
   O <nav> mantém `.ec-nav` só pelo fundo/borda e pela regra que o esconde
   em ≤767px.

   O painel usa z-index baixo de propósito: `.ec-header` é `z-index: 100` e
   cria um contexto de empilhamento, então 10 já basta aqui dentro e o menu
   nunca disputa com o widget da Sol (9990) nem com o WhatsApp (9985).
   ============================================================================= */
.ec-mainnav__list {
    display: flex;
    align-items: stretch;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: visible;
}
/* Centralizado só a partir de 1200px, e o corte foi MEDIDO, não escolhido: o
   painel de "Produtos" abre em 2 colunas com 580px ancorado no <li>, e empurrar
   o item para o centro empurra o painel junto. Com os itens ocupando 813px de
   um container de 1232px (a 1280), centralizar desloca metade da sobra — e a
   conta `975 + (largura-861)/2 <= largura-24` só fecha de ~1137px para cima.
   Abaixo disso o painel passa da borda direita da tela (a 1024 faltariam 33px;
   a 900, 73px) e cria rolagem horizontal. Por isso a faixa 900–1199px continua
   alinhada à esquerda, exatamente como era. */
@media (min-width: 1200px) {
    .ec-mainnav__list { justify-content: center; }
}

/* O painel é ancorado no <li>, não no <ul> — senão todos abrem colados na
   borda esquerda do container. */
.ec-mainnav__item { position: relative; display: flex; align-items: stretch; }

.ec-mainnav__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--ec-text);
    border-bottom: 3px solid transparent;
    transition: var(--ec-transition);
    white-space: nowrap;
}
.ec-mainnav__link:hover,
.ec-mainnav__item--open > .ec-mainnav__link,
.ec-mainnav__link--active {
    color: var(--ec-primary);
    border-bottom-color: var(--ec-primary);
}

/* Caret do disclosure: <summary> não pode ser link, e o item precisa levar a
   uma listagem além de abrir a lista. Por isso link e caret são irmãos. */
.ec-mainnav__drop { display: flex; align-items: stretch; }
.ec-mainnav__caret {
    display: flex;
    align-items: center;
    padding: 14px 12px 14px 2px;
    font-size: 11px;
    color: var(--ec-text-muted);
    cursor: pointer;
    list-style: none;
    border-bottom: 3px solid transparent;
    transition: var(--ec-transition);
}
.ec-mainnav__caret::-webkit-details-marker { display: none; }
.ec-mainnav__caret::marker { content: ''; }
.ec-mainnav__caret:hover { color: var(--ec-primary); }
.ec-mainnav__caret:focus-visible { outline: 2px solid var(--ec-dark); outline-offset: -2px; }
.ec-mainnav__caret i { transition: transform 0.2s var(--ec-ease); }
.ec-mainnav__drop[open] .ec-mainnav__caret { color: var(--ec-primary); border-bottom-color: var(--ec-primary); }
.ec-mainnav__drop[open] .ec-mainnav__caret i { transform: rotate(180deg); }

.ec-mainnav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 300px;
    max-width: 92vw;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 8px 0;
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-top: 3px solid var(--ec-primary);
    border-radius: 0 0 var(--ec-radius) var(--ec-radius);
    box-shadow: 0 18px 44px rgba(26, 35, 50, 0.16);
    /* Rolar até o fim do painel deixa de arrastar a página junto. */
    overscroll-behavior: contain;
    /* Barra fina na cor da loja, no lugar da nativa do sistema (grossa, cinza
       e com setas nas pontas). As duas famílias convivem de propósito: onde o
       padrão moderno é suportado ele vence e o ::-webkit-* é ignorado; onde
       não é, o ::-webkit-* assume. As duas produzem a mesma barra. */
    scrollbar-width: thin;
    scrollbar-color: var(--ec-primary) var(--ec-border-soft);
}
.ec-mainnav__panel::-webkit-scrollbar { width: 8px; }
.ec-mainnav__panel::-webkit-scrollbar-track {
    background: var(--ec-border-soft);
    border-radius: var(--ec-radius-pill);
}
.ec-mainnav__panel::-webkit-scrollbar-thumb {
    background: var(--ec-primary);
    border-radius: var(--ec-radius-pill);
}
.ec-mainnav__panel::-webkit-scrollbar-thumb:hover { background: var(--ec-primary-dark); }

.ec-mainnav__panel-list { list-style: none; margin: 0; padding: 0; }
.ec-mainnav__panel-link {
    display: block;
    padding: 9px 18px;
    font-size: 14px;
    color: var(--ec-text);
    transition: var(--ec-transition);
}
.ec-mainnav__panel-link:hover { background: rgba(230, 126, 34, 0.07); color: var(--ec-primary); }
.ec-mainnav__panel-all {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 12px 18px;
    border-top: 1px solid var(--ec-border-soft);
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-primary);
}
.ec-mainnav__panel-all:hover { background: rgba(230, 126, 34, 0.07); }

/* Duas colunas a partir de 900px: é o que faz a barra de rolagem SUMIR, em vez
   de só ficar bonita. Medido — "Produtos" tem 18 itens de 40px = 795px numa
   coluna, contra o teto de 520px do painel; em duas colunas cai para ~420px e
   não sobra nada para rolar (Marcas vai de 714px para ~380px).

   O corte é 900px, não 1024: abaixo de 1024 a barra usa o rótulo curto e os
   itens comprimem, empurrando "Produtos" para a esquerda — a folga ate a borda
   direita da tela é MAIOR em 900 (62px) do que em 1024 (49px). Contraintuitivo,
   por isso foi medido.

   As colunas vão no <ul>, nunca no painel: o "Ver todas…" é IRMÃO da lista, e
   assim o rodapé continua ocupando a largura inteira, com a borda superior
   atravessando as duas colunas. */
@media (min-width: 900px) {
    .ec-mainnav__panel { min-width: 580px; }
    .ec-mainnav__panel-list {
        columns: 2;
        column-gap: 0;
    }
    /* Sem isto um item pode ser partido ao meio entre as colunas. */
    .ec-mainnav__panel-list li { break-inside: avoid; }
}

/* O rótulo curto só existe na faixa apertada — ver a media query abaixo. */
.ec-mainnav__label-short { display: none; }

/* 768–1023px: a barra aparece (tablet) e 8 itens por extenso não cabem nos
   ~720px úteis. Aperta o item e troca "Fábricas/Marcas" por "Marcas" — cortar
   com text-overflow deixaria a palavra pela metade. */
@media (min-width: 768px) and (max-width: 1023px) {
    .ec-mainnav__link { padding: 12px 9px; font-size: 12px; letter-spacing: 0; }
    .ec-mainnav__caret { padding: 12px 8px 12px 0; }
    .ec-mainnav__label-long { display: none; }
    .ec-mainnav__label-short { display: inline; }
}

/* ⚠️ O painel estreito vale só até 899px, NÃO até 1023px como o resto desta
   faixa. De 900px para cima ele abre em 2 colunas (bloco acima) e precisa dos
   580px. As duas media queries são DISJUNTAS de propósito: com faixas
   sobrepostas, a que ganha é a que vier por último no arquivo, e reordenar o
   CSS quebraria o menu sem ninguém entender por quê. */
@media (min-width: 768px) and (max-width: 899px) {
    .ec-mainnav__panel { min-width: 260px; }
}

/* =============================================================================
   Acordeões do drawer mobile (categorias e marcas).
   Mesma linguagem do "Ver todas +N" da sidebar do catálogo, com classes
   próprias porque o drawer tem paddings e fundo diferentes.
   ============================================================================= */
.ec-mobile__acc-wrap { margin: 0; }
.ec-mobile__acc { margin: 2px 0 6px; }
.ec-mobile__acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    margin-left: 30px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ec-primary);
    background: rgba(230, 126, 34, 0.07);
    border-radius: var(--ec-radius-pill);
    cursor: pointer;
    list-style: none;
}
.ec-mobile__acc-btn::-webkit-details-marker { display: none; }
.ec-mobile__acc-btn::marker { content: ''; }
.ec-mobile__acc-label { display: inline-flex; align-items: center; gap: 8px; }
.ec-mobile__acc-label--close { display: none; }
.ec-mobile__acc[open] .ec-mobile__acc-label--open { display: none; }
.ec-mobile__acc[open] .ec-mobile__acc-label--close { display: inline-flex; }
.ec-mobile__acc[open] .ec-mobile__acc-btn { color: var(--ec-text-muted); background: var(--ec-bg); }
.ec-mobile__acc-count {
    min-width: 22px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: var(--ec-white);
    background: var(--ec-primary);
    border-radius: var(--ec-radius-pill);
}
.ec-mobile__acc[open] .ec-mobile__acc-count { background: var(--ec-text-muted); }
.ec-mobile__acc-icon { font-size: 11px; transition: transform 0.2s var(--ec-ease); }
.ec-mobile__acc[open] .ec-mobile__acc-icon { transform: rotate(180deg); }
/* Guia à esquerda: sem ela os subitens (que não têm ícone) começam MAIS à
   esquerda que o texto dos itens de topo, e "Acelerador de Pega" lê como
   item de primeiro nível em vez de categoria dentro de "Produtos".
   ⚠️ As duas classes no seletor NÃO são enfeite: `.ec-mobile__list` (com
   `margin: 0; padding: 0`) está mais adiante neste arquivo, e com a mesma
   especificidade ela venceria por ordem — a indentação era zerada e sobrava
   só a borda. Qualificar resolve sem `!important` e sem mover o bloco. */
.ec-mobile__list.ec-mobile__list--sub {
    margin: 4px 0 8px 34px;
    padding-left: 12px;
    border-left: 2px solid var(--ec-border-soft);
}
.ec-mobile__list.ec-mobile__list--sub a {
    font-size: 13.5px;
    padding-top: 9px;
    padding-bottom: 9px;
    color: var(--ec-text-muted);
}

/* =============================================================================
   /loja/marcas — grade do índice de fábricas e marcas.
   Reusa o `.ec-brand-chip` do carrossel da home; aqui ele vira bloco.
   ============================================================================= */
.ec-brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    margin-top: 28px;
    /* Sem isto os cards esticam para a altura da linha, e a família com
       linhas aninhadas deixa os vizinhos desproporcionalmente altos. */
    align-items: start;
}
.ec-brands-grid__cell { display: flex; flex-direction: column; gap: 8px; }
/* As três classes no seletor não são enfeite: `.ec-brand-chip__name` está mais
   adiante neste arquivo com `white-space: nowrap` (correto no marquee da home,
   onde cada chip é uma linha só). Na grade o nome PRECISA quebrar — sem isto
   "Selantes Fortaleza by Bostik" vaza para fora do card. */
.ec-brand-chip.ec-brand-chip--block {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding: 18px 16px;
}
.ec-brand-chip.ec-brand-chip--block .ec-brand-chip__name {
    white-space: normal;
    font-size: 16px;
    text-align: center;
    overflow-wrap: anywhere;
}
/* Na grade quem manda é a LARGURA da célula (o card ocupa a coluna inteira),
   então aqui a logo estica na horizontal e a altura do card passa a seguir a
   proporção da imagem — o oposto do marquee, onde a altura é que é dada. */
.ec-brand-chip.ec-brand-chip--block.ec-brand-chip--logo {
    /* As três classes são necessárias: `.ec-brand-chip.ec-brand-chip--block`
       (0-2-0) reintroduz o padding logo acima e venceria o `padding: 0` do
       `--logo` (0-1-0), deixando uma moldura branca que o card de texto tem e
       o de logo não deve ter. */
    padding: 0;
}
.ec-brand-chip.ec-brand-chip--block.ec-brand-chip--logo .ec-brand-chip__logo {
    width: 100%;
    /* Na grade quem manda é a LARGURA da célula; a altura do card segue a
       proporção da imagem — o oposto do marquee, onde a altura é que é dada. */
    height: auto;
    max-width: 100%;
}
.ec-brands-grid__lines { list-style: none; margin: 0; padding: 0 0 0 14px; }
.ec-brands-grid__lines a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13.5px;
    color: var(--ec-text-muted);
    transition: var(--ec-transition);
}
.ec-brands-grid__lines a:hover { color: var(--ec-primary); }
.ec-brands-grid__lines i { font-size: 11px; opacity: 0.55; }

/* **** HERO **** */
.ec-hero {
    padding: 80px 0 96px;
    background:
        radial-gradient(ellipse at top right, rgba(230, 126, 34, 0.08), transparent 60%),
        linear-gradient(180deg, var(--ec-bg) 0%, var(--ec-white) 100%);
    position: relative;
    overflow: hidden;
}
.ec-hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}
.ec-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(230, 126, 34, 0.1);
    color: var(--ec-primary-dark);
    border-radius: var(--ec-radius-pill);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 24px;
}
.ec-hero__title {
    font-family: var(--ec-font-title);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ec-dark);
    margin: 0 0 24px;
}
.ec-hero__title span {
    background: linear-gradient(135deg, var(--ec-primary) 0%, var(--ec-primary-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ec-hero__subtitle {
    font-size: 18px;
    color: var(--ec-text-muted);
    margin: 0 0 36px;
    line-height: 1.6;
    max-width: 540px;
}
.ec-hero__cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ec-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--ec-border);
}
.ec-hero__stat-value {
    font-family: var(--ec-font-title);
    font-size: 32px;
    font-weight: 800;
    color: var(--ec-dark);
    letter-spacing: -0.02em;
    display: block;
}
.ec-hero__stat-label { font-size: 13px; color: var(--ec-text-muted); }

.ec-hero__visual {
    position: relative;
    aspect-ratio: 1/1;
    max-width: 480px;
    margin: 0 auto;
}
.ec-hero__visual-card {
    position: absolute;
    background: var(--ec-white);
    border-radius: var(--ec-radius-lg);
    box-shadow: var(--ec-shadow-lg);
    padding: 20px;
}
.ec-hero__visual-card--main {
    inset: 8% 8% 24% 24%;
    background: linear-gradient(135deg, var(--ec-primary) 0%, var(--ec-primary-dark) 100%);
    color: var(--ec-white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: rotate(-4deg);
}
.ec-hero__visual-card--main i {
    font-size: 80px;
    opacity: 0.4;
    align-self: flex-end;
}
.ec-hero__visual-card--float {
    inset: 55% 0% 0% 0%;
    width: 60%;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: rotate(3deg);
}
.ec-hero__visual-card--float i {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--ec-success);
    color: var(--ec-white);
    display: grid;
    place-items: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* **** BUTTONS **** */
.ec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--ec-radius-pill);
    transition: var(--ec-transition);
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}
.ec-btn--primary {
    background: var(--ec-primary);
    color: var(--ec-white);
    box-shadow: 0 4px 14px rgba(230, 126, 34, 0.35);
}
.ec-btn--primary:hover {
    background: var(--ec-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(230, 126, 34, 0.4);
}
.ec-btn--dark {
    background: var(--ec-dark);
    color: var(--ec-white);
}
.ec-btn--dark:hover { background: var(--ec-dark-soft); transform: translateY(-2px); }
.ec-btn--ghost {
    color: var(--ec-dark);
    border-color: var(--ec-border);
    background: var(--ec-white);
}
.ec-btn--ghost:hover { border-color: var(--ec-dark); }
/* Botão de WhatsApp (verde oficial da marca — sinal universal do canal).
   Fica ao lado do CTA laranja de cotação sem competir com ele: mesma forma,
   cor diferente, para o cliente reconhecer o canal, não um segundo "comprar". */
.ec-btn--wa {
    background: #25d366;
    color: var(--ec-white);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.32);
}
.ec-btn--wa:hover {
    background: #1da851;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
}
.ec-btn--lg { padding: 18px 36px; font-size: 16px; }
.ec-btn--sm { padding: 8px 16px; font-size: 13px; }
.ec-btn--block { display: flex; width: 100%; }

/* **** SECTIONS **** */
/* Ritmo vertical do storefront, reduzido à METADE em 2026-08-31 a pedido
   do dono: 80px em cima + 80px embaixo davam 160px de vão entre duas
   seções seguidas, e a home parecia vazia. Vale para TODA página do
   /loja, não só a home — o ritmo é o mesmo em todas. */
.ec-section { padding: 40px 0; }
.ec-section--tight { padding: 24px 0; }
.ec-section__head { margin-bottom: 24px; text-align: center; }
.ec-section__head--left { text-align: left; }
.ec-section__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ec-primary);
    margin-bottom: 12px;
}
.ec-section__title {
    font-family: var(--ec-font-title);
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ec-dark);
    margin: 0 0 16px;
}
.ec-section__lead {
    font-size: 17px;
    color: var(--ec-text-muted);
    max-width: 640px;
    margin: 0 auto;
}
.ec-section__head--left .ec-section__lead { margin: 0; }

/* **** PRODUCT CARDS **** */
.ec-prod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.ec-prod-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ec-prod-card {
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg);
    overflow: hidden;
    transition: var(--ec-transition);
    display: flex;
    flex-direction: column;
    position: relative;
}
.ec-prod-card:hover {
    transform: translateY(-4px);
    border-color: var(--ec-primary);
    box-shadow: var(--ec-shadow-hover);
}
.ec-prod-card__image {
    aspect-ratio: 1/1;
    background: linear-gradient(135deg, var(--ec-bg), var(--ec-border-soft));
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}
.ec-prod-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ec-ease);
}
.ec-prod-card:hover .ec-prod-card__image img { transform: scale(1.06); }
.ec-prod-card__placeholder {
    font-size: 48px;
    color: var(--ec-text-soft);
    opacity: 0.4;
}
.ec-prod-card__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}
.ec-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--ec-radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ec-badge--featured { background: var(--ec-accent); color: var(--ec-dark); }
.ec-badge--stock { background: var(--ec-success); color: var(--ec-white); }
.ec-badge--request { background: var(--ec-warning); color: var(--ec-white); }
.ec-badge--discontinued { background: var(--ec-text-soft); color: var(--ec-white); }

.ec-prod-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.ec-prod-card__brand {
    font-size: 11px;
    font-weight: 700;
    color: var(--ec-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}
.ec-prod-card__name {
    /* Título centralizado em TODA listagem de produto (catálogo, categoria,
       marca, home e relacionados do produto) — decisão do dono, 2026-08-31.
       Regra única: as 4 views usam esta mesma classe. */
    text-align: center;
    font-family: var(--ec-font-title);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
    color: var(--ec-dark);
    margin: 0 0 10px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ec-prod-card__sku {
    font-size: 12px;
    color: var(--ec-text-muted);
    margin-bottom: 16px;
}
.ec-prod-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ec-dark);
    color: var(--ec-white);
    border-radius: var(--ec-radius-pill);
    font-size: 13px;
    font-weight: 600;
    transition: var(--ec-transition);
}
.ec-prod-card__cta:hover { background: var(--ec-primary); }

/* **** BRAND STRIP **** */
.ec-brand-strip {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    padding: 40px;
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg);
}
.ec-brand-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    font-family: var(--ec-font-title);
    font-weight: 800;
    font-size: 20px;
    color: var(--ec-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: var(--ec-transition);
    border-radius: var(--ec-radius);
}
.ec-brand-item:hover {
    color: var(--ec-primary);
    transform: scale(1.08);
}
.ec-brand-item small {
    font-family: var(--ec-font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--ec-text-muted);
    text-transform: uppercase;
}

/* **** FEATURES (Por que escolher) **** */
.ec-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ec-feature {
    padding: 32px;
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg);
    transition: var(--ec-transition);
}
.ec-feature:hover { border-color: var(--ec-primary); box-shadow: var(--ec-shadow); }
.ec-feature__icon {
    width: 56px;
    height: 56px;
    background: rgba(230, 126, 34, 0.1);
    color: var(--ec-primary);
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 24px;
    margin-bottom: 20px;
}
.ec-feature__title {
    font-family: var(--ec-font-title);
    font-size: 20px;
    font-weight: 700;
    color: var(--ec-dark);
    margin: 0 0 10px;
}
.ec-feature__desc { color: var(--ec-text-muted); font-size: 15px; line-height: 1.6; }

/* **** CTA BANNER **** */
.ec-cta-banner {
    background: linear-gradient(135deg, var(--ec-dark) 0%, var(--ec-dark-soft) 100%);
    color: var(--ec-white);
    padding: 64px 56px;
    border-radius: var(--ec-radius-lg);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: center;
}
.ec-cta-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 70%;
    height: 200%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.2), transparent 60%);
}
.ec-cta-banner > * { position: relative; z-index: 1; }
.ec-cta-banner__title {
    font-family: var(--ec-font-title);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 16px;
}
.ec-cta-banner__text { font-size: 16px; opacity: 0.85; margin: 0 0 24px; }

/* **** CATALOG (lista) **** */
/* Cabeçalho enxuto (2026-09-10, pedido do dono): era `48px 0 32px`, que com
   os 20+20px do breadcrumb dava 120px de espaço vazio num bloco de 223px —
   mais da metade da altura era ar. Ver também as duas regras logo abaixo
   (breadcrumb e título): as três juntas é que fazem a conta fechar. */
.ec-cat-header {
    padding: 16px 0 14px;
    background: var(--ec-white);
    border-bottom: 1px solid var(--ec-border);
}
.ec-cat-header__icon {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.15), rgba(243, 156, 18, 0.1));
    color: var(--ec-primary);
    border-radius: 16px;
    display: grid; place-items: center;
    font-size: 28px;
    flex-shrink: 0;
}

/* Layout horizontal: ícone à esquerda + texto (título + lead) à direita.
   Substitui o empilhamento vertical anterior (margin-bottom no ícone). */
.ec-cat-header__row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.ec-cat-header__row--with-icon .ec-cat-header__text {
    flex: 1;
    min-width: 0;
}
.ec-cat-header__text .ec-catalog__title { margin-top: 0; margin-bottom: 4px; }
/* ⚠️ ESCOPADO de propósito: `.ec-breadcrumb` tem `padding: 20px 0` global e é
   usado em 7 views (produto, carrinho, cotação, marcas, autor...). Apertar a
   classe base espremeria o breadcrumb do site inteiro; aqui ele está colado
   no topo do bloco, que é onde o aperto foi pedido. 0-2-0 vence 0-1-0. */
.ec-cat-header .ec-breadcrumb { padding: 0 0 4px; }

@media (max-width: 640px) {
    .ec-cat-header { padding: 12px 0 12px; }
    .ec-cat-header__row { gap: 14px; }
    .ec-cat-header__icon { width: 52px; height: 52px; font-size: 22px; border-radius: 12px; }
}
/* ⚠️ `padding-top` cortado de 40 para 12 (2026-09-10): somado à barra de
   ferramentas logo abaixo, eram ~124px de ar entre o cabeçalho e o primeiro
   card. O `padding-bottom` caiu de 80 para 40 pelo motivo oposto: com poucos
   resultados sobrava um vazio de 130px até o rodapé (80 daqui + os 50 de
   `margin-top` do `.ec-footer`). O `gap: 40px` é HORIZONTAL entre sidebar e
   grade — não mexer, é ele que dá respiro à coluna de filtros. */
.ec-cat-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    padding: 12px 0 40px;
}
.ec-sidebar {
    position: sticky;
    top: 140px;
    align-self: flex-start;
}
.ec-sidebar__block {
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 20px;
    margin-bottom: 16px;
}
.ec-sidebar__title {
    font-family: var(--ec-font-title);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ec-dark);
    margin: 0 0 12px;
}
.ec-sidebar__list { list-style: none; padding: 0; margin: 0; }
.ec-sidebar__item a {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: var(--ec-text);
    transition: color 0.2s;
}
.ec-sidebar__item a:hover { color: var(--ec-primary); }
.ec-sidebar__item--active a { color: var(--ec-primary); font-weight: 600; }

/* "Ver mais" das listas de filtro — <details> sem JS (CSP strict + o partial é
   incluído duas vezes por página, sidebar e modal). */
.ec-sidebar__more { margin-top: 14px; }

/* Botão de verdade, não link: a versão anterior era texto solto e passava
   despercebida. Segue a linguagem dos .ec-btn (pill, borda 2px, laranja). */
.ec-sidebar__more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ec-primary);
    background: var(--ec-white);
    border: 2px solid var(--ec-primary);
    border-radius: var(--ec-radius-pill);
    cursor: pointer;
    transition: var(--ec-transition);
    list-style: none;          /* tira o triângulo padrão (Firefox) */
    user-select: none;
}
.ec-sidebar__more-btn::-webkit-details-marker { display: none; }  /* Safari/Chrome */
.ec-sidebar__more-btn:hover {
    background: var(--ec-primary);
    color: var(--ec-white);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(230, 126, 34, 0.30);
}
.ec-sidebar__more-btn:focus-visible {
    outline: 2px solid var(--ec-dark);
    outline-offset: 2px;
}

/* Badge com quantos itens ainda estão escondidos — o número é o que dá a
   noção de que tem MUITA coisa ali dentro. */
.ec-sidebar__more-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--ec-white);
    background: var(--ec-primary);
    border-radius: var(--ec-radius-pill);
    transition: var(--ec-transition);
}
.ec-sidebar__more-btn:hover .ec-sidebar__more-count {
    color: var(--ec-primary);
    background: var(--ec-white);
}

.ec-sidebar__more-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ec-sidebar__more-label--close { display: none; }
.ec-sidebar__more-icon {
    font-size: 11px;
    transition: transform 0.2s;
}

/* Aberto: o botão recua para neutro — "Ver menos" não precisa competir com o
   conteúdo que acabou de aparecer. */
.ec-sidebar__more[open] .ec-sidebar__more-label--open { display: none; }
.ec-sidebar__more[open] .ec-sidebar__more-label--close { display: inline-flex; }
.ec-sidebar__more[open] .ec-sidebar__more-icon { transform: rotate(180deg); }
.ec-sidebar__more[open] .ec-sidebar__more-btn {
    color: var(--ec-text);
    background: var(--ec-white);
    border-color: var(--ec-border);
}
.ec-sidebar__more[open] .ec-sidebar__more-btn:hover {
    color: var(--ec-white);
    background: var(--ec-dark);
    border-color: var(--ec-dark);
    box-shadow: none;
}

/* Linhas de uma família de marcas (ex.: Betumat e Viapol dentro de
   "Betumat - Viapol"). Só aparecem com a família aberta. */
.ec-sidebar__item--sub-head {
    padding: 10px 0 2px;
    border-top: 1px dashed var(--ec-border);
    margin-top: 6px;
}
.ec-sidebar__sub-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ec-muted, #6b7280);
}
.ec-sidebar__item--sub a {
    padding-left: 12px;
    font-size: 13px;
}
.ec-sidebar__sub-icon {
    font-size: 10px;
    margin-right: 6px;
    transform: rotate(90deg);
    opacity: 0.55;
}

/* Seletor de linha acima da grade — "ver só um ou outro" */
.ec-brand-lines {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
}
.ec-brand-lines__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ec-muted, #6b7280);
    margin-right: 2px;
}
.ec-brand-lines__opt {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ec-text);
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-pill);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ec-brand-lines__opt:hover {
    color: var(--ec-primary);
    border-color: var(--ec-primary);
}
.ec-brand-lines__opt--active {
    background: var(--ec-primary);
    border-color: var(--ec-primary);
    color: #fff;
}
.ec-brand-lines__opt--active:hover { color: #fff; }
.ec-sidebar__count {
    font-size: 12px;
    background: var(--ec-bg);
    padding: 2px 8px;
    border-radius: var(--ec-radius-pill);
    color: var(--ec-text-muted);
}

/* **** PRODUCT PAGE **** */
.ec-prod-page {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    padding: 48px 0 64px;
}
.ec-prod-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 140px;
    align-self: flex-start;
}
.ec-prod-gallery__main {
    aspect-ratio: 1/1;
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.ec-prod-gallery__placeholder {
    font-size: 120px;
    color: var(--ec-text-soft);
    opacity: 0.2;
}
.ec-prod-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.ec-prod-gallery__thumb {
    aspect-ratio: 1/1;
    background: var(--ec-white);
    border: 2px solid var(--ec-border);
    border-radius: var(--ec-radius);
    cursor: pointer;
    overflow: hidden;
    transition: var(--ec-transition);
}
.ec-prod-gallery__thumb {
    padding: 0;
    background: var(--ec-white);
}
.ec-prod-gallery__thumb:hover, .ec-prod-gallery__thumb--active {
    border-color: var(--ec-primary);
}
.ec-prod-gallery__thumb:focus-visible {
    outline: 2px solid var(--ec-primary);
    outline-offset: 2px;
}
.ec-prod-gallery__main {
    position: relative;
    cursor: zoom-in;
}
.ec-prod-gallery__main [data-main-img] {
    transition: opacity 0.2s ease;
}
.ec-prod-gallery__zoom-hint {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 50%;
    font-size: 15px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.ec-prod-gallery__main:hover .ec-prod-gallery__zoom-hint {
    opacity: 1;
}

/* Lightbox */
.ec-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 25, 0.92);
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 40px;
    animation: ecLbFade 0.2s ease;
}
@keyframes ecLbFade { from { opacity: 0; } to { opacity: 1; } }
.ec-lightbox[hidden] { display: none; }
.ec-lightbox__figure {
    margin: 0;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.ec-lightbox__img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--ec-radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.ec-lightbox__caption {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    display: flex;
    gap: 16px;
    align-items: center;
}
.ec-lightbox__caption span:first-child {
    font-weight: 700;
    color: #fff;
}
.ec-lightbox__close, .ec-lightbox__nav {
    position: absolute;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: grid;
    place-items: center;
    transition: var(--ec-transition);
}
.ec-lightbox__close:hover, .ec-lightbox__nav:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.05);
}
.ec-lightbox__close {
    top: 24px;
    right: 24px;
}
.ec-lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.ec-lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
.ec-lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.05); }
.ec-lightbox__nav--next:hover { transform: translateY(-50%) scale(1.05); }
@media (max-width: 640px) {
    .ec-lightbox { padding: 16px; }
    .ec-lightbox__close { top: 12px; right: 12px; width: 40px; height: 40px; }
    .ec-lightbox__nav { width: 40px; height: 40px; }
    .ec-lightbox__nav--prev { left: 8px; }
    .ec-lightbox__nav--next { right: 8px; }
}

.ec-prod-info__brand {
    font-size: 13px;
    font-weight: 700;
    color: var(--ec-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}
.ec-prod-info__title {
    font-family: var(--ec-font-title);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ec-dark);
    margin: 0 0 16px;
}
.ec-prod-info__sku {
    font-size: 14px;
    color: var(--ec-text-muted);
    margin-bottom: 24px;
}
.ec-prod-info__short {
    font-size: 17px;
    color: var(--ec-text);
    line-height: 1.6;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--ec-border);
}
.ec-prod-info__applications {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0;
}
.ec-chip {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    background: var(--ec-bg);
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-pill);
}
.ec-prod-info__tech-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
}
.ec-prod-info__tech-table tr { border-bottom: 1px solid var(--ec-border-soft); }
.ec-prod-info__tech-table th,
.ec-prod-info__tech-table td {
    text-align: left;
    padding: 12px 0;
    font-size: 14px;
}
.ec-prod-info__tech-table th {
    color: var(--ec-text-muted);
    font-weight: 500;
    text-transform: capitalize;
}
.ec-prod-info__tech-table td {
    color: var(--ec-dark);
    font-weight: 600;
    text-align: right;
}
.ec-prod-info__cta {
    position: sticky;
    bottom: 24px;
    padding: 20px;
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg);
    box-shadow: var(--ec-shadow-lg);
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 32px;
}
.ec-qty {
    display: flex;
    align-items: center;
    border: 2px solid var(--ec-border);
    border-radius: var(--ec-radius-pill);
    overflow: hidden;
}
.ec-qty__btn { width: 36px; height: 40px; color: var(--ec-text); font-size: 16px; }
.ec-qty__btn:hover { color: var(--ec-primary); }
.ec-qty__input {
    width: 48px;
    text-align: center;
    border: 0;
    font-weight: 700;
    font-size: 15px;
    /* Bug fix 2026-04-30: cor explícita resolve invisibilidade em Windows/macOS
       dark mode. Meta tag color-scheme:light-dark (SEO Fase 2) faz o browser
       forçar tema escuro nos form controls — sem color: definido, o texto vira
       branco no fundo branco da página. Mesmo padrão do fix b2de92c (campo busca). */
    color: var(--ec-text);
    background: transparent;
    outline: none;
    -webkit-text-fill-color: var(--ec-text);
}
.ec-qty__input:-webkit-autofill {
    -webkit-text-fill-color: var(--ec-text);
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
}

/* **** CART **** */
.ec-cart {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
    padding: 48px 0;
}
.ec-cart-item {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 20px;
    padding: 20px;
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    margin-bottom: 16px;
}
.ec-cart-item__img {
    aspect-ratio: 1/1;
    background: var(--ec-bg);
    border-radius: var(--ec-radius-sm);
    display: grid;
    place-items: center;
    font-size: 32px;
    color: var(--ec-text-soft);
}
/* Empty state do carrinho — redesign v9.12.x */
.ec-cart-empty {
    text-align: center;
    padding: 48px 20px 40px;
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    border: 1px solid var(--ec-border-soft, #eee);
    border-radius: var(--ec-radius-lg, 14px);
    margin-bottom: 48px;
}
.ec-cart-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(230, 126, 34, 0.08);
    margin: 0 auto 24px;
}
.ec-cart-empty__icon i {
    font-size: 40px;
    color: var(--primary, #e67e22);
    opacity: 0.9;
}
.ec-cart-empty__title {
    font-family: var(--ec-font-title, Montserrat), sans-serif;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--ec-text, #1a2332);
}
.ec-cart-empty__subtitle {
    color: var(--ec-text-muted, #6c757d);
    margin: 0 auto 28px;
    max-width: 480px;
    font-size: 15px;
    line-height: 1.6;
}
.ec-cart-empty__ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.ec-cart-empty__ctas .ec-btn {
    min-width: 220px;
    padding: 12px 24px;
    font-size: 15px;
}

/* "Como funciona" — 3 passos */
.ec-cart-howit { margin: 64px 0 48px; }
.ec-cart-howit__title {
    text-align: center;
    font-family: var(--ec-font-title, Montserrat), sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 36px;
    color: var(--ec-text, #1a2332);
}
.ec-cart-howit__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ec-cart-howit__step {
    position: relative;
    text-align: center;
    padding: 32px 20px 24px;
    background: #fff;
    border: 1px solid var(--ec-border-soft, #eee);
    border-radius: var(--ec-radius-md, 10px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ec-cart-howit__step:hover {
    transform: translateY(-3px);
    border-color: var(--primary, #e67e22);
    box-shadow: 0 8px 24px rgba(230, 126, 34, 0.08);
}
.ec-cart-howit__num {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary, #e67e22);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ec-cart-howit__step > i {
    font-size: 32px;
    color: var(--primary, #e67e22);
    margin: 0 0 14px;
    opacity: 0.9;
}
.ec-cart-howit__step h4 {
    font-family: var(--ec-font-title, Montserrat), sans-serif;
    font-size: 16px;
    margin: 0 0 8px;
    color: var(--ec-text, #1a2332);
}
.ec-cart-howit__step p {
    color: var(--ec-text-muted, #6c757d);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* Categorias em destaque no empty state */
.ec-cart-cats { margin: 48px 0; }
.ec-cart-cats__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.ec-cart-cats__title {
    font-family: var(--ec-font-title, Montserrat), sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--ec-text, #1a2332);
}
.ec-cart-cats__link {
    color: var(--primary, #e67e22);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.2s ease;
}
.ec-cart-cats__link:hover { color: var(--primary-light, #f39c12); }
.ec-cart-cats__link i { font-size: 12px; margin-left: 4px; }
.ec-cart-cats__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
.ec-cart-cats__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 14px;
    background: #fff;
    border: 1px solid var(--ec-border-soft, #eee);
    border-radius: var(--ec-radius-md, 10px);
    text-decoration: none;
    color: var(--ec-text, #1a2332);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    text-align: center;
}
.ec-cart-cats__card:hover {
    transform: translateY(-2px);
    border-color: var(--primary, #e67e22);
    box-shadow: 0 6px 16px rgba(230, 126, 34, 0.10);
}
.ec-cart-cats__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(230, 126, 34, 0.08);
    color: var(--primary, #e67e22);
    font-size: 20px;
    margin-bottom: 10px;
}
.ec-cart-cats__card-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

/* Responsivo */
@media (max-width: 768px) {
    .ec-cart-empty { padding: 36px 16px 32px; }
    .ec-cart-empty__title { font-size: 22px; }
    .ec-cart-empty__ctas .ec-btn { min-width: 100%; }
    .ec-cart-howit__grid { grid-template-columns: 1fr; gap: 28px; }
    .ec-cart-cats__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .ec-cart-cats__grid { grid-template-columns: repeat(2, 1fr); }
}

/* **** FOOTER **** */
.ec-footer {
    background: var(--ec-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: 64px 0 0;
    /* Metade do que era (100px): somado ao padding da última seção,
       abria 180px de vazio antes do rodapé. */
    margin-top: 50px;
}
.ec-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
}
.ec-footer__title {
    font-family: var(--ec-font-title);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ec-white);
    margin: 0 0 20px;
}
.ec-footer__list { list-style: none; padding: 0; margin: 0; }
.ec-footer__list li { margin-bottom: 10px; font-size: 14px; }
.ec-footer__list a { transition: color 0.2s; }
.ec-footer__list a:hover { color: var(--ec-primary); }
.ec-footer__brand-text { font-size: 14px; line-height: 1.6; max-width: 340px; }
.ec-footer__social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.ec-footer__social a {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--ec-white);
    transition: var(--ec-transition);
}
.ec-footer__social a:hover { background: var(--ec-primary); transform: translateY(-2px); }
.ec-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 24px 0;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}

/* **** WHATSAPP FAB **** */
.ec-wa-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #25d366;
    color: var(--ec-white);
    border-radius: var(--ec-radius-pill);
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
    transition: var(--ec-transition);
}
.ec-wa-fab:hover { transform: translateY(-2px); background: #1ea952; box-shadow: 0 12px 32px rgba(37, 211, 102, 0.5); }
.ec-wa-fab i { font-size: 22px; }

/* **** FORM **** */
.ec-form { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.ec-form__row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ec-text);
    margin-bottom: 6px;
}
.ec-form__row input,
.ec-form__row select,
.ec-form__row textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 15px;
    border: 2px solid var(--ec-border);
    border-radius: var(--ec-radius);
    background: var(--ec-white);
    /* Fix: <input> NAO herda color por default; com meta color-scheme light dark,
       SO em dark mode pintava o texto de branco -> invisivel no fundo branco
       (mesmo bug ja corrigido no .ec-header__search). Cor explicita resolve. */
    color: var(--ec-text);
    outline: none;
    transition: var(--ec-transition);
}
.ec-form__row input::placeholder,
.ec-form__row textarea::placeholder {
    color: var(--ec-text-muted);
    opacity: 1; /* Firefox usa 0.54 por default */
}
/* Autofill do Chrome tambem fica invisivel em dark mode do SO — forca cor. */
.ec-form__row input:-webkit-autofill,
.ec-form__row input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ec-text);
    -webkit-box-shadow: 0 0 0 1000px var(--ec-white) inset;
}
.ec-form__row input:focus,
.ec-form__row textarea:focus,
.ec-form__row select:focus {
    border-color: var(--ec-primary);
    box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.08);
}

/* **** UTILS **** */
/* A paginação vive num bloco único mais abaixo ("PAGINAÇÃO"). Havia aqui uma
   segunda definição que brigava com ela — não recriar. Ver o comentário lá. */

.ec-breadcrumb {
    padding: 20px 0;
    font-size: 13px;
    color: var(--ec-text-muted);
}
.ec-breadcrumb a { color: var(--ec-text-muted); transition: color 0.2s; }
.ec-breadcrumb a:hover { color: var(--ec-primary); }
.ec-breadcrumb__sep { margin: 0 8px; opacity: 0.5; }

/* **** RESPONSIVE **** */
@media (max-width: 1024px) {
    .ec-hero__inner { grid-template-columns: 1fr; }
    .ec-hero__visual { max-width: 360px; }
    .ec-prod-grid { grid-template-columns: repeat(3, 1fr); }
    .ec-features { grid-template-columns: 1fr; }
    .ec-cat-layout { grid-template-columns: 1fr; }
    .ec-sidebar { position: static; }
    .ec-prod-page { grid-template-columns: 1fr; }
    .ec-cart { grid-template-columns: 1fr; }
    .ec-footer__grid { grid-template-columns: repeat(2, 1fr); }
    .ec-cta-banner { grid-template-columns: 1fr; text-align: center; }
}
@media (max-width: 640px) {
    .ec-container { padding: 0 16px; }
    .ec-hero { padding: 48px 0 60px; }
    .ec-section { padding: 28px 0; }
    .ec-header__main { flex-wrap: wrap; }
    .ec-header__search { order: 3; flex-basis: 100%; max-width: 100%; }
    .ec-prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ec-prod-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .ec-prod-card__body { padding: 14px; }
    .ec-cta-banner { padding: 40px 24px; }
    .ec-footer__grid { grid-template-columns: 1fr; }
    .ec-wa-fab span { display: none; }
}
/* =============================================================
   SPRINT E.5.2 — Filtros avançados, sort, paginação, mobile modal
   ============================================================= */

/* **** TOOLBAR **** */
/* Enxuta (2026-09-10): era 16+16 de padding MAIS 20 de margem = 52px só de ar
   entre o topo da coluna e o primeiro card. */
.ec-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 4px 0;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.ec-toolbar__left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ec-toolbar__count { font-size: 14px; color: var(--ec-text-muted); }
.ec-toolbar__count strong { color: var(--ec-dark); font-weight: 700; }
.ec-toolbar__right { display: flex; align-items: center; gap: 10px; }

.ec-sort { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.ec-sort label { font-size: 13px; color: var(--ec-text-muted); font-weight: 500; }
.ec-sort select {
    appearance: none;
    -webkit-appearance: none;
    padding: 10px 36px 10px 16px;
    background: var(--ec-white);
    background-image: linear-gradient(45deg, transparent 50%, var(--ec-text-muted) 50%), linear-gradient(135deg, var(--ec-text-muted) 50%, transparent 50%);
    background-position: right 18px center, right 12px center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    border: 2px solid var(--ec-border);
    border-radius: var(--ec-radius-pill);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ec-dark);
    cursor: pointer;
    transition: var(--ec-transition);
    outline: none;
}
.ec-sort select:hover { border-color: var(--ec-primary); }
.ec-sort select:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.08); }

.ec-filters-trigger {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--ec-dark);
    color: var(--ec-white);
    border-radius: var(--ec-radius-pill);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ec-transition);
}
.ec-filters-trigger:hover { background: var(--ec-primary); }
.ec-filters-trigger__badge {
    background: var(--ec-primary);
    color: var(--ec-white);
    border-radius: var(--ec-radius-pill);
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    margin-left: 4px;
}

/* **** ACTIVE FILTER CHIPS **** */
/* Faixa enxuta (2026-09-10): 16+16 empurravam a grade para baixo sem
   informar nada — o dono quer produto visível o quanto antes. */
.ec-chips-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    align-items: center;
}
.ec-chips-bar__label {
    font-size: 13px;
    color: var(--ec-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 4px;
}
.ec-chip-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 6px 14px;
    background: var(--ec-dark);
    color: var(--ec-white);
    border-radius: var(--ec-radius-pill);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--ec-transition);
}
.ec-chip-active:hover { background: var(--ec-danger); transform: translateY(-1px); }
.ec-chip-active__remove {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    font-size: 10px;
    margin-left: 2px;
}
.ec-chips-bar__clear {
    font-size: 13px;
    color: var(--ec-primary);
    font-weight: 600;
    text-decoration: underline;
    margin-left: auto;
    cursor: pointer;
    background: none;
    border: 0;
}
.ec-chips-bar__clear:hover { color: var(--ec-primary-dark); }

/* **** PAGINAÇÃO ****
   ⚠️ DEFINIÇÃO ÚNICA — não criar um segundo bloco .ec-pagination neste arquivo.
   Existiam dois: o genérico em "UTILS" impunha `display: grid` via `.ec-pagination a`
   e, por ter especificidade MAIOR (0-1-1) que `.ec-pagination__prev` (0-1-0), vencia
   o `inline-flex` das setas — o chevron e o rótulo empilhavam em duas linhas e
   vazavam da pílula de 40px. Os `!important` que havia aqui eram tentativa de
   contornar isso e só mascaravam metade do sintoma (pegavam fundo e padding,
   nunca o `display`). É por isso que as regras de seta abaixo qualificam o
   elemento (`a.ec-pagination__prev`): assim vencem a regra de base por
   especificidade real, sem `!important`.
   Forma: pílula (raio 999px), a mesma dos .ec-btn do resto da loja. */
.ec-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 40px 0 12px;
    flex-wrap: wrap;
}

/* Base dos alvos clicáveis: número, seta e seta desabilitada (que é <span>). */
.ec-pagination a,
.ec-pagination .ec-pagination--disabled {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: var(--ec-radius-pill);
    font-size: 15px;
    font-weight: 600;
    color: var(--ec-text);
    border: 1px solid var(--ec-border);
    background: var(--ec-white);
    transition: var(--ec-transition);
}
.ec-pagination a:hover {
    border-color: var(--ec-primary);
    color: var(--ec-primary);
    transform: translateY(-2px);
}
/* Página atual: único ponto de cor forte da barra. */
.ec-pagination a.ec-pagination--active {
    background: var(--ec-primary);
    color: var(--ec-white);
    border-color: var(--ec-primary);
    box-shadow: 0 4px 14px rgba(230, 126, 34, 0.35);
    cursor: default;
    pointer-events: none;
}

/* Setas: pílula escura — avançar é a ação principal do rodapé do catálogo. */
.ec-pagination a.ec-pagination__prev,
.ec-pagination a.ec-pagination__next {
    padding: 0 22px;
    background: var(--ec-dark);
    color: var(--ec-white);
    border-color: var(--ec-dark);
}
.ec-pagination a.ec-pagination__prev:hover,
.ec-pagination a.ec-pagination__next:hover {
    background: var(--ec-primary);
    border-color: var(--ec-primary);
    color: var(--ec-white);
}
/* Ponta da lista: presente para não deslocar a barra, mas sem peso visual.
   Vem como <span> no HTML, então já não é clicável nem focável. */
.ec-pagination .ec-pagination__prev.ec-pagination--disabled,
.ec-pagination .ec-pagination__next.ec-pagination--disabled {
    padding: 0 22px;
    background: var(--ec-white);
    color: var(--ec-text-soft);
    border: 2px solid var(--ec-border-soft);
}

.ec-pagination__ellipsis {
    min-width: 24px;
    text-align: center;
    color: var(--ec-text-soft);
    font-weight: 600;
    letter-spacing: 2px;
}

/* "Página X de Y" sai da fila de botões e vira legenda embaixo: a linha de
   controles fica só com o que é clicável. `flex-basis: 100%` quebra a linha e
   `order` garante que fique por último mesmo vindo antes no HTML. */
.ec-pagination__info {
    flex-basis: 100%;
    order: 10;
    text-align: center;
    font-size: 13px;
    color: var(--ec-text-muted);
    margin-top: 4px;
}

/* **** SIDEBAR REFINAMENTO **** */
.ec-sidebar__stock-options { display: flex; flex-direction: column; gap: 8px; }
.ec-sidebar__stock-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--ec-radius-sm);
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
}
.ec-sidebar__stock-option:hover { background: var(--ec-bg); }
.ec-sidebar__stock-option input { margin: 0; width: 16px; height: 16px; accent-color: var(--ec-primary); }
.ec-sidebar__stock-option--active { background: rgba(230, 126, 34, 0.08); color: var(--ec-primary); font-weight: 600; }

/* **** MOBILE FILTERS MODAL **** */
.ec-filters-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(26, 35, 50, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s var(--ec-ease);
}
.ec-filters-modal--open { display: block; opacity: 1; }
.ec-filters-modal__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(90vw, 360px);
    background: var(--ec-white);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s var(--ec-ease);
    display: flex;
    flex-direction: column;
}
.ec-filters-modal--open .ec-filters-modal__panel { transform: translateX(0); }
.ec-filters-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ec-border);
    position: sticky;
    top: 0;
    background: var(--ec-white);
    z-index: 2;
}
.ec-filters-modal__head h3 { font-family: var(--ec-font-title); font-size: 18px; margin: 0; font-weight: 800; }
.ec-filters-modal__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ec-bg);
    display: grid;
    place-items: center;
    font-size: 16px;
    color: var(--ec-text);
    cursor: pointer;
    transition: var(--ec-transition);
    border: 0;
}
.ec-filters-modal__close:hover { background: var(--ec-danger); color: var(--ec-white); }
.ec-filters-modal__body { padding: 20px; flex: 1; }
.ec-filters-modal__foot {
    padding: 20px;
    border-top: 1px solid var(--ec-border);
    display: flex;
    gap: 10px;
    position: sticky;
    bottom: 0;
    background: var(--ec-white);
}
.ec-filters-modal__foot .ec-btn { flex: 1; }

/* **** SKELETON LOADING **** */
@keyframes ec-skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.ec-skeleton {
    background: linear-gradient(90deg, var(--ec-border-soft) 0%, var(--ec-bg) 50%, var(--ec-border-soft) 100%);
    background-size: 200% 100%;
    animation: ec-skeleton-shimmer 1.4s infinite;
    border-radius: var(--ec-radius-sm);
}
.ec-prod-card--skeleton { pointer-events: none; }
.ec-prod-card--skeleton .ec-prod-card__image {
    background: var(--ec-border-soft);
    animation: ec-skeleton-shimmer 1.4s infinite;
    background-size: 200% 100%;
}
.ec-prod-card--skeleton .ec-skeleton-line { height: 14px; margin-bottom: 10px; border-radius: 4px; }
.ec-prod-card--skeleton .ec-skeleton-line--sm { width: 40%; }
.ec-prod-card--skeleton .ec-skeleton-line--lg { width: 100%; }
.ec-prod-card--skeleton .ec-skeleton-line--md { width: 70%; }

/* **** SEARCH HIGHLIGHT **** */
.ec-highlight {
    background: rgba(243, 196, 15, 0.35);
    color: var(--ec-dark);
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 700;
}

/* **** RESULT SUMMARY **** */
.ec-result-summary {
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.ec-result-summary__info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--ec-text-muted);
}
.ec-result-summary__info i { color: var(--ec-primary); font-size: 16px; }

/* **** RESPONSIVE E.5.2 **** */
@media (max-width: 1024px) {
    .ec-filters-trigger { display: inline-flex; }
    .ec-sidebar:not(.ec-sidebar--in-modal) { display: none; }
    .ec-filters-modal__panel .ec-sidebar { display: block; position: static; }
    .ec-filters-modal__panel .ec-sidebar__block { border: 0; padding: 16px 0; margin: 0; border-bottom: 1px solid var(--ec-border-soft); }
    .ec-filters-modal__panel .ec-sidebar__block:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
    /* Faixa de filtros do catálogo no celular (2026-09-10, redesenho pedido pelo
       dono). Medido antes: 196px de altura em 390×844 — 23% da tela gasta antes
       do primeiro produto. Os culpados eram os DOIS rótulos: "FILTROS ATIVOS:"
       comia 124px dos 358 e empurrava o "Limpar todos" para uma TERCEIRA linha
       sozinho, encostado na direita (parecia defeito); e "Ordenar:" roubava
       63px, deixando o select numa linha só dele.

       Desenho novo: chip + "Limpar todos" na primeira linha; "Filtros" e o
       seletor de ordenação lado a lado, meio a meio, como um par de botões; a
       contagem numa linha discreta embaixo. */
    .ec-chips-bar__label { display: none; }

    /* Grid em vez de flex-column: é o que permite [botão][select] na mesma
       linha com a contagem embaixo SEM tocar no HTML. `display: contents` no
       __left dissolve o wrapper e promove o botão e a contagem a itens do
       grid — sem isso os dois viajariam juntos numa célula só. */
    .ec-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 8px 10px;
    }
    .ec-toolbar__left { display: contents; }
    .ec-filters-trigger {
        grid-column: 1; grid-row: 1;
        justify-content: center;
        padding: 10px 12px;
    }
    .ec-toolbar__right { grid-column: 2; grid-row: 1; }
    /* Linha inteira e fora da fila de controles: é informação, não comando. */
    .ec-toolbar__count { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }

    .ec-sort { flex: 1; }
    /* ⚠️ `visually-hidden`, NUNCA `display: none`: o <label for="ecSort"> é o
       único nome acessível do select (não há aria-label no HTML). Escondê-lo de
       verdade deixaria o controle mudo para leitor de tela. */
    .ec-sort label {
        position: absolute; width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .ec-sort select {
        width: 100%;
        padding-left: 12px;
        padding-right: 30px;
        background-position: right 14px center, right 8px center;
    }
    .ec-result-summary { flex-direction: column; align-items: stretch; }
    /* No celular a seta vira só o ícone e volta a ser um círculo — sem o
       rótulo, o padding lateral de 22px deixaria uma pílula torta. O
       "Página X de Y" fica: agora é uma linha própria, não rouba espaço da
       fila, e é a única referência de posição depois de rolar a grade. */
    .ec-pagination { gap: 6px; }
    .ec-pagination__prev span, .ec-pagination__next span { display: none; }
    .ec-pagination a.ec-pagination__prev,
    .ec-pagination a.ec-pagination__next,
    .ec-pagination .ec-pagination__prev.ec-pagination--disabled,
    .ec-pagination .ec-pagination__next.ec-pagination--disabled { padding: 0; width: 42px; min-width: 42px; }
}

/* **** SLIDER (Banners) **** */
.ec-slider {
    position: relative;
    width: 100%;
    max-height: 520px;
    overflow: hidden;
    background: #0f1a2a;
}
.ec-slider__track {
    position: relative;
    width: 100%;
    /* Casa com a proporcao do banner panoramico (~3,2:1) para nao cortar
       o texto embutido nas bordas da imagem. */
    aspect-ratio: 16 / 5;
    min-height: 0;
}
.ec-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
}
.ec-slider__slide--active {
    opacity: 1;
    pointer-events: auto;
}
/* <picture> envolve a <img> (troca de fonte desktop/mobile); precisa preencher
   o slide para a <img> com height:100% ter contra o que resolver. */
.ec-slider__slide picture,
.ec-slider__link picture {
    display: block;
    width: 100%;
    height: 100%;
}
.ec-slider__slide img,
.ec-slider__link img {
    width: 100%;
    height: 100%;
    /* 'contain' garante que a imagem inteira (com o texto chapado) sempre
       aparece, sem cortar as bordas. Faixa da cor de fundo pode surgir se o
       banner tiver proporcao diferente da do container. */
    object-fit: contain;
    display: block;
}
.ec-slider__link {
    display: block;
    width: 100%;
    height: 100%;
}
.ec-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: #1a2332;
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: var(--ec-transition);
    z-index: 2;
}
.ec-slider__nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}
.ec-slider__nav--prev { left: 20px; }
.ec-slider__nav--next { right: 20px; }
.ec-slider__dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}
.ec-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: var(--ec-transition);
}
.ec-slider__dot:hover {
    background: rgba(255, 255, 255, 0.8);
}
.ec-slider__dot--active {
    background: var(--ec-primary);
    width: 28px;
    border-radius: 5px;
}
@media (max-width: 768px) {
    .ec-slider__track {
        /* No celular a arte e vertical (recomendado 1080x1350, ~4:5). Sem arte
           mobile, a de desktop cai aqui via 'contain' (com faixa, sem corte). */
        aspect-ratio: 4 / 5;
        min-height: 0;
    }
    .ec-slider__nav { width: 40px; height: 40px; font-size: 15px; }
    .ec-slider__nav--prev { left: 10px; }
    .ec-slider__nav--next { right: 10px; }
    .ec-slider__dots { bottom: 12px; gap: 6px; }
    .ec-slider__dot { width: 8px; height: 8px; }
    .ec-slider__dot--active { width: 22px; }
}

/* **** BRAND MARQUEE (Carrossel de Marcas) **** */
.ec-brand-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 24px 0;
    background: linear-gradient(180deg, var(--ec-gray-light, #f8f9fb) 0%, var(--ec-white) 100%);
    border-top: 1px solid var(--ec-border);
    border-bottom: 1px solid var(--ec-border);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.ec-brand-marquee__track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: ec-brand-scroll 50s linear infinite;
}
.ec-brand-marquee:hover .ec-brand-marquee__track {
    animation-play-state: paused;
}
/* ARRASTO E CONTROLE DE SENTIDO (2026-09-17, pedido do dono): segurar o mouse e
   puxar rola a fila para o lado que quiser, e o sentido do arrasto passa a ser o
   sentido da rolagem automática, que NÃO para ao passar o mouse — só enquanto o
   botão está segurado.
   Tudo escopado em `[data-marquee-ready]`, atributo que o JS põe ao assumir: sem
   JavaScript a animação de CSS acima continua valendo e o bloco nunca fica
   parado (mesma degradação silenciosa do carrossel de categorias). */
.ec-brand-marquee[data-marquee-ready] {
    overflow-x: auto;
    /* Explícito de propósito: com só `overflow-x: auto`, o eixo Y é promovido a
       `auto` junto e nasce uma barra vertical parasita por causa do levante do
       card no hover (mesma armadilha já registrada no trilho de categorias). */
    overflow-y: hidden;
    /* A barra horizontal seria ruído: a máscara em degradê já indica a
       continuação, e o gesto de arrastar substitui a barra. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    /* No toque quem rola é o próprio navegador (o JS só trata o mouse). */
    touch-action: pan-x;
    /* A rolagem do arrasto é quadro a quadro: `smooth` herdado brigaria com ela. */
    scroll-behavior: auto;
}
.ec-brand-marquee[data-marquee-ready]::-webkit-scrollbar { display: none; }
.ec-brand-marquee[data-marquee-ready] .ec-brand-marquee__track {
    animation: none;
    /* Sem isto o arrasto vira "seleção de texto" e o gesto trava no meio. */
    user-select: none;
    -webkit-user-select: none;
}
.ec-brand-marquee[data-marquee-grabbing] { cursor: grabbing; }
@keyframes ec-brand-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.ec-brand-chip {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 180px;
    padding: 18px 28px;
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    color: var(--ec-dark, #1a2332);
    text-decoration: none;
    transition: var(--ec-transition, all 0.2s ease);
    box-shadow: 0 2px 8px rgba(15, 26, 42, 0.04);
}
.ec-brand-chip:hover {
    border-color: var(--ec-primary);
    color: var(--ec-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(230, 126, 34, 0.15);
}
.ec-brand-chip__name {
    font-family: var(--ec-font-title);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
}
.ec-brand-chip__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ec-text-muted);
    margin-top: 4px;
    transition: color 0.2s ease;
}
.ec-brand-chip:hover .ec-brand-chip__label {
    color: var(--ec-primary);
}
/* Logo do parceiro (2026-09-17): marca COM logo cadastrada no admin aparece pela
   imagem, no lugar do nome — e sem a etiqueta, por decisão do dono.
   A imagem OCUPA O CARD INTEIRO (pedido do dono, 2026-09-17): com a logo contida
   numa faixa pequena ela ficava ilegível ao lado dos nomes vizinhos, porque quase
   toda logo de fabricante já vem com margem embutida no arquivo.
   Como o card perde o padding, a ALTURA vem do próprio card — que o flex do
   marquee já iguala à do card de texto — e a LARGURA acompanha a proporção da
   imagem. Resultado: logo no maior tamanho possível, sem faixa branca sobrando
   (nada de `contain` com vão) e sem cortar nada (nada de `cover`). */
.ec-brand-chip {
    /* Altura de referência da fila: é ela que o card de texto (nome + etiqueta)
       mede, e é ela que o card de logo tem de acompanhar para a fila não ficar
       serrilhada. Como variável, os dois lados nunca saem de sincronia. */
    --ec-brand-chip-h: 78px;
    min-height: var(--ec-brand-chip-h);
}
.ec-brand-chip__logo {
    display: block;
    /* px, NÃO `height: 100%`: dentro do flex do marquee a altura do card vem do
       conteúdo, então `100%` não tem contra o que resolver e a imagem cai no
       tamanho natural — o que esticou a faixa inteira para 351px no teste. */
    height: var(--ec-brand-chip-h);
    width: auto;
    max-width: none;
    object-fit: contain;
}
.ec-brand-chip--logo {
    padding: 0;
    min-width: 0;
    /* O card tem border-radius: sem isto a imagem vaza pelos cantos. */
    overflow: hidden;
}
@media (max-width: 640px) {
    .ec-brand-chip {
        min-width: 150px;
        padding: 14px 20px;
    }
    /* Card de texto encolhe no celular (padding 14/20 + nome 15px), então a
       referência de altura encolhe junto — senão a logo estouraria a fila. */
    .ec-brand-chip { --ec-brand-chip-h: 68px; }
    .ec-brand-chip--logo { min-width: 0; padding: 0; }
    .ec-brand-chip__name { font-size: 15px; }
    .ec-brand-marquee__track { animation-duration: 40s; }
}
@media (prefers-reduced-motion: reduce) {
    .ec-brand-marquee__track { animation-duration: 120s; }
}

/* =============================================================
   UTILITIES — Sprint 13.0b A.6 (zero inline pra CSP strict)
   Substitui os 90 style="" inlines dos templates ecommerce/*.
   Conforme decisão #5 (refactor definitivo) + decisão #20 (CSP nonce único).
   ============================================================= */

/* —— Utilitárias gerais de texto / cor / decoração —— */
.ec-u-text-center           { text-align: center; }
.ec-u-text-left             { text-align: left; }
.ec-u-text-muted            { color: var(--ec-text-muted); }
.ec-u-text-soft             { color: var(--ec-text-soft); }
.ec-u-text-primary          { color: var(--ec-primary); }
.ec-u-text-primary-light    { color: var(--ec-primary-light); }
.ec-u-text-success          { color: var(--ec-success); }
.ec-u-text-inherit          { color: inherit; }
.ec-u-no-decor              { text-decoration: none; }

/* —— Utilitárias gerais de fundo —— */
.ec-u-bg-white              { background: var(--ec-white); }
.ec-u-bg-alt                { background: #fafafa; }

/* —— Utilitárias gerais de imagem —— */
.ec-u-img-cover             { width: 100%; height: 100%; object-fit: cover; }
.ec-u-img-cover-rounded     { width: 100%; height: 100%; object-fit: cover; border-radius: var(--ec-radius-sm); }
.ec-u-img-cover-zoom        { width: 70%; height: 70%; object-fit: cover; cursor: zoom-in; }

/* —— Utilitárias de margem (casos específicos repetidos) —— */
.ec-u-mx-auto               { margin-left: auto; margin-right: auto; }
.ec-u-mt-12                 { margin-top: 12px; }
.ec-u-mt-32                 { margin-top: 32px; }
.ec-u-mt-24                 { margin-top: 24px; }
.ec-u-mt-48                 { margin-top: 48px; }
.ec-u-m-0                   { margin: 0; }
.ec-u-mb-8                  { margin-bottom: 8px; }
.ec-u-mb-20                 { margin-bottom: 20px; }

/* —— Section variants com padding controlado —— */
.ec-section--padded         { padding: 60px 0; }
.ec-section--top0           { padding-top: 0; }

/* —— Container variants com largura limitada (centralizados) —— */
.ec-container--narrow       { max-width: 800px; margin-left: auto; margin-right: auto; }
.ec-container--wide-form    { max-width: 900px; margin-left: auto; margin-right: auto; }
.ec-container--success      { max-width: 680px; margin-left: auto; margin-right: auto; }

/* —— Títulos de página repetidos (sobre/contato/cart/quote) —— */
.ec-page-title-spaced       { margin: 20px 0 8px; }
.ec-page-subtitle           { color: var(--ec-text-muted); margin: 0 0 32px; }

/* —— Eyebrow/section title pequeno (product.php Descrição/Aplicações/Ficha técnica) —— */
.ec-product-section__title {
    font-family: var(--ec-font-title);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ec-text-muted);
    margin: 0 0 10px;
}
.ec-product-section__title--spaced {
    font-family: var(--ec-font-title);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ec-text-muted);
    margin: 24px 0 10px;
}
.ec-product__description {
    color: var(--ec-text);
    line-height: 1.7;
    margin: 0 0 24px;
}

/* —— CTA Final Banner (about.php + contact.php — bloco "Pronto para impermeabilizar?")
   Renomeado de ec-cta-banner pra evitar colisão com a regra original (linha 665+)
   que estiliza o banner escuro com gradient da home (.ec-cta-banner / __title / __text). */
.ec-cta-final-banner        { background: #fafafa; padding: 60px 0; }
.ec-cta-final-banner__heading {
    font-family: var(--ec-font-title);
    font-size: 2rem;
    margin-bottom: 16px;
}
.ec-cta-final-banner__text {
    font-size: 1.1rem;
    max-width: 620px;
    margin: 0 auto 32px;
    color: var(--ec-text-muted);
}
.ec-cta-final-banner__link {
    display: inline-block;
    background: var(--ec-primary);
    color: #fff;
    padding: 16px 36px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
}
.ec-cta-final-banner__link:hover  { background: var(--ec-primary-dark); }

/* —— Cart (cart.php) —— */
.ec-cart__row-title {
    font-family: var(--ec-font-title);
    font-size: 16px;
    margin: 4px 0 8px;
}
.ec-cart__row-meta          { font-size: 13px; color: var(--ec-text-muted); }
.ec-cart__row-actions       { display: flex; align-items: flex-start; }
.ec-cart__summary {
    position: sticky;
    top: 140px;
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg);
    padding: 28px;
}
.ec-cart__summary-title {
    font-family: var(--ec-font-title);
    font-size: 20px;
    margin: 0 0 20px;
}
.ec-cart__summary-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--ec-border-soft);
    font-size: 14px;
}
.ec-cart__summary-info {
    padding: 12px 0 20px;
    font-size: 13px;
    color: var(--ec-text-muted);
}

/* —— Catalog (catalog.php) —— */
.ec-catalog__title          { margin-bottom: 8px; }
.ec-catalog__lead           { margin: 0; }
/* A medida é limitada porque o texto do estado vazio deixou de ser curto: a
   mensagem da página de promoção ("No momento não temos promoções disponíveis
   nesta página") ocupava 970px numa linha só a 1440px e terminava POR BAIXO do
   botão flutuante de WhatsApp — que é `fixed` no canto inferior direito e tem
   242px de largura + 16px de recuo, ou seja, come os ~262px finais da tela.

   ⚠️ O 360px é o valor MEDIDO no pior caso, não um chute. O texto é centrado
   na coluna de produtos, então o que importa é a distância do centro dela até
   a borda do botão: a 1200px de tela o centro cai em x=750 e o botão começa em
   x=938, sobrando 188px de meia-largura (2 × 188 = 376). A 1280 sobram 440 e a
   1440, 600 — por isso 1200 é quem manda. Com 560px a primeira linha ia até
   x=1026 e a palavra "disponíveis" ficava escondida atrás da bolha. NÃO subir
   este valor sem remedir a 1200px.

   Em telas pequenas o botão ocupa quase toda a largura útil e QUALQUER conteúdo
   naquela altura fica parcialmente coberto — é o mesmo débito já registrado no
   CLAUDE.md item 28 para a seta do carrossel, e não se resolve por largura. */
.ec-catalog__empty-title {
    font-family: var(--ec-font-title);
    font-size: 22px;
    margin: 0 auto 8px;
    max-width: 360px;
}
/* Mesma medida do título pela mesma razão (a bolha do WhatsApp): a 1200px o
   subtítulo de 480px chegava a x=919 e encostava no cartão da Sol. */
.ec-catalog__empty-text     { color: var(--ec-text-muted); margin: 0 auto 24px; max-width: 360px; }

/* —— Filters (_catalog-filters.php) —— */
.ec-filter__star-icon       { color: var(--ec-accent); font-size: 10px; margin-left: 4px; }
.ec-filter__cat-icon        { font-size: 12px; width: 16px; color: var(--ec-text-muted); }
.ec-filter__app-icon        { font-size: 14px; }
.ec-filter__app-icon--success { color: var(--ec-success); }
.ec-filter__app-icon--warning { color: var(--ec-warning); }

/* —— Home (home.php) —— */
.ec-home__brands-head       { margin-bottom: 20px; }
.ec-home__brands-title      { font-size: 24px; }
.ec-home__cta-stack         { display: flex; flex-direction: column; gap: 12px; }
.ec-home__cta-ghost-light {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

/* —— Product (product.php) —— */
.ec-product__brand-link     { color: inherit; }
.ec-product__buy-btn        { flex: 1; }

/* —— Quote form (quote-form.php) —— */
.ec-quote__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
}
.ec-quote__sidebar {
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg);
    padding: 28px;
    position: sticky;
    top: 140px;
}
.ec-quote__form-section-title {
    font-family: var(--ec-font-title);
    font-size: 18px;
    margin: 0;
}
.ec-quote__form-section-title--spaced {
    font-family: var(--ec-font-title);
    font-size: 18px;
    margin: 16px 0 0;
}
.ec-quote__sidebar-title {
    font-family: var(--ec-font-title);
    font-size: 20px;
    margin: 0 0 16px;
}
.ec-quote__row-grid-2       { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ec-quote__row-grid-3       { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
.ec-quote__row-grid-cep     { display: grid; grid-template-columns: 170px 1fr; gap: 16px; }
.ec-quote__row-grid-city    { display: grid; grid-template-columns: 1fr 140px; gap: 16px; }
.ec-quote__submit-btn       { margin-top: 12px; align-self: flex-start; }

/* ---- Cadastro PJ/PF + autofill (CNPJ/CEP) na cotação ---- */
/* Label não-<label> (o span do grupo de rádios) — espelha .ec-form__row label. */
.ec-form__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ec-text);
    margin-bottom: 6px;
}
/* Banner de erro do formulário (validação server-side / falha no envio). */
.ec-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--ec-radius);
    font-size: 14px;
    margin: 0 0 20px;
}
.ec-alert--danger {
    background: rgba(220, 53, 69, 0.10);
    border: 1px solid rgba(220, 53, 69, 0.35);
    color: #b02a37;
}
/* Toggle Pessoa Física / Jurídica (rádio estilizado, sem JS obrigatório). */
.ec-person-toggle { display: flex; gap: 12px; flex-wrap: wrap; }
.ec-person-toggle__opt { flex: 1 1 180px; margin-bottom: 0; cursor: pointer; }
.ec-person-toggle__opt input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.ec-person-toggle__box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border: 2px solid var(--ec-border);
    border-radius: var(--ec-radius);
    font-size: 15px;
    font-weight: 600;
    color: var(--ec-text);
    background: var(--ec-white);
    transition: var(--ec-transition);
}
.ec-person-toggle__opt input:checked + .ec-person-toggle__box {
    border-color: var(--ec-primary);
    background: rgba(230, 126, 34, 0.08);
    color: var(--ec-primary-dark);
}
.ec-person-toggle__opt input:focus-visible + .ec-person-toggle__box {
    box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.18);
}
/* Campo com status de busca (CNPJ/CEP). */
.ec-lookup-field { position: relative; }
.ec-lookup-field__status {
    display: block;
    margin-top: 6px;
    min-height: 16px;
    font-size: 12px;
    color: var(--ec-text-muted);
}
.ec-lookup-field__status--ok    { color: #1a7f45; }
.ec-lookup-field__status--error { color: #b02a37; }

@media (max-width: 640px) {
    .ec-quote__row-grid-cep,
    .ec-quote__row-grid-city { grid-template-columns: 1fr; }
}
.ec-quote__item-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ec-border-soft);
}
.ec-quote__item-thumb {
    width: 48px;
    height: 48px;
    background: var(--ec-bg);
    border-radius: var(--ec-radius-sm);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.ec-quote__item-body        { flex: 1; min-width: 0; }
.ec-quote__item-name        { font-size: 13px; font-weight: 600; line-height: 1.3; }
.ec-quote__item-meta        { font-size: 12px; color: var(--ec-text-muted); }
.ec-quote__legal {
    font-size: 13px;
    color: var(--ec-text-muted);
    margin: 20px 0 0;
}

/* —— Quote success (quote-success.php) —— */
.ec-quote-success__icon-circle {
    width: 96px;
    height: 96px;
    background: rgba(22, 163, 74, 0.12);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 24px;
}
.ec-quote-success__icon     { font-size: 42px; color: var(--ec-success); }
.ec-quote-success__protocol {
    margin: 40px 0;
    padding: 24px;
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg);
    text-align: left;
}
.ec-quote-success__protocol-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ec-text-muted);
    font-weight: 600;
}
.ec-quote-success__protocol-uid {
    font-family: var(--ec-font-title);
    font-size: 22px;
    font-weight: 700;
    color: var(--ec-dark);
    margin-top: 4px;
}
.ec-quote-success__protocol-meta {
    font-size: 14px;
    color: var(--ec-text-muted);
    margin-top: 8px;
}
.ec-quote-success__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* —— Notfound (notfound.php) —— */
.ec-404__big-number {
    font-family: var(--ec-font-title);
    font-size: 120px;
    font-weight: 800;
    color: var(--ec-primary);
    line-height: 1;
    letter-spacing: -0.04em;
}
.ec-404__title              { margin: 16px 0 8px; }
.ec-404__actions            { margin-top: 32px; }

/* —— Layout (layout.php — header logo dark + footer brand) —— */
.ec-header__logo--dark      { color: white; margin-bottom: 16px; }
.ec-footer__brand           { color: var(--ec-primary); }

/* —— Contact (contact.php — feature WhatsApp tem cor verde override) —— */
.ec-feature--wpp-icon {
    background: rgba(37, 211, 102, 0.12);
    color: #25d366;
}

/* ======================================================================
   HAMBURGER + DRAWER MOBILE (storefront /loja)
   ====================================================================== */

.ec-hamburger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--ec-primary, #e67e22);
    border: none;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s ease, transform 0.1s ease;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(230, 126, 34, 0.25);
}

.ec-hamburger:hover { background: var(--ec-primary-dark, #c66a17); }
.ec-hamburger:active { transform: translateY(1px); }

.ec-hamburger__line {
    display: block;
    width: 22px;
    height: 2.5px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}

.ec-hamburger--active .ec-hamburger__line:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}
.ec-hamburger--active .ec-hamburger__line:nth-child(2) {
    opacity: 0;
}
.ec-hamburger--active .ec-hamburger__line:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

/* Mostra hamburger só em telas <768px (preserva header desktop intacto) */
@media (max-width: 767px) {
    .ec-hamburger { display: flex; }
}

/* Drawer overlay (full screen, atrás do panel) */
.ec-mobile {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.ec-mobile.ec-mobile--active {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.ec-mobile__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.ec-mobile__panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(85vw, 340px);
    background: #fff;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ec-mobile.ec-mobile--active .ec-mobile__panel {
    transform: translateX(0);
}

.ec-mobile__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eaeaea;
    flex-shrink: 0;
}

.ec-mobile__logo img {
    display: block;
    height: 36px;
    width: auto;
    object-fit: contain;
}

.ec-mobile__close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f7;
    border: none;
    border-radius: 8px;
    color: #444;
    font-size: 1.15rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ec-mobile__close:hover { background: #ececef; }

.ec-mobile__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0 8px;
    -webkit-overflow-scrolling: touch;
}

.ec-mobile__section {
    padding: 8px 0;
}

.ec-mobile__section + .ec-mobile__section {
    border-top: 1px solid #f0f0f2;
    margin-top: 4px;
}

.ec-mobile__section-title {
    display: block;
    padding: 10px 20px 6px;
    font-family: var(--font-title, 'Montserrat', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #888;
}

.ec-mobile__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ec-mobile__list li { margin: 0; }

.ec-mobile__list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #1a2332;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    border-left: 3px solid transparent;
}

.ec-mobile__list a:hover,
.ec-mobile__list a:focus-visible {
    background: rgba(230, 126, 34, 0.06);
    color: var(--ec-primary, #e67e22);
    border-left-color: var(--ec-primary, #e67e22);
    outline: none;
}

.ec-mobile__list a i {
    width: 20px;
    text-align: center;
    color: #888;
    font-size: 0.95rem;
}

.ec-mobile__list a:hover i,
.ec-mobile__list a:focus-visible i {
    color: var(--ec-primary, #e67e22);
}

.ec-mobile__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: var(--ec-primary, #e67e22);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 11px;
    margin-left: auto;
}

.ec-mobile__footer {
    padding: 14px 16px;
    border-top: 1px solid #eaeaea;
    background: #fafafa;
    flex-shrink: 0;
}

.ec-mobile__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 18px;
    background: #25d366;
    color: #fff;
    font-family: var(--font-title, 'Montserrat', sans-serif);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.15s ease, transform 0.1s ease;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}

.ec-mobile__cta:hover {
    background: #1ea556;
    transform: translateY(-1px);
}

.ec-mobile__cta:active { transform: translateY(0); }

.ec-mobile__cta i { font-size: 1.15rem; }

/* Body lock quando drawer aberto (controlado pelo JS) */
body.ec-no-scroll { overflow: hidden; }

/* ======================================================================
   POLIMENTO MOBILE STOREFRONT (≤767px)
   - topbar: esconder localização (mantém só horário + telefone)
   - cart: esconder do header (já está no drawer)
   - busca: PRESERVADA inline (regra antiga em max-width:640px coloca
     em linha separada via flex-wrap + order:3 + flex-basis:100%)
   ====================================================================== */

/* Wrapper da nav permite alinhar hamburger + lista de categorias */
.ec-nav__inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 767px) {
    /* Topbar inteira fora do celular (2026-09-10).
       O comentário antigo aqui dizia "esconder localização, manter horário +
       telefone" — e essa premissa deixou de valer: o TELEFONE saiu da barra em
       2026-08-03 (foi para o bloco "Fale com especialista") e o HORÁRIO nunca
       renderiza enquanto `cms_school_info.business_hours` estiver vazio. Sobrou
       só a localização, que a regra escondia — então abaixo de 768px a barra
       ficava com ZERO de conteúdo e 16px do próprio `padding: 8px 0`: uma faixa
       escura morta no topo, que não informa nem clica. Medido: 16px de altura e
       0px de conteúdo em 390, 600 e 767; a 768 volta ao normal (37px com
       "Lauro de Freitas / BA").
       ⚠️ Se um dia o horário for preenchido no admin E se quiser mostrá-lo no
       celular, é aqui que se troca — voltando a `display: block` na barra e
       mantendo só `.ec-topbar-loc { display: none }`. */
    .ec-header__topbar { display: none; }

    /* Cart: vai pro drawer — esconde do header */
    .ec-header__cart { display: none; }

    /* .ec-header__actions vazio em mobile — esconder pra não ocupar espaço */
    .ec-header__actions { display: none; }

    /* Header__main com gap menor em mobile — caber logo + hamburger na linha 1 */
    .ec-header__main { gap: 12px; padding: 14px 0; }

    /* Logo não ocupa espaço extra além do necessário — deixa hamburger ir pra direita */
    .ec-header__logo { flex-shrink: 1; min-width: 0; }
    .ec-header__logo-img { max-width: 220px; height: 48px; }

    /* Hamburger fica na mesma linha do logo, alinhado à direita */
    .ec-hamburger { margin-left: auto; }

    /* Nav de categorias inteira some em mobile (lista no drawer) */
    .ec-nav { display: none; }
}

/* =============================================================================
   FAQ Accordion (página do produto)
   ============================================================================= */
.ec-faq__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 900px;
    margin: 0 auto;
}
.ec-faq__item {
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ec-faq__item:hover {
    border-color: var(--ec-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.ec-faq__question {
    /* botão sem aparência de botão */
    width: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: inherit;
    color: var(--ec-text);
}
.ec-faq__question:hover { color: var(--ec-primary); }
.ec-faq__question:focus-visible {
    outline: 2px solid var(--ec-primary);
    outline-offset: -2px;
}
.ec-faq__question-text {
    flex: 1;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.45;
}
.ec-faq__chevron {
    color: var(--ec-primary);
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.ec-faq__item--open .ec-faq__chevron,
.ec-faq__question[aria-expanded="true"] .ec-faq__chevron {
    transform: rotate(180deg);
}
.ec-faq__answer {
    padding: 0 22px 22px;
    border-top: 1px solid var(--ec-border-light, #ebebeb);
    animation: ecFaqSlideDown 0.25s ease;
}
.ec-faq__answer-text {
    color: var(--ec-text-muted, #4d5156);
    line-height: 1.7;
    font-size: 15px;
    padding-top: 16px;
}
@keyframes ecFaqSlideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
    .ec-faq__question { padding: 14px 16px; }
    .ec-faq__question-text { font-size: 15px; }
    .ec-faq__answer { padding: 0 16px 16px; }
}

/* ==========================================================================
   Toast (feedback add-to-cart) + bump do badge do carrinho
   Topo-direito: o canto inferior-direito ja tem o FAB WhatsApp + chat Sol.
   ========================================================================== */
.ec-header__cart-badge[hidden] { display: none; }
.ec-header__cart-badge.ec-cart-badge--bump { animation: ecCartBump 0.45s var(--ec-ease); }
@keyframes ecCartBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.ec-toast-host {
    position: fixed;
    z-index: 9999;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.ec-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ec-dark);
    color: var(--ec-white);
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow-lg);
    font-family: var(--ec-font-body);
    border-left: 4px solid var(--ec-success);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.3s var(--ec-ease), transform 0.3s var(--ec-ease);
}
.ec-toast--show { opacity: 1; transform: translateY(0); }
.ec-toast--error { border-left-color: var(--ec-danger); }
.ec-toast__icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--ec-success);
}
.ec-toast--error .ec-toast__icon { color: var(--ec-danger); }
.ec-toast__body { flex: 1; min-width: 0; }
.ec-toast__title { margin: 0; font-weight: 700; font-size: 14px; line-height: 1.35; }
.ec-toast__msg {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
}
.ec-toast__action {
    display: inline-block;
    margin-top: 9px;
    color: var(--ec-primary-light);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
.ec-toast__action:hover { text-decoration: underline; }
.ec-toast__close {
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: 0 2px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.ec-toast__close:hover { color: var(--ec-white); }

@media (max-width: 560px) {
    .ec-toast-host { top: 12px; left: 12px; right: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ec-toast { transition: opacity 0.2s linear; transform: none; }
    .ec-toast--show { transform: none; }
    .ec-header__cart-badge.ec-cart-badge--bump { animation: none; }
}

/* ==========================================================================
   Mini-drawer do carrinho (abre ao adicionar a cotacao — layout.php global)
   ========================================================================== */
.ec-cartdrawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    visibility: hidden;
    pointer-events: none;
}
.ec-cartdrawer--open { visibility: visible; pointer-events: auto; }
.ec-cartdrawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 35, 50, 0.55);
    opacity: 0;
    transition: opacity 0.3s var(--ec-ease);
}
.ec-cartdrawer--open .ec-cartdrawer__overlay { opacity: 1; }
.ec-cartdrawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(400px, 92vw);
    background: var(--ec-white);
    display: flex;
    flex-direction: column;
    box-shadow: -16px 0 48px rgba(26, 35, 50, 0.18);
    transform: translateX(100%);
    transition: transform 0.32s var(--ec-ease);
}
.ec-cartdrawer--open .ec-cartdrawer__panel { transform: translateX(0); }
.ec-cartdrawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ec-border);
}
.ec-cartdrawer__title {
    font-family: var(--ec-font-title);
    font-weight: 700;
    font-size: 16px;
    color: var(--ec-text);
    display: flex;
    align-items: center;
    gap: 9px;
}
.ec-cartdrawer__title i { color: var(--ec-primary); }
.ec-cartdrawer__close {
    background: none;
    border: 0;
    font-size: 20px;
    color: var(--ec-text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.ec-cartdrawer__close:hover { color: var(--ec-text); }
.ec-cartdrawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 20px;
}
.ec-cartdrawer__empty {
    color: var(--ec-text-muted);
    font-size: 14px;
    text-align: center;
    padding: 48px 0;
}
.ec-cartdrawer__item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ec-border-soft);
}
.ec-cartdrawer__item:last-child { border-bottom: 0; }
.ec-cartdrawer__item--new { animation: ecDrawerItemIn 0.5s var(--ec-ease); }
@keyframes ecDrawerItemIn {
    0%   { background: rgba(230, 126, 34, 0.14); }
    100% { background: transparent; }
}
.ec-cartdrawer__thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--ec-radius-sm);
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--ec-text-soft);
    font-size: 22px;
}
.ec-cartdrawer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ec-cartdrawer__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ec-cartdrawer__sku {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ec-text-soft);
}
.ec-cartdrawer__name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ec-text);
    line-height: 1.35;
}
.ec-cartdrawer__qty { font-size: 13px; color: var(--ec-text-muted); }
.ec-cartdrawer__foot {
    border-top: 1px solid var(--ec-border);
    padding: 16px 20px;
    background: var(--ec-surface);
}
.ec-cartdrawer__continue {
    display: block;
    width: 100%;
    margin-top: 10px;
    background: none;
    border: 0;
    color: var(--ec-text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px;
}
.ec-cartdrawer__continue:hover { color: var(--ec-primary); }
@media (prefers-reduced-motion: reduce) {
    .ec-cartdrawer__overlay { transition: none; }
    .ec-cartdrawer__panel { transition: none; }
    .ec-cartdrawer--open .ec-cartdrawer__panel { transform: translateX(0); }
    .ec-cartdrawer__item--new { animation: none; }
}

/* ============================================================
   POP-UP MODAL DA HOME (v9.37)
   Fade-in central. Estado inicial: atributo [hidden] (oculto antes do JS).
   JS remove [hidden] e adiciona .ec-popup--visible para o fade-in.
   ============================================================ */
.ec-popup {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.ec-popup[hidden] { display: none; }
.ec-popup--visible { opacity: 1; visibility: visible; }

.ec-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 32, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.ec-popup__box {
    position: relative;
    max-width: 480px;
    width: 100%;
}
.ec-popup--visible .ec-popup__box { animation: ec-popup-in 0.4s ease; }
@keyframes ec-popup-in {
    from { transform: translateY(20px) scale(0.96); opacity: 0.4; }
    to   { transform: none; opacity: 1; }
}

.ec-popup__link { display: block; }

.ec-popup__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.ec-popup__close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #1a2332;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1;
}
.ec-popup__close:hover { background: #f0f0f0; }
.ec-popup__close:focus-visible { outline: 3px solid var(--ec-primary, #e67e22); outline-offset: 2px; }

@media (max-width: 540px) {
    .ec-popup__box { max-width: 92%; }
    .ec-popup__close { top: 6px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .ec-popup { transition: none; }
    .ec-popup--visible .ec-popup__box { animation: none; }
}

/* =============================================================================
   PRODUTO — DESIGN OPÇÃO 2 (product-v2.php, acessível via ?design=2)
   -----------------------------------------------------------------------------
   Protótipo em avaliação lado a lado com o design v1 (.ec-prod-page).
   Hero compacto de conversão + conteúdo longo em abas de largura total.
   Namespace ec-p2-* — zero colisão com o design v1. Quando o design vencedor
   for escolhido, o perdedor sai (esta seção OU a PRODUCT PAGE original).
   ============================================================================= */

/* —— Hero (galeria + card de info) —— */
.ec-p2-hero {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 48px;
    padding: 40px 0 48px;
    align-items: start;
}
.ec-p2-gallery { top: 20px; } /* header não é sticky — encosta no topo real */

.ec-p2-panel {
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg);
    box-shadow: var(--ec-shadow);
    padding: 32px;
}
.ec-p2-panel__brand {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ec-primary-dark);
}
.ec-p2-panel__brand:hover { text-decoration: underline; }
.ec-p2-panel__title {
    font-family: var(--ec-font-title);
    font-size: clamp(24px, 2.6vw, 31px);
    line-height: 1.25;
    color: var(--ec-dark);
    margin: 6px 0 12px;
}
.ec-p2-panel__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13.5px;
    color: var(--ec-text-muted);
}
.ec-p2-panel__sku strong { color: var(--ec-text); }
.ec-p2-panel__short {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ec-border-soft);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ec-text-muted);
}
.ec-p2-panel__short p { margin: 0 0 10px; }
.ec-p2-panel__short p:last-child { margin-bottom: 0; }
.ec-p2-panel__jump {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ec-primary-dark);
}
.ec-p2-panel__jump:hover { text-decoration: underline; }
.ec-p2-panel__jump-arrow { transition: transform 0.2s var(--ec-ease); }
.ec-p2-panel__jump:hover .ec-p2-panel__jump-arrow { transform: translateY(3px); }

/* Caixa de cotação — CTA sempre na 1ª dobra */
.ec-p2-buy {
    margin-top: 20px;
    padding: 18px 20px;
    background: #fdf6ef;
    border: 1px solid rgba(230, 126, 34, 0.28);
    border-radius: var(--ec-radius);
}
.ec-p2-buy__label {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ec-primary-dark);
    margin-bottom: 12px;
}
.ec-p2-buy__row { display: flex; gap: 12px; }
/* Alternativa ao carrinho: cotação de 1 produto pelo WhatsApp */
.ec-p2-buy__wa { margin-top: 12px; }
.ec-p2-buy__wa-hint {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
    color: var(--ec-text-muted);
}

/* Selos de confiança */
.ec-p2-trust {
    list-style: none;
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--ec-border-soft);
    display: grid;
    gap: 10px;
}
.ec-p2-trust__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--ec-dark-soft);
}
.ec-p2-trust__item i {
    width: 20px;
    text-align: center;
    font-size: 15px;
    color: var(--ec-primary);
}

/* —— Conteúdo em abas (largura total) —— */
.ec-p2-content {
    margin: 8px 0 64px;
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg);
    box-shadow: var(--ec-shadow-sm);
    scroll-margin-top: 16px;
}
.ec-p2-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 16px 0;
    background: var(--ec-white);
    border-bottom: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg) var(--ec-radius-lg) 0 0;
    position: sticky;
    top: 0;
    z-index: 20;
    overflow-x: auto;
    scrollbar-width: thin;
}
.ec-p2-tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ec-text-muted);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: var(--ec-transition);
}
.ec-p2-tab i { font-size: 13px; opacity: 0.75; }
.ec-p2-tab:hover { color: var(--ec-dark); }
.ec-p2-tab:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: -2px; border-radius: 6px; }
.ec-p2-tab--active {
    color: var(--ec-primary-dark);
    border-bottom-color: var(--ec-primary);
}
.ec-p2-tab__count {
    background: var(--ec-border-soft);
    color: var(--ec-text-muted);
    border-radius: var(--ec-radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    padding: 1px 8px;
}
.ec-p2-tab--active .ec-p2-tab__count {
    background: rgba(230, 126, 34, 0.14);
    color: var(--ec-primary-dark);
}
.ec-p2-tabpanel { padding: 40px clamp(20px, 5vw, 56px) 48px; }
.ec-p2-tabpanel__lead { margin: 0 0 20px; color: var(--ec-text-muted); }

/* —— Descrição: coluna de leitura + tipografia tratada —— */
.ec-p2-prose-wrap { position: relative; scroll-margin-top: 72px; }
.ec-p2-prose-wrap--collapsed { max-height: 520px; overflow: hidden; }
.ec-p2-prose-fade {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 150px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--ec-white) 80%);
    pointer-events: none;
}
.ec-p2-prose-wrap--collapsed .ec-p2-prose-fade { display: block; }

.ec-p2-prose {
    max-width: 76ch;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
    color: var(--ec-dark-soft);
    overflow-wrap: break-word;
}
.ec-p2-prose > :first-child { margin-top: 0; }
.ec-p2-prose p { margin: 0 0 18px; }
.ec-p2-prose strong, .ec-p2-prose b { color: var(--ec-dark); }
.ec-p2-prose a {
    color: var(--ec-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Tags cobertas = allowlist de Str::sanitizeRichHtml (p, br, strong, b, em,
   i, u, ul, ol, li, h2-h4, blockquote, a) — não estilizar tag que o
   sanitizador remove (table/hr/h1 nunca chegam ao front). */
.ec-p2-prose h2 {
    font-family: var(--ec-font-title);
    font-size: 23px;
    line-height: 1.3;
    color: var(--ec-dark);
    margin: 36px 0 16px;
    padding-left: 14px;
    border-left: 4px solid var(--ec-primary);
}
.ec-p2-prose h3 {
    font-family: var(--ec-font-title);
    font-size: 19px;
    color: var(--ec-dark);
    margin: 30px 0 12px;
}
.ec-p2-prose h4 {
    font-family: var(--ec-font-title);
    font-size: 16.5px;
    color: var(--ec-dark);
    margin: 24px 0 10px;
}
.ec-p2-prose ul {
    list-style: none;
    margin: 0 0 20px;
    padding-left: 4px;
}
.ec-p2-prose ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
}
.ec-p2-prose ul li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--ec-primary);
}
.ec-p2-prose ol { margin: 0 0 20px; padding-left: 26px; }
.ec-p2-prose ol li { margin-bottom: 10px; padding-left: 4px; }
.ec-p2-prose ol li::marker { color: var(--ec-primary); font-weight: 700; }
.ec-p2-prose blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    background: var(--ec-bg);
    border-left: 4px solid var(--ec-primary);
    border-radius: var(--ec-radius-sm);
}
.ec-p2-prose blockquote p:last-child { margin-bottom: 0; }

/* Botão "Ver descrição completa" */
.ec-p2-readmore { text-align: center; margin-top: 18px; }
.ec-p2-readmore__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border: 2px solid var(--ec-border);
    border-radius: var(--ec-radius-pill);
    background: var(--ec-white);
    font-weight: 700;
    font-size: 14px;
    color: var(--ec-primary-dark);
    transition: var(--ec-transition);
}
.ec-p2-readmore__btn:hover { border-color: var(--ec-primary); background: #fdf6ef; }
.ec-p2-readmore__btn:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }
.ec-p2-readmore__btn[hidden] { display: none; }
.ec-p2-readmore__btn i { transition: transform 0.2s var(--ec-ease); }
.ec-p2-readmore__btn--open i { transform: rotate(180deg); }

/* —— Ficha técnica (grid de especificações) —— */
.ec-p2-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 28px;
    margin: 0;
    max-width: 980px;
}
.ec-p2-specs__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 13px 16px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: var(--ec-radius-sm);
}
.ec-p2-specs__row dt {
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ec-text-muted);
}
.ec-p2-specs__row dd {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ec-dark);
    text-align: right;
}

/* —— Aplicações (cards com check) —— */
.ec-p2-apps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.ec-p2-apps__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ec-bg);
    border: 1px solid var(--ec-border-soft);
    border-radius: var(--ec-radius-sm);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ec-dark-soft);
}
.ec-p2-apps__item i { color: var(--ec-success); font-size: 17px; flex: none; }

/* —— FAQ dentro da aba (reusa .ec-faq__*) —— */
.ec-p2-faq { max-width: 860px; }

/* —— Barra de cotação sticky —— */
.ec-p2-stickybar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translate(-50%, 140%);
    width: min(720px, calc(100% - 32px));
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 12px 10px 14px;
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-pill);
    box-shadow: 0 12px 40px rgba(26, 35, 50, 0.18);
    z-index: 85; /* abaixo do FAB WhatsApp (90) e do widget de chat */
    opacity: 0;
    /* visibility tira o botão interno da ordem de tabulação enquanto a barra
       está oculta (a11y — aria-hidden não bloqueia foco sozinho). A transição
       de visibility é discreta: espera o fade-out terminar antes de esconder. */
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s var(--ec-ease), opacity 0.3s var(--ec-ease), visibility 0.3s;
}
.ec-p2-stickybar--visible {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.ec-p2-stickybar__info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.ec-p2-stickybar__thumb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--ec-border);
    background: var(--ec-white);
    flex: none;
}
.ec-p2-stickybar__thumb--empty {
    display: grid;
    place-items: center;
    color: var(--ec-text-soft);
}
.ec-p2-stickybar__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}
.ec-p2-stickybar__text strong {
    font-size: 14px;
    color: var(--ec-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ec-p2-stickybar__text span { font-size: 12px; color: var(--ec-text-muted); }
.ec-p2-stickybar__btn {
    flex: none;
    padding: 12px 22px;
    border-radius: var(--ec-radius-pill);
    font-size: 14px;
}

/* —— Responsivo —— */
@media (max-width: 900px) {
    .ec-p2-hero {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 24px 0 36px;
    }
    .ec-p2-panel { padding: 24px 20px; }
    .ec-p2-tabpanel { padding: 28px 18px 36px; }
    .ec-p2-prose { font-size: 15.5px; }
    .ec-p2-specs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ec-p2-buy__row { flex-direction: column; }
    .ec-p2-buy__row .ec-qty { align-self: center; }
    /* Barra sticky vira botão flutuante — deixa a coluna direita livre
       pros FABs (WhatsApp + chat Sol) */
    .ec-p2-stickybar {
        left: 12px;
        right: 88px;
        bottom: 12px;
        width: auto;
        transform: translateY(140%);
        padding: 8px;
    }
    .ec-p2-stickybar--visible { transform: translateY(0); }
    .ec-p2-stickybar__info { display: none; }
    .ec-p2-stickybar__btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ec-p2-stickybar { transition: none; }
    .ec-p2-panel__jump-arrow,
    .ec-p2-readmore__btn i { transition: none; }
}

/* ============================================================
   SKIP-LINK — WCAG 2.2 / AXO (gabarito geo-axo v2.6, secao 6.5)
   Primeiro elemento focavel da pagina; invisivel ate receber foco.
   ============================================================ */
.ec-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 10px 18px;
    background: var(--accent, #2c3e50);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}
.ec-skip-link:focus {
    left: 0;
    outline: 3px solid var(--primary, #e67e22);
    outline-offset: 2px;
}

/* ============================================================
   ANSWER-BLOCK — gabarito geo-axo v2.6, secao 2 (Bloco D)
   Conteudo citavel: H2-prompt + resposta ~100 palavras + CTA.
   ============================================================ */
.answer-block {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 20px 8px;
}
.answer-block h2 {
    font-size: 1.35rem;
    line-height: 1.35;
    margin-bottom: 12px;
    color: var(--gray-dark, #343a40);
}
.answer-block p {
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--text, #2d3436);
    margin-bottom: 10px;
}
.answer-block a {
    color: var(--primary, #e67e22);
    font-weight: 600;
    text-decoration: underline;
}

/* ============================================================
   BREADCRUMB SEMANTICO (nav>ol>li) — mesmo visual do padrao div.
   Modificador --list nao afeta os breadcrumbs div legados.
   ============================================================ */
ol.ec-breadcrumb--list {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.ec-breadcrumb--list li { display: inline-flex; align-items: center; }

/* ============================================================
   BLOG (Blog.md) — cards, índice, artigo. Usa os tokens :root.
   ============================================================ */

.ec-u-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* --- Grid + card --- */
.ec-blog-grid { grid-template-columns: repeat(3, 1fr); }

.ec-blog-card {
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--ec-transition);
    color: inherit;
    text-decoration: none;
}
.ec-blog-card:hover { transform: translateY(-4px); border-color: var(--ec-primary); box-shadow: var(--ec-shadow-hover); }
.ec-blog-card:focus-visible { outline: 3px solid var(--ec-primary); outline-offset: 2px; }

.ec-blog-card__image {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--ec-bg), var(--ec-border-soft));
    display: grid; place-items: center; overflow: hidden;
}
.ec-blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ec-ease); }
.ec-blog-card:hover .ec-blog-card__image img { transform: scale(1.05); }
.ec-blog-card__placeholder { font-size: 32px; color: var(--ec-text-soft); }

.ec-blog-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ec-blog-card__meta {
    display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
    font-size: 12px; color: var(--ec-text-muted);
}
.ec-blog-card__cat {
    color: var(--ec-primary-dark); font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; font-size: 11px;
}
.ec-blog-card__title {
    font-family: var(--ec-font-title); font-weight: 700; font-size: 17px; line-height: 1.35;
    color: var(--ec-dark); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ec-blog-card__excerpt {
    font-size: 14px; color: var(--ec-text-muted); line-height: 1.55; margin: 0; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ec-blog-card__cta { margin-top: auto; color: var(--ec-primary-dark); font-weight: 600; font-size: 13px; }

/* --- Breadcrumb --- */
.ec-blog-breadcrumb { padding: 16px 0 0; font-size: 13px; color: var(--ec-text-muted); }
.ec-blog-breadcrumb a { color: var(--ec-text-muted); text-decoration: none; }
.ec-blog-breadcrumb a:hover { color: var(--ec-primary); }
.ec-blog-breadcrumb span[aria-hidden] { margin: 0 8px; color: var(--ec-text-soft); }

/* --- Índice: toolbar, chips, vazio, paginação --- */
.ec-blog-toolbar { display: flex; gap: 8px; margin: 0 auto 20px; max-width: 520px; }
.ec-blog-search {
    flex: 1; padding: 12px 16px; border: 1px solid var(--ec-border); border-radius: var(--ec-radius-pill);
    font-family: var(--ec-font-body); font-size: 15px; color: var(--ec-text); background: var(--ec-white);
}
.ec-blog-search:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 1px; }

.ec-blog-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 32px; }
.ec-blog-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; min-height: 36px;
    border: 1px solid var(--ec-border); border-radius: var(--ec-radius-pill);
    background: var(--ec-white); color: var(--ec-text); text-decoration: none;
    font-size: 13px; font-weight: 600; transition: var(--ec-transition);
}
.ec-blog-chip:hover { border-color: var(--ec-primary); color: var(--ec-primary-dark); }
.ec-blog-chip:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }
.ec-blog-chip--active { background: var(--ec-dark); color: var(--ec-white); border-color: var(--ec-dark); }
.ec-blog-chip__count { color: var(--ec-text-soft); font-weight: 500; }

.ec-blog-empty { text-align: center; padding: 64px 16px; color: var(--ec-text-muted); }
.ec-blog-empty i { font-size: 40px; color: var(--ec-text-soft); display: block; margin-bottom: 16px; }
.ec-blog-empty p { margin: 0 0 20px; font-size: 16px; }

.ec-blog-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }

.ec-blog-preview-bar {
    background: var(--ec-warning); color: var(--ec-dark);
    text-align: center; padding: 10px 16px; font-size: 14px; font-weight: 600;
}

/* --- Artigo --- */
.ec-article { padding: 8px 0 40px; }
.ec-article__container { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.ec-article__header { padding: 24px 0 8px; }
.ec-article__cat {
    display: inline-block; margin-bottom: 12px;
    color: var(--ec-primary-dark); font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; font-size: 12px; text-decoration: none;
}
.ec-article__cat:hover { text-decoration: underline; }
.ec-article__title {
    font-family: var(--ec-font-title); font-weight: 800;
    font-size: clamp(28px, 4vw, 42px); line-height: 1.15; color: var(--ec-dark); margin: 0 0 16px;
}
.ec-article__lead { font-size: 20px; line-height: 1.5; color: var(--ec-text-muted); margin: 0 0 20px; }
.ec-article__meta {
    display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
    font-size: 14px; color: var(--ec-text-muted);
    padding-bottom: 24px; border-bottom: 1px solid var(--ec-border);
}
.ec-article__author { display: inline-flex; align-items: center; gap: 8px; }
.ec-article__author a { color: var(--ec-text); font-weight: 600; text-decoration: none; }
.ec-article__author a:hover { color: var(--ec-primary); }
.ec-article__author-img { border-radius: var(--ec-radius-pill); object-fit: cover; }
.ec-article__updated { font-style: italic; }

.ec-article__cover { margin: 28px 0; }
.ec-article__cover img { width: 100%; height: auto; border-radius: var(--ec-radius-lg); }
.ec-article__cover figcaption { margin-top: 8px; font-size: 13px; color: var(--ec-text-soft); text-align: center; }

/* Tipografia do corpo (conteúdo do CKEditor, já sanitizado) */
.ec-article__body { font-size: 18px; line-height: 1.75; color: var(--ec-text); }
.ec-article__body > * + * { margin-top: 1.2em; }
.ec-article__body h2 { font-family: var(--ec-font-title); font-weight: 800; font-size: 28px; line-height: 1.25; color: var(--ec-dark); margin-top: 1.8em; }
.ec-article__body h3 { font-family: var(--ec-font-title); font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--ec-dark); margin-top: 1.5em; }
.ec-article__body a { color: var(--ec-primary-dark); text-decoration: underline; }
.ec-article__body ul, .ec-article__body ol { padding-left: 1.4em; }
.ec-article__body li + li { margin-top: .4em; }
.ec-article__body img { max-width: 100%; height: auto; border-radius: var(--ec-radius-sm); }
.ec-article__body blockquote {
    border-left: 4px solid var(--ec-primary); background: var(--ec-bg);
    padding: 12px 20px; border-radius: 0 var(--ec-radius-sm) var(--ec-radius-sm) 0;
    font-style: italic; color: var(--ec-dark-soft);
}
.ec-article__body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.ec-article__body th, .ec-article__body td { border: 1px solid var(--ec-border); padding: 10px 12px; text-align: left; }
.ec-article__body th { background: var(--ec-bg); font-weight: 700; }

.ec-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.ec-article__refs { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ec-border); }
.ec-article__refs-title { font-family: var(--ec-font-title); font-size: 18px; margin: 0 0 12px; }
.ec-article__refs ul { padding-left: 1.2em; font-size: 14px; color: var(--ec-text-muted); word-break: break-word; }

.ec-article__share { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 14px; color: var(--ec-text-muted); }
.ec-article__share a {
    display: inline-grid; place-items: center; width: 40px; height: 40px;
    border-radius: var(--ec-radius-pill); background: var(--ec-bg); color: var(--ec-dark);
    transition: var(--ec-transition); text-decoration: none;
}
.ec-article__share a:hover { background: var(--ec-primary); color: var(--ec-white); }
.ec-article__share a:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }

.ec-article__authorbox {
    display: flex; gap: 16px; margin-top: 40px; padding: 20px;
    background: var(--ec-bg); border-radius: var(--ec-radius-lg);
}
.ec-article__authorbox img { border-radius: var(--ec-radius-pill); object-fit: cover; flex-shrink: 0; }
.ec-article__authorbox strong a { color: var(--ec-dark); text-decoration: none; }
.ec-article__author-role { display: block; font-size: 13px; color: var(--ec-text-muted); margin: 2px 0 8px; }
.ec-article__authorbox p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ec-text-muted); }

.ec-article__cta {
    display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
    margin-top: 40px; padding: 28px; background: var(--ec-dark); color: var(--ec-white);
    border-radius: var(--ec-radius-lg);
}
.ec-article__cta h2 { font-family: var(--ec-font-title); font-size: 22px; margin: 0 0 6px; }
.ec-article__cta p { margin: 0; color: rgba(255,255,255,.75); font-size: 15px; }

.ec-article__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.ec-article__nav-link {
    display: flex; flex-direction: column; gap: 4px; padding: 16px 20px;
    border: 1px solid var(--ec-border); border-radius: var(--ec-radius); text-decoration: none;
    color: var(--ec-dark); transition: var(--ec-transition);
}
.ec-article__nav-link:hover { border-color: var(--ec-primary); }
.ec-article__nav-link--next { text-align: right; }
.ec-article__nav-link span { font-size: 12px; color: var(--ec-text-muted); }
.ec-article__nav-link strong { font-size: 15px; line-height: 1.3; }

.ec-blog-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ec-blog-related__item {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px;
    background: var(--ec-bg); border: 1px solid var(--ec-border); border-radius: var(--ec-radius);
    text-decoration: none; color: var(--ec-dark); font-weight: 600; font-size: 15px;
    transition: var(--ec-transition);
}
.ec-blog-related__item:hover { border-color: var(--ec-primary); color: var(--ec-primary-dark); }
.ec-blog-related__item span { flex: 1; }
.ec-blog-related__item i:last-child { color: var(--ec-text-soft); }

/* --- Responsivo (segue os breakpoints existentes) --- */
@media (max-width: 1024px) {
    .ec-blog-grid, .ec-blog-related { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ec-blog-grid, .ec-blog-related { grid-template-columns: 1fr; }
    .ec-article__nav { grid-template-columns: 1fr; }
    .ec-article__nav-link--next { text-align: left; }
    .ec-article__title { font-size: 26px; }
    .ec-article__lead { font-size: 17px; }
    .ec-article__body { font-size: 17px; }
    .ec-article__cta { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .ec-blog-card, .ec-blog-card__image img, .ec-blog-chip, .ec-article__share a,
    .ec-article__nav-link, .ec-blog-related__item { transition: none; }
    .ec-blog-card:hover { transform: none; }
    .ec-blog-card:hover .ec-blog-card__image img { transform: none; }
}

/* ============================================================
   BOTÃO FLUTUANTE DE WHATSAPP POR SETOR  (2026-08-18)
   Fica ACIMA do widget da Sol (que está em bottom: 40px, FAB de
   64px) — daí o bottom: 120px. Fechado mostra a etiqueta
   "Precisa de orçamento? / Fale Conosco!"; aberto vira "X" e sobe
   a caixa "Iniciar uma conversa" com um item por setor.
   Toggle em ecommerce.js (CSP strict: zero JS inline).
   ============================================================ */

.ec-wa {
    position: fixed;
    right: 20px;
    bottom: 40px;  /* sozinho: ocupa o canto da Sol */
    z-index: 9985; /* abaixo do widget de chat (9990): a janela da Sol cobre */
    font-family: var(--ec-font-body);
}

/* Com a Sol na página, sobe para ficar ACIMA dela. A Sol pode não ser
   desenhada (chat em teste só para admin logado, 2026-10-05 — ver
   ChatAccessGate): sem ela, os 120px deixariam um vão vazio de ~80px no
   canto. O widget vem ANTES no HTML, por isso o seletor de irmão `~`
   resolve sem :has(), sem PHP e sem JS. */
.ac1-widget ~ .ec-wa {
    bottom: 120px;
}

/* --- Gatilho (etiqueta + avatar verde) --- */
.ec-wa__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.ec-wa__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    padding: 10px 16px;
    background: var(--ec-white);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(26, 35, 50, 0.16);
    text-align: right;
    white-space: nowrap;
}
/* setinha apontando para o avatar */
.ec-wa__label::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--ec-white);
    transform: translateY(-50%) rotate(45deg);
}
.ec-wa__label-top {
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-primary);
    line-height: 1.2;
}
.ec-wa__label-main {
    font-size: 15px;
    font-weight: 800;
    color: var(--ec-dark);
    line-height: 1.2;
}

.ec-wa__circle {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #25d366;
    color: var(--ec-white);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.42);
    transition: transform var(--ec-transition, 0.2s ease), background 0.2s ease;
}
.ec-wa__toggle:hover .ec-wa__circle { transform: scale(1.05); background: #1ebe5a; }
.ec-wa__toggle:focus-visible .ec-wa__circle { outline: 3px solid var(--ec-dark); outline-offset: 3px; }

.ec-wa__icon { font-size: 30px; line-height: 1; }
.ec-wa__icon--close { display: none; font-size: 26px; }
.ec-wa--open .ec-wa__icon--wa { display: none; }
.ec-wa--open .ec-wa__icon--close { display: block; }
.ec-wa--open .ec-wa__label { display: none; }

/* --- Caixa "Iniciar uma conversa" --- */
.ec-wa__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 14px);
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--ec-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(26, 35, 50, 0.24);
    opacity: 0;
    /* visibility tira os links da ordem de tabulação enquanto fechado
       (aria-hidden sozinho não bloqueia foco). */
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.ec-wa--open .ec-wa__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.ec-wa__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 16px;
    background: #4dc247;
    color: var(--ec-white);
}
.ec-wa__head-title { font-size: 17px; font-weight: 800; line-height: 1.2; }
.ec-wa__head-sub { font-size: 12px; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, 0.92); }

.ec-wa__note {
    margin: 0;
    padding: 14px 18px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ec-text-soft);
}

.ec-wa__list {
    list-style: none;
    margin: 0;
    padding: 0 12px 14px;
    display: grid;
    gap: 8px;
    max-height: 46vh;
    overflow-y: auto;
}
.ec-wa__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f4f5f7;
    border-left: 3px solid #4dc247;
    border-radius: 6px;
    text-decoration: none;
    color: var(--ec-text);
    transition: background 0.18s ease;
}
.ec-wa__item:hover,
.ec-wa__item:focus-visible { background: #e9ebef; }

.ec-wa__avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #4dc247;
    color: var(--ec-white);
    font-size: 20px;
}
.ec-wa__item-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ec-wa__item-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ec-dark);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-wa__item-role {
    font-size: 11px;
    font-weight: 500;
    color: var(--ec-text-soft);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-wa__item-go { margin-left: auto; font-size: 18px; color: #4dc247; }

/* A bolha de saudação da Sol ocupa exatamente este canto por ~30s.
   Enquanto ela estiver no ar, o botão do WhatsApp sai de cena em vez de
   colidir. Navegador sem :has() ignora a regra (comportamento antigo). */
.ac1-widget:has(.ac1-greeting--visible) ~ .ec-wa {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s;
}

@media (max-width: 640px) {
    .ec-wa { right: 16px; bottom: 40px; }
    .ac1-widget ~ .ec-wa { bottom: 116px; }
    .ec-wa__circle { width: 58px; height: 58px; }
    .ec-wa__icon { font-size: 27px; }
    .ec-wa__label { padding: 8px 13px; }
    .ec-wa__label-top { font-size: 11px; }
    .ec-wa__label-main { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .ec-wa__panel, .ec-wa__circle, .ec-wa__item { transition: none; }
    .ec-wa__toggle:hover .ec-wa__circle { transform: none; }
}

/* ============================================================
   PÁGINA DE CONTATO  (2026-08-18)
   Hero escuro + formulário real (POST /loja/contato) ao lado dos
   canais diretos + bloco de localização vindo do CMS
   (sections/contato-loja). Zero CSS inline (CSP strict).
   ============================================================ */

/* --- Hero --- */
.ec-contact-hero {
    padding: 64px 0 56px;
    background:
        radial-gradient(1200px 320px at 15% -10%, rgba(230, 126, 34, 0.22), transparent 60%),
        linear-gradient(135deg, var(--ec-dark) 0%, var(--ec-dark-soft) 100%);
    color: var(--ec-white);
}
.ec-contact-hero__inner { max-width: 760px; }
.ec-contact-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: var(--ec-radius-pill);
    background: rgba(230, 126, 34, 0.18);
    border: 1px solid rgba(230, 126, 34, 0.45);
    color: var(--ec-primary-light);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ec-contact-hero__title {
    margin: 18px 0 12px;
    font-family: var(--ec-font-title);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.1;
}
.ec-contact-hero__text {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}
.ec-contact-hero__facts {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
}
.ec-contact-hero__facts li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.ec-contact-hero__facts i { color: var(--ec-primary-light); }

/* --- Grid principal --- */
.ec-contact { background: var(--ec-bg); }
.ec-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

/* --- Cartão do formulário --- */
.ec-contact__form-card {
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg);
    box-shadow: var(--ec-shadow-lg);
    padding: 32px;
}
.ec-contact__form-head { margin-bottom: 22px; }
.ec-contact__form-title {
    margin: 0 0 6px;
    font-family: var(--ec-font-title);
    font-size: 24px;
    font-weight: 800;
    color: var(--ec-dark);
}
.ec-contact__form-sub { margin: 0; font-size: 14px; color: var(--ec-text-muted); }

/* o .ec-form base limita a 560px; aqui o cartão já define a largura */
.ec-contact__form { max-width: none; }
.ec-contact__form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ec-contact__form textarea { resize: vertical; min-height: 130px; }
.ec-contact__submit { align-self: flex-start; }
.ec-contact__privacy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: -4px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ec-text-soft);
}
.ec-contact__privacy i { margin-top: 2px; }

/* Honeypot: fora da tela, mas presente no DOM (bot preenche, humano não vê).
   display:none é ignorado por parte dos bots — por isso o deslocamento. */
.ec-contact__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Sucesso (PRG: ?enviado=1) --- */
.ec-contact__success { text-align: center; padding: 18px 8px 8px; }
.ec-contact__success-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(22, 163, 74, 0.12);
    color: var(--ec-success);
    font-size: 32px;
}
.ec-contact__success-title {
    margin: 0 0 10px;
    font-family: var(--ec-font-title);
    font-size: 24px;
    font-weight: 800;
    color: var(--ec-dark);
}
.ec-contact__success-text {
    margin: 0 auto 24px;
    max-width: 440px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ec-text-muted);
}
.ec-contact__success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.ec-btn--wa { background: #25d366; color: var(--ec-white); }
.ec-btn--wa:hover { background: #1ebe5a; transform: translateY(-2px); }

/* --- Coluna dos canais --- */
.ec-contact__channels {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 96px;
}
.ec-contact__block {
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg);
    padding: 22px;
}
.ec-contact__block-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 4px;
    font-family: var(--ec-font-title);
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-dark);
}
.ec-contact__block-title .fa-whatsapp { color: #25d366; }
.ec-contact__block-sub { margin: 0 0 14px; font-size: 12.5px; color: var(--ec-text-soft); }

.ec-contact__wa-list, .ec-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ec-contact__wa-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    background: #f4f7f5;
    border-left: 3px solid #25d366;
    border-radius: var(--ec-radius-sm);
    text-decoration: none;
    color: var(--ec-text);
    transition: background 0.18s ease;
}
.ec-contact__wa-item:hover, .ec-contact__wa-item:focus-visible { background: #e8f1ec; }
.ec-contact__wa-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #25d366;
    color: var(--ec-white);
    font-size: 19px;
}
.ec-contact__wa-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ec-contact__wa-txt strong { font-size: 14px; font-weight: 700; color: var(--ec-dark); }
.ec-contact__wa-txt span { font-size: 12.5px; color: var(--ec-text-muted); }
.ec-contact__wa-go { margin-left: auto; font-size: 13px; color: var(--ec-text-soft); }
.ec-contact__wa-item:hover .ec-contact__wa-go { color: #25d366; }

.ec-contact__list a, .ec-contact__list-static {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    text-decoration: none;
    color: var(--ec-text);
    border-radius: var(--ec-radius-sm);
    transition: background 0.18s ease;
}
.ec-contact__list a:hover { background: var(--ec-border-soft); }
.ec-contact__list-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(230, 126, 34, 0.1);
    color: var(--ec-primary);
    font-size: 14px;
}
.ec-contact__list span strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ec-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ec-contact__list span { font-size: 14px; color: var(--ec-text); line-height: 1.35; }

.ec-contact__cta {
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.1), rgba(241, 196, 15, 0.08));
    border: 1px solid rgba(230, 126, 34, 0.24);
    border-radius: var(--ec-radius-lg);
    padding: 22px;
}
.ec-contact__cta-title {
    margin: 0 0 6px;
    font-family: var(--ec-font-title);
    font-size: 16px;
    font-weight: 800;
    color: var(--ec-dark);
}
.ec-contact__cta-text { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--ec-text-muted); }

/* --- Bloco de localização (sections/contato-loja) --- */
/* scroll-margin-top: alvo da âncora #localizacao (item "Localização" do menu).
   Sem ela o título encosta no topo da viewport e some atrás do header. */
.ec-local { background: var(--ec-white); scroll-margin-top: 24px; }
.ec-local__head { margin-bottom: 26px; }
.ec-local__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 24px;
    /* stretch: o cartão de endereço acompanha a altura da foto (as duas caixas
       terminam na mesma linha, pedido do dono em 2026-08-18). */
    align-items: stretch;
}
.ec-local__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px;
    border-radius: var(--ec-radius-lg);
    border: 1px solid var(--ec-border);
    background:
        radial-gradient(600px 200px at 90% 0%, rgba(230, 126, 34, 0.08), transparent 70%),
        var(--ec-bg);
    overflow: hidden;
}
/* malha discreta ao fundo, lembrando um mapa — puro CSS, zero requisição */
.ec-local__card--map::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(26, 35, 50, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 35, 50, 0.05) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
}
.ec-local__card > * { position: relative; z-index: 1; }
.ec-local__pin {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--ec-primary);
    color: var(--ec-white);
    font-size: 20px;
}
.ec-local__card-title {
    margin: 0 0 8px;
    font-family: var(--ec-font-title);
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-dark);
}
.ec-local__address { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--ec-text); max-width: 34ch; }
/* Grupo de horários: um período por linha (seg-qui e sexta têm escalas
   diferentes). A margem inferior mora aqui para o espaçamento do cartão ficar
   igual ao de antes quando há um período só. */
.ec-local__hours-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 20px;
}
.ec-local__hours {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ec-text-muted);
}
.ec-local__hours i { color: var(--ec-primary); }
/* empurra o "Como chegar" para o rodapé do cartão quando ele estica junto
   com a foto — o botão fica alinhado à base da imagem ao lado. */
.ec-local__cta { display: inline-flex; align-self: flex-start; margin-top: auto; }

/* Foto da loja física (config do tenant: extras.foto_loja) */
.ec-local__photo {
    margin: 0;
    border-radius: var(--ec-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ec-border);
    box-shadow: var(--ec-shadow-lg);
    background: var(--ec-bg);
}
.ec-local__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Responsivo --- */
@media (max-width: 1024px) {
    .ec-contact__grid, .ec-local__grid { grid-template-columns: 1fr; }
    .ec-contact__channels { position: static; }
}
@media (max-width: 640px) {
    .ec-contact-hero { padding: 44px 0 40px; }
    .ec-contact-hero__facts { gap: 8px 18px; }
    .ec-contact__form-card { padding: 22px 18px; }
    .ec-contact__form-row2 { grid-template-columns: 1fr; gap: 20px; }
    .ec-contact__submit { width: 100%; justify-content: center; }
    .ec-local__card { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .ec-contact__wa-item, .ec-contact__list a { transition: none; }
    .ec-btn--wa:hover { transform: none; }
}

/* =============================================================
   CATEGORY RAIL — carrossel de categorias da home
   Bloco "Explore por Categoria": só ícone + nome, em trilho
   horizontal com setas. Substituiu o grid `.ec-cat-grid`/
   `.ec-cat-card`, apagado em 2026-08-31 — o dono viu as duas
   versões lado a lado na home e escolheu esta.
   ============================================================= */

.ec-catrail {
    position: relative;
}

/* Rolagem NATIVA (não transform): dá de graça arrasto no celular,
   trackpad, shift+roda e navegação por teclado — e continua rolando
   se o JS não carregar. As setas são só o atalho por cima disso. */
.ec-catrail__track {
    display: flex;
    gap: 16px;
    margin: 0;
    /* ⚠️ `overflow-x: auto` promove `overflow-y` a `auto` (mesma armadilha
       já documentada em `.ec-nav__list`). Sem esta folga vertical o levante
       do card no hover e a sombra saem CORTADOS e nasce uma barra vertical
       parasita. Não zerar este padding. */
    padding: 10px 4px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    /* Casa com o padding lateral acima. Sem isto o snap alinha o 1º card
       com a borda do CONTEÚDO, o repouso fica em scrollLeft: 4 (não 0) e a
       seta "anterior" nasce habilitada sem ter para onde voltar. Medido. */
    scroll-padding-inline: 4px;
    /* A afordância são as setas; a barra nativa só sujaria o bloco. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ec-catrail__track::-webkit-scrollbar { display: none; }
.ec-catrail__track:focus-visible {
    outline: 2px solid var(--ec-primary);
    outline-offset: 4px;
    border-radius: var(--ec-radius);
}

.ec-catrail__item {
    /* Largura fixa + snap: o clique na seta sempre para com um card
       alinhado à borda esquerda, nunca cortado pela metade. */
    flex: 0 0 168px;
    scroll-snap-align: start;
}

.ec-catrail__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    height: 100%;
    padding: 24px 14px;
    background: var(--ec-white);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-lg);
    text-align: center;
    text-decoration: none;
    transition: var(--ec-transition);
}
.ec-catrail__card:hover {
    /* Levante menor que o do grid (-6px): aqui ele precisa caber na
       folga vertical do track sem gerar barra de rolagem. */
    transform: translateY(-4px);
    border-color: var(--ec-primary);
    box-shadow: var(--ec-shadow-hover);
}

.ec-catrail__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: var(--ec-radius);
    background: rgba(230, 126, 34, 0.10);
    color: var(--ec-primary);
    font-size: 24px;
    transition: var(--ec-transition);
}
.ec-catrail__card:hover .ec-catrail__icon {
    background: linear-gradient(135deg, var(--ec-primary), var(--ec-primary-dark));
    color: var(--ec-white);
    transform: scale(1.08) rotate(-4deg);
}

.ec-catrail__name {
    /* Altura reservada para 2 linhas: sem isso "Mantas Asfálticas,
       Asfalto E Fibras" fica mais alto que "Auxiliares" e a fila
       inteira desalinha. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
    font-family: var(--ec-font-title);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ec-dark);
}
.ec-catrail__card:hover .ec-catrail__name { color: var(--ec-primary-dark); }

/* --- Setas --- */
/* Nascem ocultas: sem JS elas não fariam nada, e botão morto é pior
   que botão nenhum. O JS marca `data-catrail-ready` no wrapper e
   remove o atributo de novo quando o trilho inteiro cabe na tela. */
.ec-catrail__arrow { display: none; }
.ec-catrail[data-catrail-ready] .ec-catrail__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-pill);
    background: var(--ec-white);
    box-shadow: var(--ec-shadow-lg);
    color: var(--ec-dark);
    font-size: 15px;
    cursor: pointer;
    transition: var(--ec-transition);
}
.ec-catrail[data-catrail-ready] .ec-catrail__arrow--prev { left: -14px; }
.ec-catrail[data-catrail-ready] .ec-catrail__arrow--next { right: -14px; }
.ec-catrail[data-catrail-ready] .ec-catrail__arrow:hover:not(:disabled) {
    background: var(--ec-primary);
    border-color: var(--ec-primary);
    color: var(--ec-white);
}
.ec-catrail[data-catrail-ready] .ec-catrail__arrow:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

@media (max-width: 1024px) {
    .ec-catrail[data-catrail-ready] .ec-catrail__arrow--prev { left: -6px; }
    .ec-catrail[data-catrail-ready] .ec-catrail__arrow--next { right: -6px; }
}
@media (max-width: 640px) {
    .ec-catrail__item { flex-basis: 138px; }
    .ec-catrail__card { padding: 18px 10px; gap: 10px; }
    .ec-catrail__icon { width: 52px; height: 52px; font-size: 20px; }
    .ec-catrail__name { font-size: 13px; min-height: 38px; }
    .ec-catrail__track { gap: 12px; }
    /* Em telas estreitas a seta sobre o card esconderia metade dele;
       o arrasto já é o gesto natural aqui. */
    .ec-catrail[data-catrail-ready] .ec-catrail__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ec-catrail__track { scroll-behavior: auto; }
    .ec-catrail__card:hover { transform: none; }
    .ec-catrail__card:hover .ec-catrail__icon { transform: none; }
}

/* =============================================================
   BUSCA — aviso de linha irmã da mesma fábrica
   Aparece só no /loja/busca, quando o termo casou uma marca que
   tem outra linha na família (ex.: buscar "Betumat" traz também
   os produtos Viapol). Explica ao cliente por que apareceram
   produtos de outro nome na mesma página.
   ============================================================= */
.ec-catalog__note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
    padding: 10px 18px;
    border: 1px solid var(--ec-border);
    border-left: 3px solid var(--ec-primary);
    border-radius: var(--ec-radius-sm);
    background: var(--ec-white);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ec-text-muted);
    text-align: left;
}
.ec-catalog__note i { color: var(--ec-primary); }

@media (max-width: 640px) {
    .ec-catalog__note {
        display: flex;
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* =============================================================================
   /loja/sobre — texto justificado (pedido do dono, 2026-09-01)

   Escopado em `.ec-about` (wrapper de about.php) de propósito: as seções desta
   página vêm do CMS e usam componentes COMPARTILHADOS com o site institucional
   (`ht1`, `mv1`, `nm1`, `et1`), e `.ec-hero__subtitle` /
   `.ec-cta-final-banner__text` aparecem em outras páginas da loja. Justificar
   pela classe do componente mudaria todas elas.

   `p, li` cobre TODO o texto corrido da página — foi conferido elemento a
   elemento no navegador, e não há prosa fora dessas duas tags. Vale mais que
   uma lista de classes, que apodrece quando o CMS ganhar uma seção nova.

   Especificidade: 0-1-1 contra os 0-1-0 de `.mv1__card-text`,
   `.et1__item-text` e do utilitário `.ec-u-text-center` — vence sem
   `!important` e sem mover bloco nenhum.

   ⚠️ `hyphens: auto` NÃO é enfeite: as colunas estreitas desta página têm
   213px (`.et1__item-text`) e 324px (`.mv1__card-text`), e justificar sem
   hifenização abre "rios" de espaço entre palavras longas em português. O
   `<html lang="pt-BR">` do layout é o que liga o dicionário de hifenização —
   sem ele a propriedade é inócua. */
.ec-about p,
.ec-about li {
    text-align: justify;
    hyphens: auto;
}

/* ⚠️ Texto de UMA LINHA que é centrado por design fica FORA do justify.

   A última linha de um bloco justificado nunca é esticada — ela cai no
   `text-align-last`, que por padrão é `start`. Ou seja: num texto de linha
   única, `justify` renderiza igual a `left`. Foi exatamente isso que
   descentralizou o rótulo "Anos de Mercado" em relação ao "14+" logo acima
   (o `.nm1__grid` centra tudo, e o `<p>` do rótulo estava herdando isso).
   O mesmo vale para o subtítulo do "O que nos Move", que é centrado dentro
   de uma caixa de 550px e passou a encostar na esquerda dela.

   Justificar só faz sentido em prosa de várias linhas — que é o que sobra
   na regra acima. */
.ec-about .nm1__label,
.ec-about .et1__subtitle { text-align: center; }

/* O CTA do answer-block é um link solto dentro de um <p>, não prosa. */
.ec-about .answer-block p:last-of-type { text-align: left; }

/* "O que nos Move" (seção `et1` do CMS) em 3 colunas nesta página, no lugar das
   4 do padrão — pedido do dono (2026-09-01): com 6 itens, 3+3 fecha as duas
   fileiras em vez de deixar 4+2.

   ⚠️ A regra original é `.et1__grid { grid-template-columns: repeat(4, 1fr) }`
   em `public/assets/css/style.css` (≥1024px) — arquivo do site INSTITUCIONAL,
   que não se toca. Aqui a sobreposição é escopada em `.ec-about` (0-2-0 contra
   0-1-0), então vence por especificidade e a ordem de carregamento das duas
   folhas não importa. Fora do /loja/sobre nada muda.

   Efeito colateral bem-vindo: com 3 colunas o card fica ~40% mais largo, o que
   tira `.et1__item-text` da faixa em que a justificação abria buracos
   (~26 caracteres por linha a 1024px). Abaixo de 1024 o padrão já é 2 colunas
   e continua como era. */
@media (min-width: 1024px) {
    .ec-about .et1__grid { grid-template-columns: repeat(3, 1fr); }
}
