/* ==========================================================================
   MARCELA CAMILLO AROMAS — CSS v3 (Editar CSS)
   Replica o mockup "homeIdeal1" sobre a estrutura real do tema.
   Substitui TODO o conteúdo anterior do Editar CSS.
   Pareado com o JS v3 (Incluir código HTML).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

:root {
  --preto: #292929;
  --dourado: #C69E60;
  --nude: #CCBAA3;
  --bege: #DFD6C7;
  --offwhite: #F3F0EB;
  --branco: #FFFFFF;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', sans-serif;
}

/* --------------------------------------------------------------------------
   0. BASE + LARGURA DAS SEÇÕES (1280px como no mockup)
   -------------------------------------------------------------------------- */
body { font-family: var(--sans) !important; font-weight: 300; color: var(--preto); }

.conteiner, .container {
  max-width: 1280px !important;
  width: auto !important;
  padding-left: 40px;
  padding-right: 40px;
}

/* --------------------------------------------------------------------------
   1. CABEÇALHO
   -------------------------------------------------------------------------- */
#cabecalho, header { background: var(--branco); border-bottom: 1px solid var(--bege); }
.logo.cor-secundaria, h1.logo { font-family: var(--serif) !important; }
.menu.superior .nivel-um > li > a {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--preto);
}
.menu.superior .nivel-um > li > a:hover,
.menu.superior .nivel-um > li > a:hover strong { color: var(--dourado) !important; }

.search-desktop-container input, #search-form input {
  background: var(--offwhite) !important; border: 1px solid var(--bege) !important;
  border-radius: 999px !important; font-family: var(--sans); font-size: 11px;
  padding: 9px 16px 9px 34px !important;
}
.search-desktop-container input:focus, #search-form input:focus {
  border-color: var(--dourado) !important; background: var(--branco) !important;
}

/* --------------------------------------------------------------------------
   2. BANNERS (hero em grid 2 colunas — igual estrutura da .mca-about:
      esquerda = imagem(ns) cadastrada(s) no painel [flexslider nativo,
      já roda slideshow sozinho se houver mais de 1 imagem]; direita =
      conteúdo estático injetado via JS, classe .mca-hero-content)
   -------------------------------------------------------------------------- */
.secao-banners { background: var(--offwhite); }
.secao-banners .conteiner { padding-top: 0; padding-bottom: 0; }

@media (min-width: 768px) {
  .secao-banners > .conteiner,
  .secao-banners .conteiner {
    max-width: 100% !important; width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .secao-banners .mca-hero-inner {
    display: grid !important; grid-template-columns: 1fr 1fr; align-items: stretch;
    width: 100% !important; margin: 0 !important; max-width: 100% !important;
  }
  .secao-banners .mca-hero-img {
    width: 100% !important; margin: 0 !important; max-width: 100% !important;
    background: var(--bege); min-height: 480px; overflow: hidden; position: relative;
  }
  .secao-banners .mca-hero-img .flexslider,
  .secao-banners .mca-hero-img .slides {
    width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
    position: relative;
  }
  .secao-banners .mca-hero-content {
    padding: 80px 60px; display: flex; flex-direction: column; justify-content: center;
  }
}

/* O container .row-fluid é do Bootstrap antigo do tema e injeta um clearfix
   (::before/::after com display:table). Em display:grid, esses pseudo-elementos
   passam a contar como itens do grid e criam "caixas" vazias — anulamos aqui. */
.secao-banners .mca-hero-inner::before,
.secao-banners .mca-hero-inner::after {
  content: none !important; display: none !important;
}

/* Carrossel manual das imagens do banner (crossfade), independente do plugin
   nativo do flexslider — garante que TODAS as imagens cadastradas apareçam e
   alternem entre si, mesmo se o plugin da Loja Integrada não inicializar. */
.secao-banners .mca-hero-img .slides li {
  position: absolute !important; top: 0; left: 0;
  width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
  opacity: 0; z-index: 1; transition: opacity 1.2s ease;
}
.secao-banners .mca-hero-img .slides li.mca-slide-active { opacity: 1; z-index: 2; }
.secao-banners .mca-hero-img img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block;
}

