@charset "UTF-8";
.ec-shared {
    --ec-primary: #0059da;
    --ec-accent: #1f8a73;
    --ec-page: #f6f8fb;
    --ec-card: #ffffff;
    --ec-text: #172033;
    --ec-muted: #667085;
    --ec-border: #e4e8ef;
    --ec-danger: #d93f4f;
    --ec-warning: #ee9d01;
    --ec-radius: 14px;
    --ec-control-radius: 10px;
    --ec-shell: 1240px;
    margin: 0;
    background: var(--ec-page);
    color: var(--ec-text);
    font-family: var(--ec-font-body, Inter), Montserrat, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.ec-shared *, .ec-shared *::before, .ec-shared *::after { box-sizing: border-box; }
.ec-shared a { color: inherit; text-decoration: none; }
.ec-shared img { display: block; max-width: 100%; }
.ec-shared button, .ec-shared input, .ec-shared select, .ec-shared textarea { font: inherit; }
.ec-shared :where(a, button, input, select, textarea):focus-visible { outline: 3px solid color-mix(in srgb, var(--ec-primary) 34%, transparent); outline-offset: 3px; }
.ec-shared .ec-shell { width: min(calc(100% - 40px), var(--ec-shell)); margin-inline: auto; }
.ec-shared .ec-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ec-shared .ec-skip-link { position: fixed; top: 8px; left: 8px; z-index: 9999; padding: 10px 14px; border-radius: 8px; background: #111827; color: #fff; font-weight: 800; transform: translateY(-160%); }
.ec-shared .ec-skip-link:focus { transform: translateY(0); }

.ec-shared .ec-announcement { min-height: 32px; padding: 6px 20px; background: var(--ec-primary); color: #fff; font-size: 13px; font-weight: 800; text-align: center; }
.ec-shared .ec-header { position: relative; z-index: 20; border-bottom: 1px solid var(--ec-border); background: var(--ec-card); }
.ec-shared .ec-header__main { display: grid; grid-template-columns: 190px minmax(280px, 1fr) auto; align-items: center; gap: 28px; min-height: 88px; }
.ec-shared .ec-brand { display: inline-flex; align-items: center; min-height: 48px; font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.ec-shared .ec-brand img { max-width: 180px; max-height: 58px; object-fit: contain; }
.ec-shared .ec-search { display: grid; grid-template-columns: 1fr auto; min-height: 46px; border: 1px solid var(--ec-border); border-radius: var(--ec-control-radius); overflow: hidden; background: #fff; }
.ec-shared .ec-search input { min-width: 0; padding: 0 16px; border: 0; color: var(--ec-text); }
.ec-shared .ec-search button { border: 0; padding: 0 20px; background: var(--ec-primary); color: #fff; font-weight: 800; cursor: pointer; }
.ec-shared .ec-utilities { display: flex; align-items: center; justify-content: flex-end; gap: 18px; font-size: 13px; font-weight: 700; }
.ec-shared .ec-utilities a { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ec-shared .ec-utilities span { display: inline-grid; min-width: 20px; height: 20px; place-items: center; border-radius: 999px; background: var(--ec-primary); color: #fff; font-size: 11px; }
.ec-shared .ec-utilities strong { color: var(--ec-primary); }
.ec-shared .ec-header__mobile-actions { display: none; align-items: center; justify-content: flex-end; gap: 8px; }
.ec-shared .ec-mobile-cart { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; border: 1px solid var(--ec-border); border-radius: 9px; padding: 8px 11px; background: #fff; font-size: 12px; font-weight: 800; }
.ec-shared .ec-mobile-cart strong { display: inline-grid; min-width: 22px; height: 22px; place-items: center; border-radius: 999px; background: var(--ec-primary); color: #fff; font-size: 11px; }
.ec-shared .ec-mobile-cart__icon { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Estrelas de avaliação no card da listagem (o detalhe tem CSS próprio no partial de avaliações). */
.ec-shared .ec-stars { position: relative; display: inline-block; font-size: 14px; line-height: 1; letter-spacing: 2px; color: #d7dbe3; white-space: nowrap; vertical-align: middle; }
.ec-shared .ec-stars::before { content: '\2605\2605\2605\2605\2605'; position: absolute; top: 0; left: 0; width: var(--rv-fill, 0%); overflow: hidden; color: #f5b301; }
.ec-shared .ec-stars > span { visibility: hidden; }
.ec-shared .ec-product-card__rating { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 5px; }
.ec-shared .ec-product-card__rating-count { color: var(--ec-muted, #667085); font-size: 12px; font-weight: 700; }
/* Miniatura da galeria com imagem quebrada: placeholder limpo (ícone), sem o "quadradinho rasgado". */
.ec-shared .ec-gallery__thumbs button.is-empty { background: #eef1f5 no-repeat center / 42% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aeb6c4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M4 18l5-5 4 4 3-3 4 4'/%3E%3C/svg%3E"); }
.ec-shared .ec-menu-trigger { display: none; border: 1px solid var(--ec-border); border-radius: 9px; padding: 9px 12px; background: #fff; font-weight: 800; }
.ec-shared .ec-menu-backdrop { display: none; }
.ec-shared .ec-primary-nav { border-top: 1px solid var(--ec-border); }
.ec-shared .ec-primary-nav .ec-shell { display: flex; align-items: center; justify-content: center; gap: 30px; min-height: 48px; font-size: 14px; font-weight: 800; }
.ec-shared .ec-primary-nav a:hover { color: var(--ec-primary); }

.ec-shared .ec-alert { position: relative; margin: 16px 0 0; padding: 14px 48px 14px 16px; border: 1px solid; border-radius: 10px; background: #fff; font-weight: 650; }
.ec-shared .ec-alert--success { border-color: #a7decf; color: #126d5a; }
.ec-shared .ec-alert--error { border-color: #f0b3bb; color: #a92838; }
.ec-shared .ec-alert > button { position: absolute; top: 7px; right: 8px; border: 0; padding: 4px 8px; background: transparent; color: inherit; font-size: 22px; cursor: pointer; }
/* NÃO-sticky de propósito: se ficasse sticky top:0, disputaria o topo com o header sticky
   dos temas (z-index 20) e, com z-index maior, pintaria POR CIMA do cabeçalho ao rolar. */
.ec-shared .ec-preview-banner { position: static; padding: 9px 18px; background: #ee9d01; color: #241804; font-size: 13px; font-weight: 900; text-align: center; }

/* No desktop os 4 temas fixam o header (position:sticky;top:0). Sem scroll-padding-top, o skip
   link "Ir para o conteúdo" e qualquer âncora rolam o alvo pra top:0 e ficam ESCONDIDOS atrás do
   header. Descontamos a altura do header (editorial é mais alto). :has degrada sem regressão. */
@media (min-width: 1024px) {
	html:has(body.ec-theme-editorial) { scroll-padding-top: 190px; }
	html:has(body.ec-theme-vitrine),
	html:has(body.ec-theme-catalogo),
	html:has(body.ec-theme-alicerce) { scroll-padding-top: 150px; }
}

/* ===== Faixa de confiança do rodapé (Segurança + Formas de pagamento). Banda clara própria,
   independente do tema do footer; cores via CSS vars. ===== */
/* A faixa NAO pinta fundo proprio: antes ela usava background var(--ec-card) na largura toda, o que
   virava uma tarja branca atravessando o rodape colorido. Agora o container e transparente e quem
   vira card e a .ec-trust-strip (recuada, com cantos), no mesmo tratamento do tema OneTech. */
.ec-shared .ec-footer__trust { background: transparent; color: var(--ec-text, #172033); padding: 0 0 18px; }
.ec-shared .ec-footer__trust .ec-shell { display: block; }
/* Tom do card fixo (#f7f8fa, o mesmo do OneTech) de proposito: com var(--ec-page) o Catalogo, que
   tem page branco, virava um bloco branco duro sobre rodape azul-marinho. Os selos/chips de dentro
   sao brancos e o texto e escuro, entao o card precisa ser sempre claro e suave. */
.ec-shared .ec-trust-strip { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 44px; background: #f7f8fa; border: 1px solid rgba(17, 24, 39, .08); border-radius: 10px; padding: 22px 26px; margin: 12px 0 0; }
.ec-shared .ec-trust-group { display: flex; flex-direction: column; gap: 9px; }
.ec-shared .ec-trust-group__label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ec-muted, #667085); }
.ec-shared .ec-trust-marks { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-shared .ec-footer__trust .ec-trust-mark { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--ec-border, #e4e8ef); border-radius: 10px; background: var(--ec-page, #f6f8fb); font-weight: 800; font-size: 13px; color: var(--ec-text, #172033); text-decoration: none; }
.ec-shared .ec-footer__trust a.ec-trust-mark, .ec-shared .ec-footer__trust a.ec-trust-mark:hover { color: var(--ec-text, #172033); text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.ec-shared .ec-footer__trust a.ec-trust-mark:hover { border-color: #1f8a73; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(31,138,115,.16); }
.ec-shared .ec-trust-mark svg { flex-shrink: 0; }
.ec-shared .ec-payment-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ec-shared .ec-footer__trust .ec-payment-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 50px; height: 32px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--ec-border, #e4e8ef); background: #fff; font-weight: 800; font-size: 12px; letter-spacing: .02em; color: #1a2233; }
.ec-shared .ec-payment-chip--visa { color: #1a1f71; font-style: italic; letter-spacing: .04em; }
.ec-shared .ec-payment-chip--mastercard { color: #cc3d33; }
.ec-shared .ec-payment-chip--mastercard svg { display: block; }
.ec-shared .ec-payment-chip--amex { color: #fff; background: #1174b8; border-color: #1174b8; }
.ec-shared .ec-payment-chip--elo { color: #fff; background: #111827; border-color: #111827; text-transform: lowercase; font-style: italic; }
.ec-shared .ec-payment-chip--pix { color: #32bcad; gap: 5px; }
.ec-shared .ec-payment-chip--pix em { font-style: normal; font-weight: 800; color: #32bcad; }
/* O texto legal agora mora DENTRO do card (antes ficava solto sobre a cor do rodape, em cinza). */
.ec-shared .ec-footer__trust .ec-trust-legal { width: 100%; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--ec-muted, #667085); }
@media (max-width: 640px) { .ec-shared .ec-trust-strip { gap: 14px 24px; } }

/* ===== Variações de e-commerce (cor/tamanho) no detalhe do produto ===== */
.ec-shared .ec-variation-box { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 16px; }
.ec-shared .ec-variation-group { display: flex; flex-direction: column; gap: 8px; }
.ec-shared .ec-variation-label { font-size: 12px; font-weight: 800; color: var(--ec-muted, #667085); text-transform: uppercase; letter-spacing: .04em; }
.ec-shared .ec-variation-values { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-shared .ec-variation-choice { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 14px; border: 1.5px solid var(--ec-border, #e4e8ef); border-radius: var(--ec-control-radius, 10px); background: var(--ec-card, #fff); color: var(--ec-text, #172033); font-weight: 700; font-size: 13px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.ec-shared .ec-variation-choice:hover { border-color: var(--ec-primary, #0059DA); }
.ec-shared .ec-variation-choice.is-selected { border-color: var(--ec-primary, #0059DA); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-primary, #0059DA) 22%, transparent); background: color-mix(in srgb, var(--ec-primary, #0059DA) 8%, var(--ec-card, #fff)); }
.ec-shared .ec-variation-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); display: inline-block; flex-shrink: 0; }
.ec-shared .ec-variation-message { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ec-muted, #667085); }
.ec-shared .ec-variation-message.is-error { color: #d93f4f; }
.ec-shared .ec-buybox .ec-button--primary[disabled] { opacity: .55; cursor: not-allowed; }

/* ===== Paginação (Laravel Paginator::useBootstrap() — markup Bootstrap SEM o CSS do
   Bootstrap nos temas shared; sem estas regras vira lista com bolinha). ===== */
.ec-shared .ec-pagination { display: flex; justify-content: center; margin-top: 34px; }
.ec-shared .ec-pagination .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ec-shared .ec-pagination .page-item { list-style: none; margin: 0; }
.ec-shared .ec-pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--ec-border, #e4e8ef); border-radius: var(--ec-control-radius, 10px); background: var(--ec-card, #fff); color: var(--ec-text, #172033); font-weight: 700; font-size: 13.5px; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.ec-shared .ec-pagination .page-link:hover { border-color: var(--ec-primary); color: var(--ec-primary); }
.ec-shared .ec-pagination .page-item.active .page-link { background: var(--ec-primary); border-color: var(--ec-primary); color: var(--ec-on-primary, #fff); }
.ec-shared .ec-pagination .page-item.disabled .page-link { opacity: .45; pointer-events: none; }
@media (max-width: 639px) { .ec-shared .ec-pagination .page-link { min-width: 44px; height: 44px; } }

/* ===== Urgência: "últimas X unidades" na página do produto (config estoque_urgencia_limite) ===== */
.ec-shared .ec-urgencia { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 7px 13px; border-radius: 999px; background: #fdecec; color: #c0392b; font-size: 12.5px; font-weight: 800; }
.ec-shared .ec-urgencia::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #e74c3c; animation: ecUrgPulse 1.4s ease infinite; }
@keyframes ecUrgPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
.ec-shared[data-ec-anim="none"] .ec-urgencia::before { animation: none; }

/* ===== Prazo de despacho + aviso de pedido mínimo ===== */
.ec-shared .ec-despacho { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ec-muted, #667085); }
.ec-shared .ec-despacho::before { content: '📦 '; }
/* Bloco de info de pagamento/entrega da página de produto (parcelas, pagamento seguro, frete). */
.ec-shared .ec-product-info { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 6px; padding: 14px 16px; border: 1px solid var(--ec-border, #e4e8ef); border-radius: var(--ec-radius, 12px); background: color-mix(in srgb, var(--ec-primary, #0059DA) 4%, var(--ec-card, #ffffff)); }
.ec-shared .ec-product-info__item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ec-muted, #667085); line-height: 1.35; }
.ec-shared .ec-product-info__item svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--ec-primary, #0059DA); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ec-shared .ec-product-info__item strong { color: var(--ec-text, #14213a); font-weight: 800; }
.ec-shared .ec-product-info__item [data-ec-installment] { color: var(--ec-primary, #0059DA); }
/* Botão favoritar na página de produto (coração; core.js alterna .is-favorited). */
.ec-shared .ec-product-favorite { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; border: 1px solid var(--ec-border, #e4e8ef); border-radius: 10px; padding: 9px 16px; background: var(--ec-card, #ffffff); color: var(--ec-muted, #667085); font-family: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.ec-shared .ec-product-favorite svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.ec-shared .ec-product-favorite:hover { color: #e0245e; border-color: #e0245e; }
.ec-shared .ec-product-favorite.is-favorited { color: #e0245e; border-color: #e0245e; }
.ec-shared .ec-product-favorite.is-favorited svg { fill: #e0245e; stroke: #e0245e; }
/* Redes sociais no rodapé (SVG inline; ícones seguem a cor do texto do footer). */
.ec-shared .ec-footer__social { display: flex; gap: 10px; margin-top: 16px; }
.ec-shared .ec-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ec-border, #e4e8ef); color: var(--ec-muted, #667085); transition: color .15s ease, border-color .15s ease, transform .15s ease; }
.ec-shared .ec-footer__social a:hover { color: var(--ec-primary, #0059DA); border-color: var(--ec-primary, #0059DA); transform: translateY(-2px); }
/* Stepper de quantidade (+/-) na página de produto. */
.ec-shared .ec-quantity { display: inline-flex; width: max-content; max-width: 100%; align-self: start; justify-self: start; align-items: stretch; border: 1px solid var(--ec-border, #e4e8ef); border-radius: 10px; overflow: hidden; margin: 4px 0 14px; background: var(--ec-card, #fff); }
.ec-shared .ec-quantity__btn { width: 42px; border: 0; background: transparent; color: var(--ec-text, #14213a); font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; transition: background .15s ease; }
.ec-shared .ec-quantity__btn:hover { background: color-mix(in srgb, var(--ec-primary, #0059DA) 8%, transparent); }
.ec-shared .ec-quantity input { width: 56px; min-width: 0; margin: 0; border: 0; border-left: 1px solid var(--ec-border, #e4e8ef); border-right: 1px solid var(--ec-border, #e4e8ef); border-radius: 0; text-align: center; background: transparent; -moz-appearance: textfield; }
.ec-shared .ec-quantity input::-webkit-outer-spin-button, .ec-shared .ec-quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ec-shared .ec-minimo-aviso { margin: 0 0 10px; padding: 9px 13px; border-radius: 10px; background: #fff6e5; color: #9a6b0f; font-size: 12.5px; font-weight: 700; }

/* ===== Depoimentos de clientes na home (config home_depoimentos, editados no construtor) ===== */
.ec-shared .ec-testimonials__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ec-shared .ec-testimonial { margin: 0; padding: 22px; background: var(--ec-card, #fff); border: 1px solid var(--ec-border, #e4e8ef); border-radius: var(--ec-radius, 14px); }
.ec-shared .ec-testimonial__stars { color: #f0a01f; letter-spacing: 2px; margin-bottom: 10px; font-size: 15px; }
.ec-shared .ec-testimonial blockquote { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--ec-text, #172033); }
.ec-shared .ec-testimonial blockquote::before { content: '\201C'; }
.ec-shared .ec-testimonial blockquote::after { content: '\201D'; }
.ec-shared .ec-testimonial figcaption { font-weight: 800; font-size: 13px; color: var(--ec-muted, #667085); }
@media (max-width: 900px) { .ec-shared .ec-testimonials__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* ===== Home com seções reordenáveis: flex column + order por seção (config home_sections) ===== */
.ec-shared .ec-home-flow { display: flex; flex-direction: column; }

/* ===== Cabeçalho/rodapé com cor própria (tokens header_surface/footer_surface, opt-in).
   !important: cada tema pinta o próprio header/footer com especificidade igual ou maior. ===== */
.ec-shared.ec-custom-header .ec-header,
.ec-shared.ec-custom-header .ec-header__main,
.ec-shared.ec-custom-header .ec-primary-nav { background: var(--ec-header-bg) !important; }
.ec-shared.ec-custom-header .ec-brand,
.ec-shared.ec-custom-header .ec-brand span,
.ec-shared.ec-custom-header .ec-utilities a,
.ec-shared.ec-custom-header .ec-utilities a strong,
.ec-shared.ec-custom-header .ec-primary-nav a { color: var(--ec-on-header) !important; }
/* o carrinho mobile é um pill próprio: a tinta tem de contrastar com o PILL, não com o header.
   Em 3 temas o pill é branco (daí --ec-text); o Alicerce desenha um pill escuro e declara a
   própria tinta em --ec-mobile-cart-ink. O fallback preserva o comportamento dos outros três. */
.ec-shared.ec-custom-header .ec-mobile-cart,
.ec-shared.ec-custom-header .ec-mobile-cart span { color: var(--ec-mobile-cart-ink, var(--ec-text)) !important; }
/* O hambúrguer NÃO recebe a superfície do cabeçalho (só .ec-header, .ec-header__main e
   .ec-primary-nav recebem, acima) — ele tem pill próprio em cada tema. Mandar a tinta do
   cabeçalho para dentro dele apagava as barras nos dois sentidos: header claro sobre o pill
   escuro do Alicerce, e header escuro sobre o pill claro dos outros três. Cada tema já pareia
   o próprio background com o próprio color, e as barras usam currentColor. */
.ec-shared.ec-custom-footer .ec-footer { background: var(--ec-footer-bg) !important; }
.ec-shared.ec-custom-footer .ec-footer__grid,
.ec-shared.ec-custom-footer .ec-footer__grid strong,
.ec-shared.ec-custom-footer .ec-footer__grid p,
.ec-shared.ec-custom-footer .ec-footer__grid a { color: var(--ec-on-footer) !important; }
/* EXCECAO: componentes injetados no rodape que tem SUPERFICIE PROPRIA. A tinta do rodape acima
   e calculada contra --ec-footer-bg; se atravessar para dentro deles, escreve com a cor errada.
   Caso real: o banner do PWA e uma pilula --ec-pwa-accent, e o <strong> "Instalar aplicativo"
   sumia (tinta do rodape #111 sobre pilula #050505 = 1.01:1). Especificidade maior (0,4,1)
   com !important para vencer a regra de contexto sem desligar o resto do rodape. */
.ec-shared.ec-custom-footer .ec-footer__grid .ec-pwa-install__trigger strong,
.ec-shared.ec-custom-footer .ec-footer__grid .ec-pwa-install__trigger small { color: inherit !important; }
.ec-shared.ec-custom-footer .ec-footer__grid .ec-pwa-ios-dialog__panel h2,
.ec-shared.ec-custom-footer .ec-footer__grid .ec-pwa-ios-dialog__panel strong { color: #172033 !important; }
.ec-shared.ec-custom-footer .ec-footer__grid .ec-pwa-ios-dialog__panel p { color: #596579 !important; }

/* ===== Sombra dos cards de produto (token card_shadow: none | soft(padrão do tema) | strong) ===== */
.ec-shared[data-ec-shadow="none"] .ec-product-card,
.ec-shared[data-ec-shadow="none"] .ec-product-card:hover { box-shadow: none !important; }
.ec-shared[data-ec-shadow="strong"] .ec-product-card { box-shadow: 0 14px 34px rgba(15, 27, 53, .16) !important; }
.ec-shared[data-ec-shadow="strong"] .ec-product-card:hover { box-shadow: 0 20px 46px rgba(15, 27, 53, .22) !important; }

.ec-shared .ec-hero { position: relative; min-height: 470px; overflow: hidden; background: #16213a; color: #fff; }
.ec-shared .ec-hero__slide { position: relative; min-height: 470px; }
.ec-shared .ec-hero__slide > img,
.ec-shared .ec-hero__slide > picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.ec-shared .ec-hero__slide > img,
.ec-shared .ec-hero__slide > picture img { width: 100%; height: 100%; object-fit: cover; opacity: .65; }
.ec-shared .ec-hero__slide > picture { display: block; }
.ec-shared .ec-hero__content, .ec-shared .ec-hero__fallback { position: relative; z-index: 1; display: flex; min-height: 470px; max-width: var(--ec-shell); align-items: flex-start; justify-content: center; flex-direction: column; }
.ec-shared .ec-hero__content { padding-right: min(48vw, 580px); }
.ec-shared .ec-hero h1 { max-width: 820px; margin: 12px 0 24px; font-family: var(--ec-font-display, 'Montserrat', system-ui, sans-serif); font-weight: 900; font-size: clamp(42px, 6vw, 82px); line-height: .98; letter-spacing: -.05em; }
/* Chamada pequena acima do título vira um selo/pílula (estilo "promoção" de site grande). */
.ec-shared .ec-hero p { margin: 0; font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ec-shared .ec-hero p:not(:empty) { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--ec-primary, #0059DA) 88%, #000 0%); color: var(--ec-on-primary, #fff); box-shadow: 0 6px 18px rgba(6,12,28,.28); }
/* Números da loja DENTRO do banner (opt-in stats_no_hero) — sobre imagem, texto claro. */
.ec-shared .ec-hero__stats { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 6px; }
.ec-shared .ec-hero__stats .ec-stats-loja__item { text-align: left; padding: 0; }
.ec-shared .ec-hero__stats .ec-stats-loja__num { color: #fff; font-size: clamp(24px, 3vw, 38px); }
.ec-shared .ec-hero__stats .ec-stats-loja__label { color: rgba(255,255,255,.82); }
.ec-shared .ec-hero__controls { position: absolute; right: max(20px, calc((100vw - var(--ec-shell)) / 2)); bottom: 28px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.ec-shared .ec-hero__controls button { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(17,24,39,.55); color: #fff; cursor: pointer; }
.ec-shared .ec-hero__dots { display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.ec-shared .ec-hero__controls .ec-hero__dot { width: 10px; height: 10px; border: 0; padding: 0; background: rgba(255,255,255,.52); }
.ec-shared .ec-hero__controls .ec-hero__dot[aria-current="true"] { width: 26px; border-radius: 999px; background: #fff; }
.ec-shared .ec-hero__controls .ec-hero__toggle { width: auto; min-width: 44px; border-radius: 999px; padding: 0 14px; font-size: 12px; font-weight: 800; }
/* Banner SÓ-ARTE (texto no próprio arquivo): a IMAGEM manda na altura do hero — sem faixas
   vazias em volta (o vão azul #16213a) e sem corte, em qualquer largura de tela. Especificidade
   de 3 classes pra vencer o min-height responsivo. */
/* !important porque cada TEMA redeclara .ec-hero/.ec-hero__slide min-height com a MESMA
   especificidade (0,3,0) e carrega DEPOIS do core — sem !important o reset perde o empate
   e a faixa vazia volta (catalogo/alicerce/editorial). */
.ec-shared .ec-hero.ec-hero--art-only,
.ec-shared .ec-hero--art-only .ec-hero__slide,
.ec-shared .ec-hero--art-only .ec-hero__content,
.ec-shared .ec-hero--art-only .ec-hero__fallback { min-height: 0 !important; }
.ec-shared .ec-hero--art-only .ec-hero__slide > picture,
.ec-shared .ec-hero--art-only .ec-hero__slide > img { position: static; inset: auto; width: 100%; height: auto; }
.ec-shared .ec-hero--art-only .ec-hero__slide > picture img { width: 100%; height: auto; object-fit: contain; opacity: 1; display: block; }
.ec-shared .ec-benefits { border-bottom: 1px solid var(--ec-border); background: var(--ec-card); }
.ec-shared .ec-benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ec-shared .ec-benefits__grid > div { display: flex; min-height: 82px; justify-content: center; flex-direction: column; padding: 16px 24px; border-right: 1px solid var(--ec-border); }
.ec-shared .ec-benefits__grid > div:last-child { border-right: 0; }
.ec-shared .ec-benefits strong, .ec-shared .ec-benefits span { display: block; }
.ec-shared .ec-benefits strong { font-size: 13px; text-transform: uppercase; }
.ec-shared .ec-benefits span { color: var(--ec-muted); font-size: 13px; }

.ec-shared .ec-section, .ec-shared .ec-page { padding: 72px 0; }
.ec-shared .ec-section--accent { background: color-mix(in srgb, var(--ec-primary) 5%, #fff); }
.ec-shared .ec-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.ec-shared .ec-section__head small, .ec-shared .ec-page__head small { color: var(--ec-primary); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.ec-shared .ec-section__head h2, .ec-shared .ec-page__head h1 { margin: 4px 0 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -.035em; }
.ec-shared .ec-section__head > a { color: var(--ec-primary); font-weight: 800; }
.ec-shared .ec-page__head { max-width: 820px; margin-bottom: 34px; }
.ec-shared .ec-page__head p { color: var(--ec-muted); }
.ec-shared .ec-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ec-shared .ec-category-card { position: relative; min-height: 240px; overflow: hidden; border: 1px solid var(--ec-border); border-radius: var(--ec-radius); background: var(--ec-card); }
.ec-shared .ec-category-card img, .ec-shared .ec-category-card .ec-media-placeholder { width: 100%; height: 190px; object-fit: cover; }
.ec-shared .ec-category-card strong { display: block; padding: 14px 16px; font-size: 17px; }
.ec-shared .ec-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.ec-shared .ec-product-card { display: flex; min-width: 0; overflow: hidden; flex-direction: column; border: 1px solid var(--ec-border); border-radius: var(--ec-radius); background: var(--ec-card); box-shadow: 0 5px 16px rgba(20,33,61,.04); }
.ec-shared .ec-product-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f1f3f6; }
.ec-shared .ec-product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.ec-shared .ec-product-card__body { display: flex; flex: 1; flex-direction: column; padding: 16px; }
.ec-shared .ec-product-card__body small { color: var(--ec-muted); }
.ec-shared .ec-product-card h3 { min-height: 48px; margin: 7px 0 12px; font-size: 16px; line-height: 1.4; }
.ec-shared .ec-product-card__pricing { display: flex; min-height: 52px; justify-content: flex-end; flex-direction: column; margin-top: auto; }
.ec-shared .ec-product-card__previous-price { color: var(--ec-muted); font-size: 12px; }
.ec-shared .ec-product-card__price { color: var(--ec-primary); font-size: 20px; }
.ec-shared .ec-product-card__price-unavailable { color: var(--ec-muted); font-weight: 700; }
.ec-shared .ec-product-card__actions { display: grid; grid-template-columns: 1fr 42px; gap: 8px; margin-top: 15px; }
.ec-shared .ec-media-placeholder { display: grid; min-height: 140px; place-items: center; background: #eef1f5; color: var(--ec-muted); font-size: 13px; text-align: center; }
/* Fallback quando o arquivo de imagem não existe (onerror esconde o <img> e marca o pai). */
.ec-shared .ec-product-card__media.is-empty::before { content: 'Imagem indisponível'; position: absolute; inset: 0; display: grid; place-items: center; background: #eef1f5; color: var(--ec-muted); font-size: 13px; }
.ec-shared .ec-category-card.is-empty { background: #16213a; }
.ec-shared .ec-category-card.is-empty strong { color: #fff; }

.ec-shared .ec-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--ec-border); border-radius: var(--ec-control-radius); padding: 10px 16px; background: #fff; color: var(--ec-text); font-weight: 800; cursor: pointer; }
.ec-shared .ec-button--primary { border-color: var(--ec-primary); background: var(--ec-primary); color: #fff; }
.ec-shared .ec-button--danger { border-color: var(--ec-danger); color: var(--ec-danger); }
.ec-shared .ec-button--block { width: 100%; }
.ec-shared .ec-button--ghost { border-color: var(--ec-border); background: transparent; color: var(--ec-primary); }
.ec-shared .ec-order-back { display: inline-block; margin-top: 8px; color: var(--ec-primary); font-size: 13.5px; font-weight: 800; }
.ec-shared .ec-order-address article { grid-template-columns: 1fr; gap: 4px; }
.ec-shared .ec-icon-button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--ec-border); border-radius: var(--ec-control-radius); font-size: 21px; }
.ec-shared .ec-state { grid-column: 1 / -1; display: flex; min-height: 280px; align-items: center; justify-content: center; flex-direction: column; padding: 36px 20px; border: 1px dashed var(--ec-border); border-radius: var(--ec-radius); background: var(--ec-card); text-align: center; }
.ec-shared .ec-state > span { color: var(--ec-primary); font-size: 42px; }
.ec-shared .ec-state h2 { margin: 10px 0 4px; }
.ec-shared .ec-state p { max-width: 500px; color: var(--ec-muted); }

.ec-shared .ec-catalog-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 24px; }
.ec-shared .ec-catalog-tools select { min-height: 42px; border: 1px solid var(--ec-border); border-radius: 9px; padding: 0 38px 0 12px; background: #fff; }
.ec-shared .ec-catalog-tools span { margin-right: auto; color: var(--ec-muted); }
.ec-shared .ec-pagination { margin-top: 30px; }
.ec-shared .ec-pagination nav > div:first-child { display: none; }

.ec-shared .ec-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; color: var(--ec-muted); font-size: 13px; }
.ec-shared .ec-product-detail { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(350px, .88fr); gap: 48px; align-items: start; }
.ec-shared .ec-gallery, .ec-shared .ec-buybox { border: 1px solid var(--ec-border); border-radius: var(--ec-radius); background: var(--ec-card); }
.ec-shared .ec-gallery { padding: 22px; }
.ec-shared .ec-gallery__main { width: 100%; min-height: 520px; max-height: 620px; object-fit: contain; }
.ec-shared .ec-gallery.is-empty::before { content: 'Imagem indisponível'; display: grid; min-height: 520px; place-items: center; background: #eef1f5; color: var(--ec-muted); font-size: 13px; text-align: center; border-radius: var(--ec-radius); }
.ec-shared .ec-gallery__thumbs { display: flex; gap: 10px; margin-top: 16px; padding: 3px; overflow-x: auto; }
.ec-shared .ec-gallery__thumbs button { flex: 0 0 72px; width: 72px; height: 72px; border: 1px solid var(--ec-border); border-radius: 9px; padding: 5px; background: #fff; }
.ec-shared .ec-gallery__thumbs button[aria-pressed="true"] { border-color: var(--ec-primary); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ec-primary) 16%, transparent); }
.ec-shared .ec-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.ec-shared .ec-buybox { padding: 30px; }
.ec-shared .ec-buybox > small { color: var(--ec-primary); font-weight: 800; }
.ec-shared .ec-buybox h1 { margin: 8px 0 14px; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; }
.ec-shared .ec-price { margin: 18px 0; }
.ec-shared .ec-price del { display: block; color: var(--ec-muted); font-size: 14px; }
.ec-shared .ec-price strong { color: var(--ec-primary); font-size: 32px; }
.ec-shared .ec-buybox form { display: grid; gap: 12px; margin-top: 26px; }
.ec-shared .ec-buybox input, .ec-shared .ec-buybox select { min-height: 44px; border: 1px solid var(--ec-border); border-radius: 9px; padding: 0 12px; }
.ec-shared .ec-product-description { color: var(--ec-muted); font-size: 15px; line-height: 1.75; }
.ec-shared .ec-product-description > :first-child { margin-top: 0; }
.ec-shared .ec-product-description > :last-child { margin-bottom: 0; }
/* Formatacao do texto rico: descricao do produto (lojista pode usar HTML) + posts do blog */
.ec-shared .ec-product-description p, .ec-shared .ec-rich-text p { margin: 0 0 .85em; }
.ec-shared .ec-product-description ul, .ec-shared .ec-product-description ol, .ec-shared .ec-rich-text ul, .ec-shared .ec-rich-text ol { margin: 0 0 .85em; padding-left: 1.35em; }
.ec-shared .ec-product-description li, .ec-shared .ec-rich-text li { margin: .25em 0; }
.ec-shared .ec-product-description h2, .ec-shared .ec-product-description h3, .ec-shared .ec-product-description h4, .ec-shared .ec-rich-text h2, .ec-shared .ec-rich-text h3, .ec-shared .ec-rich-text h4 { margin: 1.1em 0 .45em; line-height: 1.25; color: var(--ec-ink, #1f2937); }
.ec-shared .ec-product-description a, .ec-shared .ec-rich-text a { color: var(--ec-primary); text-decoration: underline; }
.ec-shared .ec-product-description strong, .ec-shared .ec-rich-text strong { font-weight: 700; }
.ec-shared .ec-product-description blockquote, .ec-shared .ec-rich-text blockquote { margin: 0 0 .85em; padding-left: 1em; border-left: 3px solid var(--ec-border); color: var(--ec-muted); }
.ec-shared .ec-product-description hr, .ec-shared .ec-rich-text hr { border: 0; border-top: 1px solid var(--ec-border); margin: 1.1em 0; }

/* ----- Barra de compartilhamento (produto) ----- */
.ec-shared .ec-product-share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.ec-shared .ec-product-share__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ec-muted); }
.ec-shared .ec-product-share__actions { display: inline-flex; gap: 8px; }
.ec-shared .ec-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--ec-border); background: var(--ec-card, #fff); color: var(--ec-text, #172033); cursor: pointer; transition: transform 150ms ease, background 150ms ease, color 150ms ease, border-color 150ms ease; }
.ec-shared .ec-share-btn svg { width: 19px; height: 19px; fill: currentColor; }
.ec-shared .ec-share-btn:hover { transform: translateY(-2px); }
/* especificidade extra (.ec-product-share) p/ vencer o :focus-visible dos temas que forçam border-radius quadrado */
.ec-shared .ec-product-share .ec-share-btn:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; border-radius: 50%; }
.ec-shared .ec-share-btn--whatsapp:hover { background: #25d366; border-color: #25d366; color: #fff; }
.ec-shared .ec-share-btn--facebook:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.ec-shared .ec-share-btn--x:hover { background: #0f1419; border-color: #0f1419; color: #fff; }
.ec-shared .ec-share-btn--copy:hover, .ec-shared .ec-share-btn--native:hover { background: var(--ec-primary); border-color: var(--ec-primary); color: var(--ec-on-primary, #fff); }
.ec-shared .ec-product-share__feedback { flex-basis: 100%; min-height: 18px; margin: 2px 0 0; color: var(--ec-primary); font-size: 13px; font-weight: 600; }

/* Coracao favoritado */
.ec-shared .ec-product-card__favorite.is-favorited { color: #e0245e; border-color: #e0245e; }

/* ----- Zoom da imagem do produto (lightbox) ----- */
.ec-shared .ec-gallery__main[data-ec-zoom] { cursor: zoom-in; }
.ec-shared .ec-gallery { position: relative; }
/* Palco da imagem principal: ancora o "Ampliar" NA IMAGEM (antes ele caía sobre as miniaturas)
   e recorta o zoom-lupa que segue o mouse (estilo Mercado Livre). */
.ec-shared .ec-gallery__stage { position: relative; overflow: hidden; border-radius: var(--ec-radius, 12px); }
.ec-shared .ec-gallery__stage .ec-gallery__main { display: block; }
.ec-shared .ec-gallery__zoom-hint { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(15,23,42,.66); color: #fff; font-size: 12px; font-weight: 700; pointer-events: none; backdrop-filter: blur(2px); transition: opacity .18s ease; }
.ec-shared .ec-gallery__zoom-hint svg { width: 14px; height: 14px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
	.ec-shared .ec-gallery__stage { cursor: zoom-in; }
	.ec-shared .ec-gallery__stage .ec-gallery__main { transition: transform .22s ease; will-change: transform; }
	.ec-shared .ec-gallery__stage.is-zooming .ec-gallery__main { transform: scale(2.1); transition: transform .12s ease-out; }
	.ec-shared .ec-gallery__stage.is-zooming .ec-gallery__zoom-hint { opacity: 0; }
}
.ec-zoom-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(9,14,24,.93); padding: 24px; }
.ec-zoom-overlay.is-open { display: flex; }
.ec-zoom-stage { max-width: 94vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; }
.ec-zoom-img { max-width: 94vw; max-height: 90vh; object-fit: contain; cursor: zoom-in; transition: transform .22s ease; will-change: transform; }
.ec-zoom-img.is-zoomed { transform: scale(2.3); cursor: zoom-out; }
.ec-zoom-close { position: fixed; top: 18px; right: 22px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; transition: background .15s ease; }
.ec-zoom-close:hover { background: rgba(255,255,255,.3); }
html.ec-zoom-lock, html.ec-zoom-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ec-zoom-img { transition: none; } }

/* ----- Nivel de animacao (construtor "Criar meu modelo") -----
   none  = sem nenhuma animacao/transicao; subtle = sem keyframes (Ken Burns/brilhos/pulsos),
   mantendo os hovers/transicoes; full (ou ausente) = comportamento padrao do tema. */
.ec-shared[data-ec-anim="none"] *,
.ec-shared[data-ec-anim="none"] *::before,
.ec-shared[data-ec-anim="none"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.ec-shared[data-ec-anim="subtle"] *,
.ec-shared[data-ec-anim="subtle"] *::before,
.ec-shared[data-ec-anim="subtle"] *::after { animation: none !important; }

/* ===== Densidade (construtor): escala os espaçamentos principais da loja ===== */
.ec-shared[data-ec-density="compact"] .ec-product-grid { gap: 10px; }
.ec-shared[data-ec-density="compact"] .ec-section { padding-block: 30px; }
.ec-shared[data-ec-density="compact"] .ec-product-card__body { padding: 10px 12px; }
.ec-shared[data-ec-density="compact"] .ec-shell { padding-inline: 16px; }
.ec-shared[data-ec-density="airy"] .ec-product-grid { gap: 26px; }
.ec-shared[data-ec-density="airy"] .ec-section { padding-block: 64px; }
.ec-shared[data-ec-density="airy"] .ec-product-card__body { padding: 20px 22px; }

/* ===== Micro-interações universais (transform/opacity, respeitam o nível de animação) ===== */
.ec-shared:not([data-ec-anim="none"]) .ec-button:active { transform: translateY(1px) scale(.985); }
.ec-shared:not([data-ec-anim="none"]) .ec-share-btn:active { transform: scale(.92); }
.ec-shared:not([data-ec-anim="none"]) .ec-product-card__favorite:active { transform: scale(.9); }
.ec-shared:not([data-ec-anim="none"]) .ec-product-card__favorite.is-favorited { animation: ecHeartPop .34s ease; }
@keyframes ecHeartPop { 0% { transform: scale(1); } 42% { transform: scale(1.35); } 100% { transform: scale(1); } }
.ec-shared:not([data-ec-anim="none"]) .ec-alert { animation: ecAlertIn .38s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes ecAlertIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* Botão de compra do produto: brilho sutil ao passar o mouse (só desktop com hover fino) */
@media (hover: hover) {
	.ec-shared:not([data-ec-anim="none"]) .ec-buybox .ec-button--primary { position: relative; overflow: hidden; }
	.ec-shared:not([data-ec-anim="none"]) .ec-buybox .ec-button--primary::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); opacity: 0; }
	.ec-shared:not([data-ec-anim="none"]):not([data-ec-anim="subtle"]) .ec-buybox .ec-button--primary:hover::after { animation: ecBtnSheen .7s ease; }
	@keyframes ecBtnSheen { from { left: -60%; opacity: 1; } to { left: 120%; opacity: 1; } }
}
/* ============================================================================
   ANIMAÇÕES OPCIONAIS DO CONSTRUTOR (data-ec-* no <body>, todas gated por
   data-ec-anim + prefers-reduced-motion). Cada efeito é opt-in pelo lojista.
   ============================================================================ */

/* ----- 1. Letreiro do anúncio (marquee de texto) ----- */
.ec-announcement__track { display: none; }
.ec-shared[data-ec-anuncio="rolando"] .ec-announcement { position: relative; overflow: hidden; }
.ec-shared[data-ec-anuncio="rolando"] .ec-announcement__static { display: none; }
.ec-shared[data-ec-anuncio="rolando"] .ec-announcement__track {
	display: flex; width: max-content; will-change: transform;
	animation: ecMarquee 26s linear infinite;
}
.ec-shared[data-ec-anuncio="rolando"] .ec-announcement__track span { padding: 0 2.2rem; white-space: nowrap; }
.ec-shared[data-ec-anuncio="rolando"][data-ec-anuncio-vel="lenta"] .ec-announcement__track { animation-duration: 40s; }
.ec-shared[data-ec-anuncio="rolando"][data-ec-anuncio-vel="rapida"] .ec-announcement__track { animation-duration: 15s; }
.ec-shared[data-ec-anuncio="rolando"] .ec-announcement:hover .ec-announcement__track { animation-play-state: paused; }
@keyframes ecMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----- 2. Zoom ao passar o mouse (cards de produto/categoria) ----- */
@media (hover: hover) {
	.ec-shared[data-ec-hover-zoom="leve"] .ec-product-card__media,
	.ec-shared[data-ec-hover-zoom="medio"] .ec-product-card__media,
	.ec-shared[data-ec-hover-zoom="leve"] .ec-category-card,
	.ec-shared[data-ec-hover-zoom="medio"] .ec-category-card { overflow: hidden; }
	.ec-shared[data-ec-hover-zoom="leve"] .ec-product-card__media img,
	.ec-shared[data-ec-hover-zoom="medio"] .ec-product-card__media img,
	.ec-shared[data-ec-hover-zoom="leve"] .ec-category-card img,
	.ec-shared[data-ec-hover-zoom="medio"] .ec-category-card img { transition: transform .34s ease; }
	.ec-shared[data-ec-hover-zoom="leve"] .ec-product-card:hover .ec-product-card__media img,
	.ec-shared[data-ec-hover-zoom="leve"] .ec-category-card:hover img { transform: scale(1.05); }
	.ec-shared[data-ec-hover-zoom="medio"] .ec-product-card:hover .ec-product-card__media img,
	.ec-shared[data-ec-hover-zoom="medio"] .ec-category-card:hover img { transform: scale(1.09); }
}

/* ----- 3. Revelar ao rolar (seções inteiras; o core.js adiciona .ec-inview) ----- */
.ec-js .ec-shared[data-ec-reveal="suave"] [data-ec-section]:not(.ec-inview),
.ec-js .ec-shared[data-ec-reveal="destaque"] [data-ec-section]:not(.ec-inview) { opacity: 0; }
.ec-js .ec-shared[data-ec-reveal="suave"] [data-ec-section] { transition: opacity .5s ease, transform .5s ease; }
.ec-js .ec-shared[data-ec-reveal="destaque"] [data-ec-section] { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.25,1); }
.ec-js .ec-shared[data-ec-reveal="suave"] [data-ec-section]:not(.ec-inview) { transform: translateY(16px); }
.ec-js .ec-shared[data-ec-reveal="destaque"] [data-ec-section]:not(.ec-inview) { transform: translateY(30px) scale(.985); }

/* ----- 4. Brilho nos botões de destaque (amplia o sheen que já existia no buybox) ----- */
@media (hover: hover) {
	.ec-shared[data-ec-btn-shine="1"]:not([data-ec-anim="none"]) .ec-button--primary { position: relative; overflow: hidden; }
	.ec-shared[data-ec-btn-shine="1"]:not([data-ec-anim="none"]) .ec-button--primary::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; }
	.ec-shared[data-ec-btn-shine="1"]:not([data-ec-anim="none"]):not([data-ec-anim="subtle"]) .ec-button--primary:hover::after { animation: ecBtnSheen .7s ease; }
}

/* ----- 5. Esteira de bandeiras/selos deslizando (core.js duplica os chips no trilho) ----- */
.ec-shared[data-ec-selos="1"] .ec-payment-chips.ec-belt { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ec-shared[data-ec-selos="1"] .ec-payment-chips.ec-belt .ec-belt__track { display: flex; gap: 14px; width: max-content; animation: ecMarquee 22s linear infinite; }
.ec-shared[data-ec-selos="1"] .ec-payment-chips.ec-belt:hover .ec-belt__track { animation-play-state: paused; }

/* ----- 6. Zoom lento no banner do topo (Ken Burns FINITO por slide — sem loop infinito) ----- */
.ec-shared[data-ec-hero-zoom="1"]:not([data-ec-anim="none"]):not([data-ec-anim="subtle"]) .ec-hero__slide.is-active img,
.ec-shared[data-ec-hero-zoom="1"]:not([data-ec-anim="none"]):not([data-ec-anim="subtle"]) .ec-hero__slide.is-active picture img { animation: ecKenBurns 7s ease-out both; transform-origin: center; }
@keyframes ecKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }

/* ----- Contador (números que sobem): sem CSS de loop; o core.js anima o texto. ----- */

/* Respeito universal: níveis "Sem" e "Sutil" desligam os loops (marquee/esteira) e voltam ao
   estático (o global data-ec-anim=subtle já zera 'animation', mas precisamos reexibir o texto
   estático e esconder o trilho duplicado); redução de movimento idem. */
.ec-shared[data-ec-anim="none"] .ec-announcement__track,
.ec-shared[data-ec-anim="none"] .ec-payment-chips.ec-belt .ec-belt__track { animation: none !important; }
/* Sob "Sem": zoom no hover não salta (transform instantâneo) e seções não iniciam ocultas. */
.ec-shared[data-ec-anim="none"][data-ec-hover-zoom] .ec-product-card:hover .ec-product-card__media img,
.ec-shared[data-ec-anim="none"][data-ec-hover-zoom] .ec-category-card:hover img { transform: none !important; }
.ec-shared[data-ec-anim="none"][data-ec-reveal] [data-ec-section] { opacity: 1 !important; transform: none !important; }
.ec-shared[data-ec-anim="none"][data-ec-anuncio="rolando"] .ec-announcement__static,
.ec-shared[data-ec-anim="subtle"][data-ec-anuncio="rolando"] .ec-announcement__static { display: block; }
.ec-shared[data-ec-anim="none"][data-ec-anuncio="rolando"] .ec-announcement__track,
.ec-shared[data-ec-anim="subtle"][data-ec-anuncio="rolando"] .ec-announcement__track { display: none; }
@media (prefers-reduced-motion: reduce) {
	.ec-shared[data-ec-anuncio="rolando"] .ec-announcement__track { animation: none !important; }
	.ec-shared[data-ec-anuncio="rolando"] .ec-announcement__static { display: block; }
	.ec-shared[data-ec-anuncio="rolando"] .ec-announcement__track { display: none; }
	.ec-shared .ec-payment-chips.ec-belt .ec-belt__track { animation: none !important; }
	.ec-shared[data-ec-hero-zoom="1"] .ec-hero__slide img { animation: none !important; }
	.ec-shared[data-ec-hover-zoom] .ec-product-card:hover .ec-product-card__media img,
	.ec-shared[data-ec-hover-zoom] .ec-category-card:hover img { transform: none !important; }
}

.ec-shared .ec-related { margin-top: 64px; }

.ec-shared .ec-commerce-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start; }
.ec-shared .ec-checkout-steps { margin: 0 0 28px; overflow-x: auto; scrollbar-width: thin; }
.ec-shared .ec-checkout-steps__current, .ec-shared .ec-mobile-buy-dock { display: none; }
.ec-shared .ec-checkout-steps ol { display: grid; grid-template-columns: repeat(4, minmax(125px, 1fr)); min-width: 560px; margin: 0; padding: 0; list-style: none; }
.ec-shared .ec-checkout-steps li { position: relative; display: flex; min-height: 52px; align-items: center; gap: 10px; color: var(--ec-muted); font-size: 13px; }
.ec-shared .ec-checkout-steps li::after { content: ''; position: absolute; z-index: 0; top: 50%; right: 8px; left: 44px; height: 2px; background: var(--ec-border); }
.ec-shared .ec-checkout-steps li:last-child::after { display: none; }
.ec-shared .ec-checkout-steps li > span { position: relative; z-index: 1; display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 2px solid var(--ec-border); border-radius: 50%; background: var(--ec-card); color: var(--ec-muted); font-weight: 850; }
.ec-shared .ec-checkout-steps li > strong { position: relative; z-index: 1; padding-right: 8px; background: var(--ec-page); white-space: nowrap; }
.ec-shared .ec-checkout-steps li.is-current { color: var(--ec-text); }
.ec-shared .ec-checkout-steps li.is-current > span { border-color: var(--ec-primary); background: var(--ec-primary); color: var(--ec-on-primary, #fff); }
.ec-shared .ec-checkout-steps li.is-complete { color: var(--ec-text); }
.ec-shared .ec-checkout-steps li.is-complete > span { border-color: var(--ec-accent); background: var(--ec-accent); color: #fff; }
.ec-shared .ec-checkout-steps li.is-complete::after { background: var(--ec-accent); }
.ec-shared .ec-cart-list, .ec-shared .ec-cart-tools, .ec-shared .ec-summary, .ec-shared .ec-form, .ec-shared .ec-address-card, .ec-shared .ec-contact-card, .ec-shared .ec-payment, .ec-shared .ec-order-timeline { border: 1px solid var(--ec-border); border-radius: var(--ec-radius); background: var(--ec-card); }
.ec-shared .ec-cart-item { display: grid; grid-template-columns: 88px minmax(0, 1fr) 100px auto; gap: 18px; align-items: center; padding: 18px; border-bottom: 1px solid var(--ec-border); }
.ec-shared .ec-cart-item:last-child { border-bottom: 0; }
.ec-shared .ec-cart-item > img, .ec-shared .ec-cart-item > .ec-media-placeholder { width: 88px; height: 88px; object-fit: contain; border-radius: 9px; }
.ec-shared .ec-cart-item h2 { margin: 0; font-size: 16px; }
.ec-shared .ec-cart-item p { color: var(--ec-muted); font-size: 13px; }
.ec-shared .ec-cart-item label { color: var(--ec-muted); font-size: 12px; }
.ec-shared .ec-cart-item input { width: 88px; min-height: 40px; border: 1px solid var(--ec-border); border-radius: 8px; padding: 0 8px; }
/* Ferramentas do carrinho (Cupom + Calcular entrega): blocos com forma de app —
   label em cima, input largo, botão sólido — no lugar do formulário "solto" antigo. */
.ec-shared .ec-cart-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; padding: 20px; }
.ec-shared .ec-cart-tools h2 { margin: 0 0 12px; font-size: 16px; font-weight: 850; }
.ec-shared .ec-cart-tools section { min-width: 0; }
.ec-shared .ec-cart-tools label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 800; color: var(--ec-muted, #667085); text-transform: uppercase; letter-spacing: .04em; }
.ec-shared .ec-cart-tools form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.ec-shared .ec-cart-tools form label { flex-basis: 100%; margin-bottom: 0; }
.ec-shared .ec-cart-tools input { flex: 1 1 150px; min-width: 0; min-height: 44px; border: 1px solid var(--ec-border); border-radius: var(--ec-control-radius, 9px); padding: 0 13px; background: #fff; color: var(--ec-text, #172033); }
.ec-shared .ec-cart-tools input:focus { outline: 0; border-color: var(--ec-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-primary) 18%, transparent); }
.ec-shared .ec-cart-tools .ec-button, .ec-shared .ec-cart-tools button[type="submit"], .ec-shared .ec-cart-tools #btn-calcular-frete { flex-shrink: 0; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--ec-control-radius, 9px); background: var(--ec-primary); color: var(--ec-on-primary, #fff); font-weight: 800; cursor: pointer; }
.ec-shared .ec-cart-tools button[type="submit"]:hover, .ec-shared .ec-cart-tools #btn-calcular-frete:hover { filter: brightness(1.06); }
.ec-shared .ec-cart-tools [data-state="shipping"] { padding-top: 16px; border-top: 1px dashed var(--ec-border); margin-top: 16px; }
@media (min-width: 768px) { .ec-shared .ec-cart-tools [data-state="shipping"] { padding-top: 0; border-top: 0; margin-top: 0; } }
.ec-shared .ec-cart-tools p { margin: 0 0 8px; font-weight: 700; }

/* Conta logada: navegação em pílulas horizontais no celular (padrão app) */
@media (max-width: 767px) {
    .ec-shared .ec-account-layout { grid-template-columns: 1fr; gap: 16px; }
    .ec-shared .ec-account-nav { flex-direction: row; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .ec-shared .ec-account-nav::-webkit-scrollbar { display: none; }
    .ec-shared .ec-account-nav a { flex-shrink: 0; border-radius: 999px; padding: 10px 17px; }
    .ec-shared .ec-cart-tools { grid-template-columns: 1fr; }
}
.ec-shared .ec-summary { position: sticky; top: 20px; padding: 24px; }
.ec-shared .ec-summary h2 { margin-top: 0; }
.ec-shared .ec-summary dl { margin: 20px 0; }
.ec-shared .ec-summary dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--ec-border); }
.ec-shared .ec-summary__total { font-size: 19px; font-weight: 900; }

.ec-shared .ec-form { padding: 26px; }
.ec-shared .ec-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Rótulo de campo deriva da TINTA do lojista (--ec-text), não de --ec-muted: o muted é fixo no
   preset e não acompanha a superfície, então em loja que pinta os cards ele reprovava AA
   (#667085 sobre #eee4db = 3.97:1). A 70% acompanha qualquer superfície e melhora todos os
   temas de fábrica também (4.97 -> ~6:1). */
.ec-shared .ec-form-grid label { display: grid; min-width: 0; gap: 6px; color: color-mix(in srgb, var(--ec-text) 70%, transparent); font-size: 13px; font-weight: 700; }
.ec-shared .ec-form-grid input,
.ec-shared .ec-form-grid select,
.ec-shared .ec-form-grid textarea { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--ec-border); border-radius: 9px; padding: 10px 12px; background: #fff; color: var(--ec-text); }
.ec-shared .ec-form label { display: grid; gap: 6px; color: color-mix(in srgb, var(--ec-text) 70%, transparent); font-size: 13px; font-weight: 700; }
.ec-shared .ec-form input, .ec-shared .ec-form select, .ec-shared .ec-form textarea { width: 100%; min-height: 44px; border: 1px solid var(--ec-border); border-radius: 9px; padding: 10px 12px; background: #fff; color: var(--ec-text); }
.ec-shared .ec-form > .ec-button { margin-top: 22px; }
.ec-shared .ec-address-form > .ec-button { margin-top: 24px; }
.ec-shared .ec-address-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.ec-shared .ec-address-card { padding: 22px; }
.ec-shared .ec-address-card h2 { font-size: 18px; }
.ec-shared .ec-address-card label { display: flex; gap: 10px; margin-top: 12px; }
.ec-shared .ec-payment { max-width: 860px; padding: 24px; }
.ec-shared .ec-payment__tabs { display: flex; gap: 8px; margin-bottom: 22px; border-bottom: 1px solid var(--ec-border); }
.ec-shared .ec-payment__tabs button { min-height: 44px; border: 0; border-bottom: 3px solid transparent; padding: 0 18px; background: transparent; font-weight: 850; }
.ec-shared .ec-payment__tabs button[aria-selected="true"] { border-bottom-color: var(--ec-primary); color: var(--ec-primary); }
.ec-shared .ec-payment form { border: 0; padding: 0; }

.ec-shared .ec-order-result { max-width: 880px; }
.ec-shared .ec-order-actions { display: flex; gap: 10px; margin-top: 22px; }
/* superfícies de PAINEL seguem var(--ec-card), igual aos irmãos da linha 526 e ao .ec-state.
   (Os INPUTS continuam #fff de propósito — campo branco sobre card colorido é acabamento.) */
.ec-shared .ec-pix-result { margin-top: 24px; padding: 22px; border: 1px solid var(--ec-border); border-radius: var(--ec-radius); background: var(--ec-card, #fff); }
.ec-shared .ec-pix-result textarea { width: 100%; min-height: 110px; border: 1px solid var(--ec-border); border-radius: 8px; padding: 10px; }
.ec-shared .ec-order-timeline { padding: 24px; }
.ec-shared .ec-order-timeline > div { position: relative; padding: 0 0 24px 28px; border-left: 2px solid var(--ec-border); }
.ec-shared .ec-order-timeline > div::before { content: ''; position: absolute; top: 2px; left: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--ec-border); }
.ec-shared .ec-order-timeline > .is-done::before { background: var(--ec-accent); }
.ec-shared .ec-order-items article { display: grid; grid-template-columns: 50px 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ec-border); }
.ec-shared .ec-auth { display: grid; min-height: 620px; place-items: center; padding: 50px 20px; }
.ec-shared .ec-auth__card { width: min(100%, 460px); padding: 34px; border: 1px solid var(--ec-border); border-radius: var(--ec-radius); background: var(--ec-card, #fff); box-shadow: 0 16px 42px rgba(20,33,61,.08); }
.ec-shared .ec-auth__card > small { color: var(--ec-primary); font-weight: 900; text-transform: uppercase; }
.ec-shared .ec-auth__card h1 { margin: 6px 0 22px; }
/* Dentro do card de login o .ec-form NAO e painel: alem de border/padding, precisa zerar o
   background e o raio herdados da regra generica (.ec-form usa var(--ec-card)). Sem isso, loja
   que pinta os cards (cor_body_cards) ganha um retangulo colorido dentro do card branco de login
   -- e os labels, em var(--ec-muted), caem para ~4:1 sobre ele (reprovam AA). */
.ec-shared .ec-auth__card .ec-form { display: grid; gap: 16px; border: 0; padding: 0; background: transparent; border-radius: 0; }
.ec-shared .ec-auth__card > a { display: inline-block; margin-top: 18px; color: var(--ec-primary); }
.ec-shared .ec-account-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; }
.ec-shared .ec-account-nav { display: flex; flex-direction: column; gap: 6px; }
.ec-shared .ec-account-nav a { padding: 12px 14px; border: 1px solid var(--ec-border); border-radius: 9px; background: var(--ec-card, #fff); font-weight: 700; }
.ec-shared .ec-order-grid, .ec-shared .ec-post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.ec-shared .ec-order-card, .ec-shared .ec-post-card { padding: 22px; border: 1px solid var(--ec-border); border-radius: var(--ec-radius); background: var(--ec-card, #fff); }
.ec-shared .ec-order-card h2 { margin: 3px 0; }
.ec-shared .ec-post-card { padding: 0; overflow: hidden; }
.ec-shared .ec-post-card > img { width: 100%; height: 230px; object-fit: cover; }
.ec-shared .ec-post-card > div { padding: 20px; }
.ec-shared .ec-post-card h2 { font-size: 21px; }
.ec-shared .ec-contact-card { padding: 26px; }
.ec-shared .ec-article .ec-shell { max-width: 900px; }
.ec-shared .ec-article__cover { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--ec-radius); }
.ec-shared .ec-rich-text { margin: 32px 0; font-size: 17px; line-height: 1.8; }

.ec-shared .ec-footer { padding: 52px 0; border-top: 1px solid var(--ec-border); background: #111827; color: #fff; }
.ec-shared .ec-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 54px; }
.ec-shared .ec-footer__grid > div { display: flex; align-items: flex-start; flex-direction: column; gap: 9px; }
.ec-shared .ec-footer p, .ec-shared .ec-footer a { color: #c7ced9; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ec-shared .ec-product-card, .ec-shared .ec-category-card { transition: transform 160ms ease, box-shadow 160ms ease; }
    .ec-shared .ec-product-card:hover, .ec-shared .ec-category-card:hover { transform: translateY(-3px); box-shadow: 0 15px 34px rgba(20,33,61,.11); }
}

@media (max-width: 1023px) {
    /* Trava de rolagem: body fixo preservando a posição (top negativo via JS). Elimina o pulo
       de reflow ao fixar o cabeçalho e segura a rolagem também no iOS. */
    .ec-shared.ec-menu-open { overflow: hidden; position: fixed; left: 0; right: 0; width: 100%; }
    /* Enquanto o menu está aberto, o cabeçalho (marca, busca e o X de fechar) fica fixo no
       topo da viewport — senão, ao abrir o menu com a página rolada, o botão de fechar some.
       !important porque cada tema fixa .ec-header{position:relative} no mobile com a mesma
       especificidade e carrega DEPOIS do core; este é um override de estado que deve vencer. */
    .ec-shared.ec-menu-open .ec-header { position: fixed !important; top: 0; left: 0; right: 0; }
    .ec-shared .ec-menu-backdrop.is-open { display: block; }
    .ec-shared .ec-header__main { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; padding: 14px 0; }
    .ec-shared .ec-search { grid-column: 1 / -1; grid-row: 2; }
    .ec-shared .ec-utilities { display: none; }
    .ec-shared .ec-header__mobile-actions { display: flex; }
    .ec-shared .ec-menu-trigger { display: block; }
    .ec-shared .ec-primary-nav { display: none; }
    .ec-shared .ec-primary-nav.is-open { display: block; }
    .ec-shared .ec-primary-nav .ec-shell { align-items: stretch; flex-direction: column; gap: 0; padding: 10px 0; }
    .ec-shared .ec-primary-nav a { padding: 11px 0; }
    .ec-shared .ec-product-grid, .ec-shared .ec-category-grid { grid-template-columns: repeat(2, 1fr); }
    .ec-shared .ec-product-detail, .ec-shared .ec-commerce-grid { grid-template-columns: 1fr; }
    .ec-shared .ec-summary { position: static; }
    .ec-shared .ec-benefits__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
    .ec-shared .ec-shell { width: min(calc(100% - 28px), var(--ec-shell)); }
    .ec-shared .ec-section, .ec-shared .ec-page { padding: 44px 0; }
    .ec-shared .ec-hero, .ec-shared .ec-hero__slide, .ec-shared .ec-hero__content, .ec-shared .ec-hero__fallback { min-height: 410px; }
    .ec-shared .ec-hero__content { padding-right: 14px; }
    .ec-shared .ec-hero h1 { font-size: 38px; }
    .ec-shared .ec-hero__controls { right: 14px; left: 14px; justify-content: center; }
    .ec-shared .ec-hero__controls .ec-hero__toggle { position: absolute; right: 0; width: 44px; padding: 0; }
    .ec-shared .ec-hero__toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ec-shared .ec-hero__toggle::before {
        content: '';
        display: block;
        width: 12px;
        height: 14px;
        margin: auto;
        background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 9px, currentColor 9px 12px);
    }
    .ec-shared .ec-hero__toggle[aria-pressed="true"]::before {
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 11px solid currentColor;
        background: none;
    }
    .ec-shared .ec-section__head { align-items: flex-start; flex-direction: column; }
    .ec-shared .ec-brand { min-width: 0; font-size: 18px; overflow: hidden; }
    .ec-shared .ec-brand img { max-width: min(150px, 38vw); max-height: 48px; }
    .ec-shared .ec-mobile-cart > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ec-shared .ec-mobile-cart { padding-inline: 9px; }
    .ec-shared .ec-product-grid, .ec-shared .ec-category-grid { gap: 12px; }
    .ec-shared .ec-product-card__body { padding: 12px; }
    .ec-shared .ec-product-card__actions { grid-template-columns: 1fr; }
    .ec-shared .ec-icon-button { display: none; }
    .ec-shared .ec-benefits__grid { grid-template-columns: 1fr; }
    .ec-shared .ec-benefits__grid > div { min-height: 66px; border-right: 0; border-bottom: 1px solid var(--ec-border); }
    .ec-shared .ec-gallery__main { min-height: 320px; }
    .ec-shared .ec-gallery.is-empty::before { min-height: 320px; }
    .ec-shared .ec-buybox { padding: 22px; }
    .ec-shared .ec-cart-item { grid-template-columns: 72px 1fr; }
    .ec-shared .ec-cart-item > label, .ec-shared .ec-cart-item > form { grid-column: 2; }
    .ec-shared .ec-cart-tools, .ec-shared .ec-form-grid, .ec-shared .ec-address-grid, .ec-shared .ec-order-grid, .ec-shared .ec-post-grid, .ec-shared .ec-footer__grid, .ec-shared .ec-account-layout { grid-template-columns: 1fr; }
    .ec-shared .ec-catalog-tools { align-items: stretch; flex-direction: column; }
    .ec-shared .ec-order-actions { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .ec-shared *, .ec-shared *::before, .ec-shared *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* ============================================================================
   MODO APP (mobile): tab bar inferior, pílulas de categoria, rails com snap,
   skeleton nas fotos e coração overlay. Tudo escopado .ec-shared + @media —
   desktop e temas legados intocados.
   ============================================================================ */
.ec-shared .ec-header { padding-top: env(safe-area-inset-top, 0px); }
.ec-shared .ec-tabbar { display: none; }
.ec-shared .ec-catpills { display: none; }

/* skeleton/shimmer nas fotos dos cards: OVERLAY ::after (não mexe no background que cada
   tema pinta no __media — sem guerra de especificidade) e some via CLASSE que o core.js põe
   no próprio __media (is-img-loaded — sem depender de :has). Só com JS ativo (.ec-js).
   USA ::after, NÃO ::before: o ::before já é o placeholder "Imagem indisponível" da linha 290.
   E só anima com .is-img-pending, que o core.js põe apenas onde EXISTE uma <img> esperando —
   produto sem foto nenhuma não tem <img>, logo o JS nunca o alcançava e o shimmer ficava
   girando para sempre por cima do <span class="ec-media-placeholder">. */
.ec-js .ec-shared .ec-product-card__media { position: relative; }
.ec-js .ec-shared .ec-product-card__media.is-img-pending::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, #eef2f8 40%, #f8fafd 50%, #eef2f8 60%); background-size: 200% 100%; animation: ecShimmer 1.4s linear infinite; pointer-events: none; }
.ec-js .ec-shared .ec-product-card__media.is-img-loaded::after,
.ec-js .ec-shared .ec-product-card__media.is-empty::after { content: none; }
.ec-js .ec-shared[data-ec-anim="none"] .ec-product-card__media::after { animation: none; }
@keyframes ecShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ec-js .ec-shared .ec-product-card__media::after { animation: none; } }

@media (max-width: 767px) {
    .ec-shared .ec-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--ec-card, #fff); border-top: 1px solid var(--ec-border, #e4e8ef); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -6px 24px rgba(15, 23, 42, .08); }
    .ec-shared .ec-tabbar a, .ec-shared .ec-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; border: 0; padding: 6px 2px; background: transparent; font-size: 10.5px; font-weight: 800; color: var(--ec-muted, #667085); text-decoration: none; cursor: pointer; }
    .ec-shared .ec-tabbar svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .ec-shared .ec-tabbar .is-active { color: var(--ec-primary); }
    .ec-shared .ec-tabbar__icon { position: relative; display: inline-flex; }
    .ec-shared .ec-tabbar__badge { position: absolute; top: -6px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--ec-primary); color: var(--ec-on-primary, #fff); font-size: 9.5px; font-weight: 900; }
    /* o documento ganha respiro no fim para a tab bar não cobrir o rodapé */
    .ec-shared .ec-footer { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    /* checkout limpo: sem tab bar nas etapas de compra (carrinho -> pagamento).
       .ec-has-checkout e o fallback via JS p/ navegadores sem :has(). */
    .ec-shared:has([data-ec-checkout-step]) .ec-tabbar, .ec-shared.ec-has-checkout .ec-tabbar { display: none; }
    .ec-shared:has([data-ec-checkout-step]) .ec-footer, .ec-shared.ec-has-checkout .ec-footer { padding-bottom: 24px; }
    /* buy-dock (barra de compra do celular) sobe para cima da tab bar em TODOS os temas shared,
       senão o botão "Adicionar ao carrinho" fica atrás da tab bar (z-index 1100) e não dá pra clicar. */
    .ec-shared [data-ec-mobile-buy-dock] { bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; z-index: 1090; }
    /* WhatsApp flutuante acima da tab bar; na página de produto do Catálogo, acima do dock também */
    .ec-shared .cc-wpp-float { bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; }
    .ec-shared:has([data-ec-mobile-buy-dock]) .cc-wpp-float { bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important; }

    /* pílulas de categoria roláveis sob o header */
    .ec-shared .ec-catpills { display: block; background: var(--ec-card, #fff); border-bottom: 1px solid var(--ec-border, #e4e8ef); }
    .ec-shared .ec-catpills__rail { display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .ec-shared .ec-catpills__rail::-webkit-scrollbar { display: none; }
    .ec-shared .ec-catpills__rail a { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border: 1px solid var(--ec-border, #e4e8ef); border-radius: 999px; background: var(--ec-page, #f6f8fb); font-size: 12.5px; font-weight: 800; color: var(--ec-text, #172033); }

    /* coração de favoritar vira overlay 44x44 no canto da foto */
    .ec-shared .ec-product-card { position: relative; }
    .ec-shared .ec-product-card__actions .ec-product-card__favorite { position: absolute !important; top: 8px; right: 8px; width: 44px !important; height: 44px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center; justify-content: center; background: rgba(255, 255, 255, .94) !important; box-shadow: 0 4px 14px rgba(15, 23, 42, .16); z-index: 2; }
}

/* rails horizontais com scroll-snap (só onde a classe opt-in foi aplicada; só telas pequenas) */
@media (max-width: 639px) {
    .ec-shared .ec-mobile-product-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 76%; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px; scrollbar-width: none; }
    .ec-shared .ec-mobile-product-rail::-webkit-scrollbar { display: none; }
    .ec-shared .ec-mobile-product-rail > * { scroll-snap-align: start; min-width: 0; }
}