/* ============================================================
   Coisas de Trancista — elementor-design.css
   Fontes (Cormorant Garamond, Jost) já são carregadas via
   wp_enqueue_style('storefront-child-fonts', ...) em functions.php —
   nenhum @import aqui, para evitar uma segunda requisição/FOUT.
   Todo o CSS está escopado por .em-home (classe presente em
   TODOS os containers raiz das seções). Nenhuma regra afeta
   outras páginas do WordPress.
   Paleta (kit Coisas de Trancista, 2026-09-14):
     #000000 preto base · #0A0708 preto suave (fundos/cartões)
     #E8B4B8 rosê gold (principal) · #F7D9DB rosê claro (hover)
     #B76E79 rosê médio · #8C4A55 vinho rosé (degradê metálico)
     #FFFFFF títulos · #F6E7E9 textos · #8A7274 legendas
     Botões: linear-gradient(100deg, #8C4A55, #E8B4B8 55%, #B76E79)
   Tipografia: Cormorant Garamond (títulos) · Jost (texto)
   As animações (@keyframes, transições, IntersectionObserver
   via classes) ficam neste mesmo arquivo — estão fortemente
   acopladas aos seletores de cada seção; separar em um segundo
   CSS exigiria duplicar seletores e aumentaria o risco de
   dessincronia entre os dois arquivos.
   ============================================================ */