/* Esconde setas/paginação do flexslider do hero — troca automática entre as
   imagens cadastradas, sem controles visíveis (igual estética das outras seções) */
.secao-banners .flex-direction-nav,
.secao-banners .flex-control-nav { display: none !important; }

.mca-hero-eyebrow { font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--dourado); margin-bottom: 12px; }
.mca-hero-title { font-family: var(--serif); font-size: 40px; font-weight: 300; line-height: 1.15; margin-bottom: 24px; color: var(--preto); }
.mca-hero-title em { font-style: italic; color: var(--dourado); }
.mca-hero-text { font-size: 14px; color: #666; line-height: 1.9; margin-bottom: 32px; }
.mca-hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
.mca-hero-btn {
  display: inline-block; background: var(--preto); color: var(--branco); text-decoration: none;
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; padding: 16px 40px;
  width: fit-content; transition: background 0.25s;
}
.mca-hero-btn:hover { background: var(--dourado); }
.mca-hero-btn-outline {
  display: inline-block; background: transparent; color: var(--preto); text-decoration: none;
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; padding: 16px 40px;
  width: fit-content; border: 1px solid var(--preto); transition: all 0.25s;
}
.mca-hero-btn-outline:hover { background: var(--preto); color: var(--branco); }

@media (max-width: 767px) {
  .secao-banners .mca-hero-inner { display: block; }
  .secao-banners .mca-hero-img { min-height: 320px; }
  .secao-banners .mca-hero-content { padding: 32px 20px; }
  .mca-hero-title { font-size: 28px; }
}

/* --------------------------------------------------------------------------
   3. MINI BANNERS → cards de categoria (estilo "Nossas Categorias")
      Estrutura real: .mini-banner .modulo.span4 > .flexslider > ul.slides > li > img[alt] + label
   -------------------------------------------------------------------------- */
.row-fluid.banner.mini-banner {
  max-width: 1280px; margin: 0 auto; padding: 60px 40px;
  display: flex; gap: 24px; background: var(--branco);
}
.row-fluid.banner.mini-banner .modulo {
  position: relative; overflow: hidden; border-radius: 0 !important;
  margin: 0 !important; width: auto !important; flex: 1;
  transition: transform 0.3s ease;
}
.row-fluid.banner.mini-banner .modulo:hover { transform: translateY(-4px); }
/* Trava toda a cadeia flexslider na proporção 3/4 */
.row-fluid.banner.mini-banner .modulo .flexslider,
.row-fluid.banner.mini-banner .modulo .slides,
.row-fluid.banner.mini-banner .modulo .slides li {
  height: 100% !important; margin: 0 !important; padding: 0 !important;
  border: none !important; background: transparent !important; list-style: none !important;
}
.row-fluid.banner.mini-banner .modulo {
  aspect-ratio: 3/4;
}
.row-fluid.banner.mini-banner .modulo .slides li {
  position: relative !important;
}
.row-fluid.banner.mini-banner .modulo img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  display: block; transition: transform 0.5s ease;
}
.row-fluid.banner.mini-banner .modulo:hover img { transform: scale(1.05); }
/* Gradiente só na base */
.row-fluid.banner.mini-banner .modulo .slides li::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(to top, rgba(41,41,41,0.78), rgba(41,41,41,0));
  pointer-events: none; z-index: 1;
}
/* O texto vem num <label> */
.row-fluid.banner.mini-banner .modulo label {
  position: absolute; left: 28px; bottom: 28px; z-index: 2; margin: 0; cursor: pointer;
  font-family: var(--serif) !important; font-size: 28px !important; font-weight: 300 !important;
  color: var(--branco) !important; letter-spacing: 0.05em; text-transform: none !important;
}
/* Esconde setas e paginação do flexslider */
.row-fluid.banner.mini-banner .flex-direction-nav,
.row-fluid.banner.mini-banner .flex-control-nav { display: none !important; }

/* --------------------------------------------------------------------------
   4. TÍTULOS DE VITRINE (Lançamentos / Mais Vendidos / Destaques)
   -------------------------------------------------------------------------- */
.titulo-categoria {
  text-align: center !important; border: none !important;
  font-family: var(--serif) !important; font-size: 36px !important; font-weight: 300 !important;
  color: var(--preto) !important; margin: 0 0 48px !important; letter-spacing: 0.02em;
}
.titulo-categoria::before, .titulo-categoria::after { display: none !important; }

/* --------------------------------------------------------------------------
   5. CARDS DE PRODUTO
   -------------------------------------------------------------------------- */
.listagem-item { height: auto !important; padding: 0 12px 40px; border: none !important; }
.listagem-item .imagem-produto {
  height: auto !important; aspect-ratio: 3/4; background: var(--offwhite);
  overflow: hidden; margin-bottom: 20px; display: flex; align-items: center; justify-content: center;
  border-radius: 0 !important;
}
.listagem-item .imagem-produto img { border-radius: 0 !important; }
.listagem-item:hover .imagem-produto { background: var(--bege); }
.listagem-item .imagem-produto img {
  width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply;
}
.listagem-item .nome-produto {
  font-family: var(--serif) !important; font-size: 20px !important; font-weight: 400 !important;
  color: var(--preto) !important; text-decoration: none; line-height: 1.3; display: block;
}
.listagem-item .preco-produto .preco-promocional,
.listagem-item .preco-promocional.cor-principal {
  font-family: var(--serif) !important; font-size: 20px !important; color: var(--preto) !important;
}
.listagem-item .preco-produto .preco-de { color: var(--nude) !important; font-size: 13px; }

/* Coração da wishlist */
.listagem-item .add-wishlist {
  background: rgba(255,255,255,0.85); width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; z-index: 3;
}
.listagem-item .add-wishlist i { color: var(--preto); }
.listagem-item .add-wishlist:hover i { color: var(--dourado); }

/* Badge "produto adicionado" — esconder (é estado de sessão, não design) */
.bandeiras-produto .adicionado-carrinho { display: none !important; }

/* --------------------------------------------------------------------------
   6. BOTÕES
   -------------------------------------------------------------------------- */
.botao.principal, button.principal, .btn-primary {
  background: var(--preto) !important; border: none !important; border-radius: 0 !important;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  padding: 16px 40px; transition: background 0.25s;
}
.botao.principal:hover, button.principal:hover, .btn-primary:hover { background: var(--dourado) !important; }

/* --------------------------------------------------------------------------
   7. NEWSLETTER — espelha .newsletter-section do mockup ideal
   -------------------------------------------------------------------------- */
#barraNewsletter {
  background: var(--preto) !important; padding: 80px 40px; text-align: center;
  width: 100vw; max-width: 100vw; position: relative;
  left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
  border-radius: 0 !important; box-sizing: border-box;
}
/* Todos os wrappers internos: fundo transparente, sem borda, largura livre */
#barraNewsletter .conteiner,
#barraNewsletter .row-fluid,
#barraNewsletter .span,
#barraNewsletter .componente.newsletter,
#barraNewsletter .componente.newsletter.borda-principal,
#barraNewsletter .interno,
#barraNewsletter .interno-conteudo {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
  text-align: center;
}
/* Título nativo do tema fica escondido — usamos o cabeçalho injetado */
#barraNewsletter .componente.newsletter > .interno > .titulo,
#barraNewsletter .titulo.cor-secundaria { display: none !important; }
#barraNewsletter .texto-newsletter { display: none !important; }