@keyframes emMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes emShine { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes emKenBurns { from { transform: scale(1) translateY(0); } to { transform: scale(1.1) translateY(-1.5%); } }

/* ---------- base da página ---------- */
.em-home { font-family: "Jost", sans-serif; color: #0A0708; --em-wrap: 1280px; }
.em-home p { margin: 0; }
.em-home .em-wrap { max-width: var(--em-wrap); margin-inline: auto; width: 100%; padding-inline: 24px; }
.em-home a:focus-visible,
.em-home button:focus-visible,
.em-home input:focus-visible { outline: 2px solid #8C4A55; outline-offset: 2px; }

/* ---------- 01 · barra de aviso ---------- */
.em-home.em-aviso { background: linear-gradient(90deg, #8C4A55, #B76E79, #8C4A55); padding: 8px 16px; }
.em-aviso .em-aviso-text p { color: #F7D9DB; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-align: center; font-weight: 600; }

/* ---------- 01 · header ---------- */
/* Header no formato do site de referência: NÃO é fixo, e a navegação desce
   para uma segunda linha centralizada (logo · busca larga · ações em cima).
   A segunda linha é feita só por CSS (order + flex-basis 100%) para não ter
   de reestruturar a árvore do Elementor. */
.em-home.em-header { position: static; z-index: 50; background: #0A0708; border-bottom: 1px solid rgba(232, 180, 184, .18); padding: 0; }
.em-header .em-header-wrap { max-width: 1280px; margin-inline: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 24px; flex-wrap: wrap; }
.em-header .em-header-logo { flex: 0 0 auto; width: auto; gap: 2px; }
/* logo do header: widget de imagem clássico (convertido do widget atômico e-image
   em 2026-09-14, que parou de renderizar após desativar os experimentos V4) */
.em-header .em-header-logo-img img { width: 162px; height: 74px; object-fit: contain; display: block; }
@media (max-width: 767px) { .em-header .em-header-logo-img img { width: 120px; height: auto; } }
.em-header .em-logo-word div { font-family: "Cormorant Garamond", serif; font-size: 26px; letter-spacing: .02em; line-height: 1; background: linear-gradient(100deg, #E8B4B8 20%, #F7D9DB 40%, #B76E79 60%, #E8B4B8 80%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: emShine 6s linear infinite; }
.em-header .em-logo-sub p { font-size: 11px; letter-spacing: .42em; color: #8A7274; text-transform: uppercase; }
/* menu à direita, na mesma linha das ações (a logo saiu do cabeçalho em
   15/09, por decisão da Madu — ela já aparece no banner de entrada) */
.em-header .em-header-nav { order: 2; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 4px; width: auto; }
.em-header .em-nav-link .elementor-button { background: transparent; color: #F6E7E9; font-family: "Jost", sans-serif; font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 99px; fill: currentColor; }
.em-header .em-nav-link .elementor-button:hover { background: rgba(183, 110, 121, .35); color: #E8B4B8; }
.em-header .em-nav-link--accent .elementor-button { color: #E8B4B8; font-weight: 700; }
.em-header .em-nav-link--accent .elementor-button:hover { background: rgba(232, 180, 184, .15); }
/* ---------- ações do cabeçalho: busca · favoritos · carrinho · conta ----------
   Renderizadas pelo shortcode [em_header_actions] (functions.php do tema), não
   por widgets do Elementor: os contadores precisam ser dinâmicos. Ficam à
   ESQUERDA do cabeçalho, a pedido da Madu (15/09), com o menu à direita. */
.em-header .em-header-actions { flex: 1 1 auto; width: auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; order: 1; }
.em-header .em-header-actions-sc { width: 100%; }
.em-header .em-actions { display: flex; align-items: center; gap: clamp(6px, 1vw, 16px); }

.em-header .em-search { display: flex; align-items: center; gap: 8px; background: #0A0708; border: 1px solid #8C4A55; border-radius: 99px; padding: 7px 16px; flex: 0 1 300px; min-width: 0; margin: 0; }
.em-header .em-search input[type="search"] { background: transparent; border: 0; color: #F6E7E9; font-family: "Jost", sans-serif; font-size: 13px; width: 100%; min-width: 0; padding: 2px 0; box-shadow: none; }
.em-header .em-search input[type="search"]:focus { outline: none; }
.em-header .em-search input::placeholder { color: #8A7274; }
.em-header .em-search-btn { display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; flex: 0 0 auto; }
.em-header .em-search-btn svg { width: 17px; height: 17px; fill: none; stroke: #E8B4B8; stroke-width: 2; stroke-linecap: round; }

.em-header .em-action { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #F6E7E9; text-decoration: none; padding: 4px 6px; border-radius: 10px; transition: color .2s ease, background .2s ease; }
.em-header .em-action:hover { color: #E8B4B8; background: rgba(183, 110, 121, .22); }
.em-header .em-action svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.em-header .em-action-label { font-family: "Jost", sans-serif; font-size: 10px; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.em-header .em-cart-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; background: #E8B4B8; color: #0A0708; font-family: "Jost", sans-serif; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 0 4px; }
/* carrinho vazio: sem bolha, para não anunciar um "0" */
.em-header .em-cart-badge--vazio { display: none; }

/* ---------- 02 · hero ---------- */
.em-home.em-hero { display: block; position: relative; height: 100vh; min-height: 560px; overflow: hidden; padding: 0; margin-bottom: -25px; background: radial-gradient(120% 140% at 80% 20%, #8C4A55 0%, #000000 60%); }
.em-hero .em-ken-burns { position: absolute; inset: -2%; padding: 0; background-position: center 30% !important; animation: emKenBurns 20s ease-in-out infinite alternate; will-change: transform; }
.em-hero .em-hero-overlay { position: absolute; inset: 0; padding: 0; background:
  linear-gradient(135deg, rgba(140, 74, 85, .42), rgba(183, 110, 121, .16) 55%, rgba(140, 74, 85, .42)),
  linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55) 100%); }
/* canvas decorativo — position:absolute permitido (elemento não editorial) */
.em-hero .em-magic-canvas-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.em-hero .em-magic-canvas { display: block; width: 100%; height: 100%; mix-blend-mode: screen; }
.em-hero .em-hero-carousel { position: absolute; inset: 0; padding: 0; z-index: 3; }
/* slides sobrepostos: absolute é necessário para o crossfade do carrossel */
.em-hero .em-hero-slide { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 110px; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.em-hero .em-hero-slide.is-active { opacity: 1; pointer-events: auto; }
.em-hero .em-hero-slide-inner { max-width: 860px; width: 100%; margin-inline: auto; padding-inline: 24px; align-items: center; text-align: center; gap: 0; transform: translateY(26px); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.em-hero .em-hero-slide.is-active .em-hero-slide-inner { transform: none; }
.em-hero .em-hero-chip { margin-bottom: 18px; }
.em-hero .em-hero-chip p { display: inline-block; border: 1px solid rgba(232, 180, 184, .5); color: #E8B4B8; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; padding: 6px 14px; border-radius: 99px; }
.em-hero .em-hero-title h1 { font-family: "Cormorant Garamond", serif; font-size: clamp(42px, 7.4vw, 96px); line-height: 1.16; margin: 0 0 24px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: #FFFFFF; text-wrap: balance; }
.em-hero .em-hero-title em { font-family: "Cormorant Garamond", serif; font-style: italic; text-transform: none; font-weight: 400; letter-spacing: 0; }
.em-hero .em-hero-sub { margin-bottom: 28px; }
.em-hero .em-hero-sub p { font-size: clamp(14px, 1.4vw, 17px); color: rgba(255, 255, 255, .82); max-width: 440px; margin-inline: auto; font-weight: 500; }
.em-hero .em-hero-cta-row { flex-direction: row; align-items: center; gap: 18px; width: auto; align-self: center; background: rgba(0, 0, 0, .25); backdrop-filter: blur(12px); border-radius: 16px; padding: 6px 6px 6px 22px; }
.em-hero .em-hero-cta-note p { color: #FFFFFF; font-size: 14px; font-weight: 500; white-space: nowrap; }
.em-hero .em-hero-cta-btn .elementor-button { background: linear-gradient(100deg, #8C4A55, #E8B4B8 55%, #B76E79); color: #0A0708; font-family: "Jost", sans-serif; font-weight: 700; font-size: 14px; padding: 12px 24px; border-radius: 12px; letter-spacing: .03em; transition: transform .25s ease, box-shadow .25s ease; }
.em-hero .em-hero-cta-btn .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(232, 180, 184, .4); color: #0A0708; }
.em-hero .em-hero-controls { position: absolute; left: 0; right: 0; bottom: 44px; flex-direction: row; justify-content: center; align-items: center; gap: 10px; padding: 0; z-index: 5; }
.em-hero .em-hero-prev,
.em-hero .em-hero-next { cursor: pointer; }
.em-hero .em-hero-prev .elementor-icon,
.em-hero .em-hero-next .elementor-icon { width: 38px; height: 38px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .3); display: flex; align-items: center; justify-content: center; color: #FFFFFF; fill: #FFFFFF; font-size: 15px; transition: background .2s ease; }
.em-hero .em-hero-prev .elementor-icon:hover,
.em-hero .em-hero-next .elementor-icon:hover { background: rgba(255, 255, 255, .15); }
.em-hero .em-hero-dots-row { display: flex; align-items: center; gap: 10px; }
.em-hero .em-hero-dot { appearance: none; border: 0; padding: 0; cursor: pointer; width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .35); transition: width .4s ease, background .4s ease; }
.em-hero .em-hero-dot.is-active { width: 26px; background: #E8B4B8; }

/* ---------- cards de produto WooCommerce (base) ---------- */
.em-home .em-product-cards ul.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.em-home .em-product-cards ul.products::before,
.em-home .em-product-cards ul.products::after { display: none; }
.em-home .em-product-cards ul.products li.product { width: auto; margin: 0; padding: 16px; float: none; background: #FFFFFF; color: #0A0708; border-radius: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 0 0 1px rgba(183, 110, 121, .25), 0 6px 20px rgba(140, 74, 85, .12); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.em-home .em-product-cards ul.products li.product:hover { transform: translateY(-8px); box-shadow: 0 0 0 1px rgba(140, 74, 85, .35), 0 22px 44px rgba(140, 74, 85, .22); }
.em-home .em-product-cards ul.products li.product a img { width: 100%; height: 230px; object-fit: cover; border-radius: 12px; margin: 0; background: #0A0708; }
.em-home .em-product-cards ul.products li.product .woocommerce-loop-product__title { font-family: "Jost", sans-serif; font-size: 15px; font-weight: 700; line-height: 1.35; min-height: 40px; padding: 0; margin: 0; color: #0A0708; }
.em-home .em-product-cards ul.products li.product .price { font-size: 16px; font-weight: 700; color: #8C4A55; margin: 0; }
.em-home .em-product-cards ul.products li.product .price del { color: #8A7274; font-size: 12px; font-weight: 400; margin-right: 6px; }
.em-home .em-product-cards ul.products li.product .price ins { text-decoration: none; }
.em-home .em-product-cards ul.products li.product .button { margin: auto 0 0; background: linear-gradient(100deg, #8C4A55, #E8B4B8 55%, #B76E79); color: #0A0708; text-align: center; font-size: 13px; font-weight: 700; padding: 12px; border-radius: 99px; transition: background .2s ease; }
.em-home .em-product-cards ul.products li.product .button:hover { background: linear-gradient(100deg, #B76E79, #F7D9DB 55%, #E8B4B8); color: #0A0708; }
.em-home .em-product-cards ul.products li.product .onsale { position: absolute; top: 22px; right: 22px; background: #B76E79; color: #FFFFFF; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; min-height: 0; min-width: 0; line-height: 1.6; margin: 0; }
.em-home .em-product-cards ul.products li.product { position: relative; }

/* ---------- 03 · compre por categoria ----------
   Linha de categorias em círculo, com "Ver tudo" à direita do título.
   As imagens são placeholder (attachment 213) — a Madu troca no Elementor. */
.em-home.em-categorias { background: #FFFFFF; color: #0A0708; padding: clamp(40px, 5vw, 64px) 24px 0; }
.em-categorias .em-categorias-wrap { gap: 26px; padding-inline: 0; }
.em-categorias .em-categorias-head { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0; }
.em-categorias .em-categorias-title h2 { font-family: "Jost", sans-serif; font-size: clamp(15px, 1.6vw, 18px); font-weight: 600; letter-spacing: .04em; margin: 0; color: #0A0708; }
.em-categorias .em-categorias-vertudo .elementor-button { background: transparent; color: #8C4A55; font-family: "Jost", sans-serif; font-size: 14px; font-weight: 600; padding: 4px 0; border-radius: 0; white-space: nowrap; }
.em-categorias .em-categorias-vertudo .elementor-button .elementor-button-text::after { content: "\00a0\2192"; }
.em-categorias .em-categorias-vertudo .elementor-button:hover { color: #B76E79; }
/* são só 3 categorias: centralizar fica melhor que esticar a linha inteira */
.em-categorias .em-categorias-row { flex-direction: row; justify-content: center; align-items: flex-start; gap: clamp(28px, 7vw, 96px); flex-wrap: wrap; padding: 0; }
.em-categorias .em-categoria-item { width: auto; flex: 0 1 180px; align-items: center; text-align: center; gap: 12px; padding: 0; }
.em-categorias .em-categoria-img img { width: clamp(110px, 12vw, 160px); height: clamp(110px, 12vw, 160px); border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(183, 110, 121, .3); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.em-categorias .em-categoria-item:hover .em-categoria-img img { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(140, 74, 85, .55), 0 12px 26px rgba(140, 74, 85, .2); }
.em-categorias .em-categoria-nome h3 { font-family: "Jost", sans-serif; font-size: 14px; font-weight: 500; margin: 0; color: #0A0708; }
.em-categorias .em-categoria-nome h3 a { color: inherit; text-decoration: none; }
.em-categorias .em-categoria-nome h3 a:hover { color: #8C4A55; }

/* ---------- 04 · seções de produto (as duas grades) ----------
   Formato do site de referência: título centralizado entre duas linhas
   horizontais e a grade ocupando a largura inteira abaixo. */
.em-home .em-secao-wrap,
.em-home .em-secao-corpo { gap: 0; padding-inline: 0; }
.em-home .em-secao-head { align-items: center; text-align: center; gap: 0; padding: 0; margin-bottom: 26px; }
.em-home .em-secao-heading { width: 100%; align-items: center; text-align: center; gap: 0; padding: 0; }
.em-home .em-secao-titulo { width: 100%; }
.em-home .em-secao-titulo h2 { display: flex; align-items: center; gap: 22px; justify-content: center; font-family: "Cormorant Garamond", serif; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; margin: 0; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: #0A0708; }
.em-home .em-secao-titulo h2::before,
.em-home .em-secao-titulo h2::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(183, 110, 121, .45); }
.em-home .em-secao-titulo span { color: #8C4A55; }
.em-home .em-secao-sub { margin-top: 12px; }
.em-home .em-secao-sub p { font-size: 15px; color: #8A7274; line-height: 1.6; max-width: 620px; margin-inline: auto; }
.em-home .em-secao-cta { align-items: center; margin-top: 22px; gap: 12px; padding: 0; width: 100%; }
.em-home .em-secao-grade { padding: 0; }
.em-home .em-secao-grade ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* grade 1 (antiga "favoritos") */
.em-home.em-favoritos { background: #FFFFFF; color: #0A0708; padding: clamp(48px, 7vw, 88px) 24px; }
.em-home .em-btn-dark .elementor-button { background: #0A0708; color: #E8B4B8; font-family: "Jost", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; padding: 16px 30px; border-radius: 99px; transition: transform .25s ease, box-shadow .25s ease; }
.em-home .em-btn-dark .elementor-button:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .5); color: #E8B4B8; }

/* ---------- 05 · banner duplo (placeholders) ---------- */
.em-home.em-banner-duplo { background: #FFFFFF; padding: clamp(8px, 2vw, 24px) 24px clamp(32px, 5vw, 56px); }
.em-banner-duplo .em-banner-duplo-wrap { flex-direction: row; gap: clamp(12px, 2vw, 24px); flex-wrap: wrap; padding-inline: 0; }
.em-banner-duplo .em-banner-item { flex: 1 1 320px; width: auto; }
.em-banner-duplo .em-banner-item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }

/* O marquee e o carrossel horizontal com barra de progresso foram removidos
   em 2026-09-15, quando a Home passou a seguir a estrutura do site de
   referência (amoreljoias.com.br), que não tem nenhum dos dois. O JS de
   interações continua no tema, mas fica sem alvo nesta página. */

/* ---------- 06 · grade 2 (antiga "ofertas", agora sem carrossel) ---------- */
.em-home.em-ofertas { background: #FFFFFF; padding: clamp(40px, 6vw, 80px) 24px clamp(48px, 7vw, 88px); }
.em-ofertas .em-secao-titulo h2 { color: #0A0708; }
.em-ofertas .em-secao-sub p { color: #8A7274; }
.em-home .em-btn-gold .elementor-button { background: linear-gradient(100deg, #8C4A55, #E8B4B8 55%, #B76E79); color: #0A0708; font-family: "Jost", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 12px 22px; border-radius: 99px; transition: transform .2s ease; }
.em-home .em-btn-gold .elementor-button:hover { transform: translateY(-2px); color: #0A0708; }

/* ---------- 06b · grade 3 · "Todos os produtos" ----------
   Restituída em 2026-09-15 a pedido da Madu, já no padrão das outras duas
   grades (classes .em-secao-*). O padding do topo é menor porque a seção
   de Ofertas, logo acima, já traz o respiro embaixo. */
.em-home.em-todos { background: #FFFFFF; color: #0A0708; padding: clamp(24px, 4vw, 48px) 24px clamp(48px, 7vw, 88px); }

/* ---------- 07 · faixa de benefícios ---------- */
.em-home.em-beneficios { background: #FFFFFF; padding: 0 24px clamp(48px, 7vw, 80px); }
.em-beneficios .em-beneficios-wrap { flex-direction: row; gap: clamp(12px, 1.6vw, 20px); flex-wrap: wrap; padding-inline: 0; }
.em-beneficios .em-beneficio { flex: 1 1 200px; border: 1px solid rgba(183, 110, 121, .35); border-radius: 6px; padding: clamp(18px, 2.4vw, 28px) 16px; text-align: center; transition: border-color .25s ease, box-shadow .25s ease; }
.em-beneficios .em-beneficio:hover { border-color: rgba(140, 74, 85, .6); box-shadow: 0 10px 24px rgba(140, 74, 85, .12); }
.em-beneficios .em-beneficio .elementor-image-box-img { margin-bottom: 12px; }
.em-beneficios .em-beneficio .elementor-image-box-img img { width: 46px; height: 46px; object-fit: contain; }
.em-beneficios .em-beneficio .elementor-image-box-title { font-family: "Jost", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0A0708; margin: 0 0 6px; }
.em-beneficios .em-beneficio .elementor-image-box-description { font-family: "Jost", sans-serif; font-size: 12px; line-height: 1.5; color: #8A7274; }

/* ---------- 06 · destaques ---------- */
.em-home.em-destaques { position: relative; padding: clamp(64px, 9vw, 160px) 24px; background-image: linear-gradient(rgba(0, 0, 0, .78), rgba(10, 7, 8, .88)), url("https://coisasdetrancista.com/wp-content/uploads/2026/08/shampoo-braids-2em1.jpeg"); background-size: cover; background-position: center; background-attachment: fixed; }
.em-destaques .em-destaques-wrap { flex-direction: row; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-inline: 0; }
.em-destaques .em-destaques-left { flex: 1 1 300px; min-width: 280px; width: auto; position: sticky; top: 110px; gap: 28px; }
.em-destaques .em-destaques-title h2 { font-family: "Cormorant Garamond", serif; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.15; margin: 0; letter-spacing: .06em; font-weight: 600; color: #FFFFFF; text-transform: uppercase; }
.em-destaques .em-destaques-title em { font-family: "Cormorant Garamond", serif; font-style: italic; text-transform: none; font-weight: 400; }
.em-destaques .em-feat-nav { gap: 10px; align-items: flex-start; width: auto; padding: 0; }
.em-destaques .em-feat-nav-item { width: auto; cursor: pointer; }
.em-destaques .em-feat-nav-item p { background: rgba(0, 0, 0, .25); backdrop-filter: blur(8px); color: rgba(255, 255, 255, .4); font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 99px; transition: color .3s ease; }
.em-destaques .em-feat-nav-item.is-active p { color: #FFFFFF; }
.em-destaques .em-destaques-cta { gap: 14px; align-items: flex-start; width: auto; padding: 0; }
.em-destaques .em-destaques-note p { color: rgba(255, 255, 255, .75); font-size: 14px; }
.em-destaques .em-destaques-right { flex: 2 1 420px; min-width: 300px; width: auto; gap: 36px; }
.em-destaques .em-feat-card { background: rgba(0, 0, 0, .22); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 26px; padding: clamp(22px, 3vw, 40px); gap: 18px; }
.em-destaques .em-feat-kicker p { font-family: "Cormorant Garamond", serif; font-size: 15px; letter-spacing: .14em; color: #E8B4B8; text-transform: uppercase; }
.em-destaques .em-feat-title h3 { color: #FFFFFF; font-size: clamp(19px, 2vw, 24px); font-weight: 600; margin: 0; font-family: "Jost", sans-serif; }
.em-destaques .em-feat-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; }
.em-destaques .em-feat-desc p { color: rgba(255, 255, 255, .62); font-size: 15px; font-weight: 500; line-height: 1.6; }

/* A seção "Todos os produtos" (.em-capilar) saiu da Home em 2026-09-15: o
   site de referência tem só duas grades, e o catálogo completo vive em
   /loja/, que já está no menu do cabeçalho. */

/* ---------- 08 · newsletter ---------- */
.em-home.em-newsletter { background: #0A0708; padding: clamp(36px, 5vw, 56px) 24px; border-top: 1px solid rgba(232, 180, 184, .18); }
.em-newsletter .em-newsletter-wrap { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-inline: 0; }
.em-newsletter .em-newsletter-copy { width: auto; flex: 1 1 320px; gap: 8px; }
.em-newsletter .em-newsletter-title h4 { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #E8B4B8; margin: 0; font-family: "Jost", sans-serif; }
.em-newsletter .em-newsletter-sub p { color: #8A7274; font-size: 13px; }
.em-newsletter .em-newsletter-form-col { width: auto; flex: 0 1 380px; }
.em-newsletter .em-newsletter-form { display: flex; gap: 8px; }
.em-newsletter .em-newsletter-form input { flex: 1; background: #0A0708; border: 1px solid #8C4A55; border-radius: 99px; padding: 11px 16px; color: #F6E7E9; font-family: "Jost", sans-serif; font-size: 13px; }
.em-newsletter .em-newsletter-form input::placeholder { color: #8A7274; }
.em-newsletter .em-newsletter-form button { background: linear-gradient(100deg, #8C4A55, #E8B4B8 55%, #B76E79); color: #0A0708; border: 0; font-weight: 700; font-size: 13px; padding: 11px 18px; border-radius: 99px; cursor: pointer; transition: background .2s ease; }
.em-newsletter .em-newsletter-form button:hover { background: linear-gradient(100deg, #B76E79, #F7D9DB 55%, #E8B4B8); }

/* ---------- 09 · footer ---------- */
.em-home.em-footer { background: #0A0708; border-top: 1px solid rgba(232, 180, 184, .18); padding: clamp(40px, 6vw, 72px) 24px 32px; }
.em-footer .em-footer-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px; padding-inline: 0; }
.em-footer .em-footer-logo div { font-family: "Cormorant Garamond", serif; font-size: 24px; background: linear-gradient(100deg, #E8B4B8, #F7D9DB, #B76E79); -webkit-background-clip: text; background-clip: text; color: transparent; }
.em-footer .em-footer-about p { color: #8A7274; font-size: 14px; line-height: 1.6; margin-top: 14px; }
.em-footer .em-footer-col-title h4 { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #E8B4B8; margin: 0 0 14px; font-family: "Jost", sans-serif; }
/* 4ª coluna (2026-09-15): formas de pagamento, selo SSL e redes sociais */
.em-footer .em-footer-col--pagamento { gap: 0; }
.em-footer .em-footer-col-title--redes h4 { margin-top: 26px; }
.em-footer .em-footer-pagamentos img { max-width: 230px; width: 100%; height: auto; display: block; }
.em-footer .em-footer-ssl { margin-top: 12px; }
.em-footer .em-footer-ssl img { max-width: 120px; width: 100%; height: auto; display: block; }
.em-footer .em-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.em-footer .em-footer-links a { color: #F6E7E9; font-size: 14px; text-decoration: none; }
.em-footer .em-footer-links a:hover { color: #E8B4B8; }
.em-footer .em-footer-divider .elementor-divider-separator { border-top: 1px solid #8C4A55; margin-top: 40px; }
.em-footer .em-footer-divider .elementor-divider__text { display: none; }
.em-footer .em-footer-copy p { color: #8A7274; font-size: 12px; padding-top: 20px; max-width: 1280px; margin-inline: auto; }

/* ---------- revelação no scroll (classes aplicadas pelo elementor-interactions.js) ---------- */
/* 2026-09-15: fade puro, sem deslocamento — é o comportamento do site de
   referência (Elementor `fadeIn`). O JS que aplica .is-visible não mudou. */
.em-home .em-reveal { opacity: 0; transform: none; transition: opacity 1s ease; }
.em-home .em-reveal--left,
.em-home .em-reveal--right { transform: none; }
.em-home .em-reveal.is-visible { opacity: 1; transform: none; }
/* fallback: sem JS o conteúdo permanece visível */
.em-home.no-js .em-reveal { opacity: 1; transform: none; }

/* ---------- TABLET (<= 1024px) ---------- */
@media (max-width: 1024px) {
  /* tablet: o menu desce para a 2ª linha e as ações ficam sozinhas na 1ª */
  .em-header .em-header-wrap { padding: 12px 20px; }
  .em-header .em-header-nav { order: 3; flex: 1 1 100%; width: 100%; flex-wrap: wrap; justify-content: center; gap: 4px; }
  .em-header .em-header-actions { flex: 1 1 100%; }
  .em-header .em-search { flex: 1 1 auto; max-width: 340px; }
  .em-home.em-hero { height: 92vh; min-height: 520px; }
  .em-hero .em-hero-slide { padding-bottom: 96px; }
  .em-destaques .em-destaques-left { position: static; top: auto; flex: 1 1 100%; }
  .em-destaques .em-feat-nav { flex-direction: row; flex-wrap: wrap; }
  .em-destaques .em-destaques-right { flex: 1 1 100%; }
  .em-home.em-destaques { background-attachment: scroll; }
  .em-home .em-secao-grade ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .em-categorias .em-categorias-row { justify-content: space-between; gap: 16px; }
  .em-categorias .em-categoria-item { flex: 1 1 140px; }
}

/* ---------- MOBILE (<= 767px) ---------- */
@media (max-width: 767px) {
  .em-aviso .em-aviso-text p { font-size: 11px; letter-spacing: .1em; }
  /* celular: busca ocupa o espaço que sobra e os 3 ícones ficam só com o
     desenho (o rótulo sai), para os quatro caberem numa linha de 400px */
  .em-header .em-header-wrap { padding: 10px 14px; gap: 10px; }
  .em-header .em-actions { gap: 4px; width: 100%; }
  .em-header .em-search { flex: 1 1 auto; max-width: none; padding: 7px 12px; }
  .em-header .em-search input[type="search"] { font-size: 16px; } /* 16px evita o zoom automático do iOS ao focar */
  .em-header .em-action { padding: 6px 5px; gap: 0; }
  .em-header .em-action-label { display: none; }
  .em-header .em-action svg { width: 22px; height: 22px; }
  .em-header .em-nav-link .elementor-button { font-size: 13px; padding: 7px 9px; }
  .em-home.em-hero { height: auto; min-height: 0; padding: 96px 0 40px; margin-bottom: -25px; }
  .em-hero .em-hero-carousel { position: relative; inset: auto; min-height: 62vh; }
  .em-hero .em-hero-slide { padding-bottom: 96px; }
  .em-hero .em-hero-cta-row { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; border-radius: 18px; width: 100%; }
  .em-hero .em-hero-cta-note p { white-space: normal; text-align: center; }
  .em-hero .em-hero-cta-btn .elementor-button { width: 100%; justify-content: center; min-height: 48px; }
  .em-hero .em-hero-controls { bottom: 20px; }
  .em-hero .em-hero-prev .elementor-icon,
  .em-hero .em-hero-next .elementor-icon { width: 44px; height: 44px; }
  .em-hero .em-hero-dot { width: 10px; height: 10px; }
  .em-hero .em-hero-dot.is-active { width: 28px; }
  .em-home .em-secao-grade ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* no celular o título quebra em 2 linhas: as linhas laterais atravessariam
     o texto, então saem e fica só o título centralizado */
  .em-home .em-secao-titulo h2 { display: block; font-size: 22px; }
  .em-home .em-secao-titulo h2::before,
  .em-home .em-secao-titulo h2::after { display: none; }
  .em-home .em-product-cards ul.products li.product a img { height: 150px; }
  .em-home .em-product-cards ul.products li.product .woocommerce-loop-product__title { font-size: 13px; min-height: 32px; }
  .em-home .em-btn-dark .elementor-button,
  .em-home .em-btn-gold .elementor-button { width: 100%; justify-content: center; min-height: 48px; }
  /* categorias: os 3 círculos cabem numa linha no celular */
  .em-categorias .em-categorias-row { flex-wrap: nowrap; gap: 10px; }
  .em-categorias .em-categoria-item { flex: 1 1 0; min-width: 0; }
  .em-categorias .em-categoria-img img { width: 88px; height: 88px; }
  .em-categorias .em-categoria-nome h3 { font-size: 12px; }
  .em-banner-duplo .em-banner-duplo-wrap { flex-direction: column; }
  .em-beneficios .em-beneficios-wrap { gap: 10px; }
  .em-beneficios .em-beneficio { flex: 1 1 calc(50% - 10px); padding: 16px 10px; }
  .em-beneficios .em-beneficio .elementor-image-box-img img { width: 36px; height: 36px; }
  .em-beneficios .em-beneficio .elementor-image-box-title { font-size: 11px; }
  .em-beneficios .em-beneficio .elementor-image-box-description { font-size: 11px; }
  .em-home.em-destaques { padding: 56px 16px; }
  .em-destaques .em-destaques-wrap { gap: 28px; }
  .em-destaques .em-feat-card { border-radius: 20px; }
  .em-newsletter .em-newsletter-form-col { flex: 1 1 100%; }
  .em-newsletter .em-newsletter-form { flex-direction: column; }
  .em-newsletter .em-newsletter-form button { min-height: 48px; }
  .em-footer .em-footer-wrap { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- acessibilidade: movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .em-home .em-ken-burns,
  .em-home .em-marquee-track,
  .em-home .em-logo-word div { animation: none !important; }
  .em-home .em-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .em-home .em-hero-slide,
  .em-home .em-hero-slide-inner,
  .em-home .em-product-cards ul.products li.product,
  .em-home .em-hero-cta-btn .elementor-button { transition: none !important; }
  .em-home .em-magic-canvas-wrap { display: none; }
}


/* ---------- banner editável (background do container, sem widget) ---------- */
/* base comum aos dois containers (desktop 8f3a1c2 e mobile/tablet 0988060) */
.em-home.em-hero-banner { width: 100%; overflow: hidden; padding: 0; margin: 0; }
/* desktop: imagens 1920x700 */
.elementor-element-8f3a1c2.em-hero-banner { aspect-ratio: 1920 / 700; }
@media (min-width: 1920px) {
  .elementor-element-8f3a1c2.em-hero-banner { max-height: 700px; }
}
/* mobile/tablet: imagens 1080x1350 (retrato) */
.elementor-element-0988060.em-hero-banner { aspect-ratio: 1080 / 1350; }

/* ---------- fundo claro (2026-09-14) ----------
   A cor de texto base de .em-home passou a ser escura (para o fundo branco).
   As seções que continuam escuras declaram a cor clara explicitamente, senão
   herdariam texto escuro sobre fundo escuro. Só cor — nada de estrutura. */
/* 2026-09-15: a seção Ofertas (grade 2) passou a ter fundo branco, como as
   demais seções do miolo no site de referência — saiu desta lista. */
.em-home.em-header,
.em-home.em-hero,
.em-home.em-destaques,
.em-home.em-newsletter,
.em-home.em-footer { color: #F6E7E9; }