/* Cabeçalho injetado (label + título + descrição) */
.mca-nl-head { text-align: center; }
.mca-nl-eyebrow {
  text-align: center; font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--dourado); margin-bottom: 8px; font-weight: 400; font-family: var(--sans);
}
.mca-nl-title {
  font-family: var(--serif); font-size: 44px; font-weight: 300;
  color: var(--branco); margin-bottom: 14px; line-height: 1.15;
}
.mca-nl-desc {
  font-size: 14px; color: rgba(255,255,255,0.5); margin-bottom: 40px;
  font-weight: 300; font-family: var(--sans);
}

/* Formulário — flex, 480px, input + botão colados
   (vem depois da regra genérica de wrappers, que forçaria display:block) */
#barraNewsletter .input-conteiner,
#barraNewsletter .newsletter-cadastro.input-conteiner {
  display: flex !important; gap: 0; max-width: 480px !important; margin: 0 auto !important;
  width: 100% !important; float: none !important; background: transparent !important;
}
#barraNewsletter .input-conteiner input {
  flex: 1; min-width: 0; background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.15) !important; border-right: none !important;
  border-radius: 0 !important; padding: 16px 20px; color: var(--branco) !important;
  font-family: var(--sans); font-size: 13px; font-weight: 300; outline: none;
  height: auto !important; margin: 0 !important; box-shadow: none !important;
}
#barraNewsletter .input-conteiner input::placeholder { color: rgba(255,255,255,0.3); }
#barraNewsletter .input-conteiner .botao-input,
#barraNewsletter .input-conteiner button,
#barraNewsletter .botao-input.fundo-principal {
  background: var(--dourado) !important; border: 1px solid var(--dourado) !important;
  color: var(--branco) !important; padding: 16px 32px; font-family: var(--sans);
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; cursor: pointer;
  font-weight: 400; border-radius: 0 !important; transition: background 0.2s;
  width: auto !important; flex-shrink: 0; height: auto !important; margin: 0 !important;
  text-indent: 0 !important;
}
/* Esconde o ícone chevron nativo do botão (usamos texto) */
#barraNewsletter .botao-input.icon-chevron-right::before { display: none !important; content: none !important; }
#barraNewsletter .input-conteiner .botao-input:hover,
#barraNewsletter .input-conteiner button:hover { background: #b08a4e !important; }

/* --------------------------------------------------------------------------
   8. RODAPÉ
   -------------------------------------------------------------------------- */
#rodape .institucional { background: var(--preto) !important; padding: 56px 0 24px; }
#rodape .titulo, #rodape h3, #rodape .institucional .titulo {
  color: var(--dourado) !important; font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; font-family: var(--sans); opacity: 1 !important;
}
#rodape p, #rodape span, #rodape li { color: rgba(255,255,255,0.6) !important; }
#rodape a { color: var(--offwhite) !important; font-family: var(--sans); font-size: 13px; }
#rodape a:hover { color: var(--dourado) !important; }
#rodape .pagamento-selos { background: var(--preto) !important; border-top: 1px solid #444; }
#rodape .selos .titulo { color: var(--dourado) !important; }

/* --------------------------------------------------------------------------
   9. BLOCOS INJETADOS VIA JS
   -------------------------------------------------------------------------- */
.mca-topbar {
  background: var(--preto); color: var(--offwhite); overflow: hidden; white-space: nowrap;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.08em; padding: 8px 0;
}
.mca-topbar-track { display: inline-block; padding-left: 100%; animation: mca-scroll 28s linear infinite; }
.mca-topbar-track span { margin: 0 18px; color: var(--dourado); }
.mca-topbar-track span:nth-child(odd) { color: var(--offwhite); }
@keyframes mca-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Categorias rápidas — espelha .quick-cats / .qc-* do mockup ideal */
.mca-quick-cats { max-width: 1280px; margin: 0 auto; padding: 56px 40px 8px; background: var(--branco); }
.mca-quick-inner { display: flex; gap: 44px; justify-content: center; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.mca-quick-inner::-webkit-scrollbar { display: none; }
.mca-quick-cat { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; color: var(--preto); flex-shrink: 0; transition: transform 0.2s; }
.mca-quick-cat:hover { transform: translateY(-3px); }
.mca-quick-icon { width: 78px; height: 78px; border-radius: 50%; background: var(--offwhite); border: 1px solid var(--bege); display: flex; align-items: center; justify-content: center; transition: background 0.25s, border-color 0.25s; }
.mca-quick-icon svg { width: 28px; height: 28px; stroke: var(--preto); fill: none; stroke-width: 1.3; transition: stroke 0.25s; }
.mca-quick-cat:hover .mca-quick-icon { background: var(--dourado); border-color: var(--dourado); }
.mca-quick-cat:hover .mca-quick-icon svg { stroke: var(--branco); }
.mca-quick-icon.mca-active { background: var(--preto); border-color: var(--preto); }
.mca-quick-icon.mca-active svg { stroke: var(--dourado); }
.mca-quick-cat span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; text-align: center; max-width: 92px; line-height: 1.5; font-family: var(--sans); }

/* Tarja de valores — espelha o .brand-divider do mockup ideal */
.mca-value-strip {
  background: var(--preto); padding: 20px 40px;
  display: flex; align-items: center; justify-content: center;
  gap: 48px; flex-wrap: wrap;
}
.mca-value-item { display: flex; align-items: center; gap: 12px; color: var(--offwhite); }
.mca-value-item svg { width: 18px; stroke: var(--dourado); fill: none; stroke-width: 1.5; }
.mca-value-item span {
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 300; font-family: var(--sans);
}
.mca-value-sep { width: 1px; height: 26px; background: rgba(255,255,255,0.15); }

/* Seção "Nossa História" injetada — faixa full-width, conteúdo centralizado 1280px */
.mca-about {
  background: var(--offwhite);
  width: 100vw; max-width: 100vw; position: relative;
  left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
}
.mca-about-inner {
  max-width: 1920px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
}
.mca-about-img { background: var(--bege); min-height: 480px; overflow: hidden; }
.mca-about-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mca-about-content { padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; }
.mca-about-eyebrow { font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--dourado); margin-bottom: 12px; }
.mca-about-title { font-family: var(--serif); font-size: 40px; font-weight: 300; line-height: 1.15; margin-bottom: 24px; color: var(--preto); }
.mca-about-title em { font-style: italic; color: var(--dourado); }
.mca-about-text { font-size: 14px; color: #666; line-height: 1.9; margin-bottom: 32px; }
.mca-about-btn { display: inline-block; background: var(--preto); color: var(--branco); text-decoration: none; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; padding: 16px 40px; width: fit-content; transition: background 0.25s; }
.mca-about-btn:hover { background: var(--dourado); }

/* --------------------------------------------------------------------------
   10. REFORÇO ANTI-BORDA-ARREDONDADA (vence qualquer CSS antigo)
   -------------------------------------------------------------------------- */
.listagem-item,
.listagem-item .imagem-produto,
.listagem-item .imagem-produto img,
.row-fluid.banner.mini-banner .modulo,
.secao-banners .mca-hero-img,
.secao-banners .mca-hero-img img,
#barraNewsletter,
#barraNewsletter .componente.newsletter,
#barraNewsletter .interno {
  border-radius: 0 !important;
}

@media (max-width: 767px) {
  .row-fluid.banner.mini-banner { flex-direction: column; }
  .mca-about-inner { grid-template-columns: 1fr; }
  .mca-value-strip { flex-direction: column; gap: 16px; padding: 24px 20px; text-align: center; }
  .mca-value-sep { width: 40px; height: 1px; }
  #barraNewsletter { padding: 40px 20px; }
  .mca-nl-title { font-size: 32px; }
  #barraNewsletter .input-conteiner { flex-direction: column !important; }
  #barraNewsletter .input-conteiner input {
    border-right: 1px solid rgba(255,255,255,0.15) !important; border-bottom: none !important;
  }
}