/*
Theme Name:   Mari.C (Astra Child)
Template:     astra
Version:      0.10.2
Text Domain:  maric
Description:  Tema filho da Mari.C. Traduz os shortcodes herdados do UX Builder
              (Flatsome) em HTML semantico e carrega a identidade da loja.
*/

/* =========================================================================
   1. TOKENS — mude a cor AQUI e ela muda no site inteiro.
   Valores tirados por amostragem de pixel dos prints do site antigo
   (referencia-layout/prints-site-antigo/desktop/1-principais/home.png).
   ========================================================================= */
:root{
  /* Marca */
  --mc-lilas:            #dbd6ff;  /* barra de topo e faixa do menu */
  --mc-lilas-escuro:     #cfc7ff;  /* hover e bordas sobre o lilas */
  --mc-lilas-claro:      #ece9ff;
  --mc-rosa:             #fef0fd;  /* fundo do cabecalho */
  --mc-malva:            #dcc6e0;  /* faixa de aviso */
  --mc-azul:             #003f88;  /* titulos e links de destaque */
  --mc-azul-claro:       #f0f9ff;

  /* Neutros */
  --mc-texto:            #333333;
  --mc-texto-suave:      #666666;
  --mc-fundo:            #ffffff;
  --mc-borda:            rgba(0,0,0,.10);

  /* Estado */
  --mc-preco:            #c0392b;
  --mc-promo:            #2e7d32;
  --mc-esgotado:         #9e9e9e;

  /* Tipografia — o site antigo usava Roboto */
  --mc-fonte:            Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mc-fonte-titulo:     var(--mc-fonte);
  --mc-peso-titulo:      700;

  /* Medidas */
  --mc-largura:          1200px;
  --mc-gap:              1.5rem;
  --mc-raio:             6px;
  --mc-leitura:          68ch;
}

@media (prefers-color-scheme: dark){
  /* A loja e clara por definicao de marca. Mantemos o claro no escuro
     tambem, para nao inverter as cores dos produtos. */
  :root:not([data-theme="light"]){ color-scheme: light; }
}

body{ font-family: var(--mc-fonte); color: var(--mc-texto); background: var(--mc-fundo); }
h1,h2,h3,h4,h5,h6{ font-family: var(--mc-fonte-titulo); font-weight: var(--mc-peso-titulo); }

/* =========================================================================
   2. BARRA DE TOPO
   ========================================================================= */
.mc-topbar{
  background: var(--mc-lilas);
  color: var(--mc-azul);
  font-size:.8125rem;
  line-height:1.4;
}
.mc-topbar__interno{
  max-width: var(--mc-largura);
  margin-inline:auto;
  padding:.4rem 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.mc-topbar__zap{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:700;
  background: var(--mc-fundo);
  color: var(--mc-azul);
  border:1px solid var(--mc-azul);
  border-radius:999px;
  padding:.2rem .8rem;
  text-decoration:none;
  white-space:nowrap;
}
.mc-topbar__zap:hover{ background: var(--mc-lilas-claro); }
.mc-topbar__aviso{ color: var(--mc-texto-suave); text-align:center; flex:1 1 auto; }
@media (max-width:767px){
  .mc-topbar__aviso{ display:none; }
  .mc-topbar__interno{ justify-content:center; }
}

/* =========================================================================
   3. CABECALHO
   ========================================================================= */
.site-header, .ast-primary-header-bar{ background: var(--mc-rosa) !important; }
.ast-primary-header-bar{ border-bottom:0 !important; }
.site-logo-img img{ max-height:96px; width:auto; }

/* Faixa do menu principal — o fundo vai no invólucro, para ir de ponta a
   ponta; no elemento do menu ele pararia na largura do conteúdo. */
.ast-below-header-bar,
.ast-below-header-wrap,
.site-below-header-wrap{ background: var(--mc-lilas) !important; }
.main-header-menu, .ast-desktop .main-header-menu{ background: transparent; }
.main-header-menu > .menu-item > .menu-link{
  color: var(--mc-azul) !important;
  font-weight:600;
  text-transform:uppercase;
  font-size:.8125rem;
  letter-spacing:.02em;
}
.main-header-menu > .menu-item > .menu-link:hover{ background: var(--mc-lilas-escuro); }
.ast-header-account-wrap svg, .ast-header-woo-cart svg{ fill: var(--mc-azul); }

/* Faixa de aviso da loja */
.mc-aviso-loja{
  background: var(--mc-malva);
  color: var(--mc-azul);
  text-align:center;
  padding:.5rem 16px;
  font-size:.875rem;
  font-weight:600;
}

/* =========================================================================
   4. RODAPE
   ========================================================================= */
.mc-rodape{ background: var(--mc-lilas); color: var(--mc-azul); padding:2.5rem 0 0; }
.mc-rodape__colunas{
  max-width: var(--mc-largura);
  margin-inline:auto;
  padding-inline:16px;
  display:grid;
  gap: var(--mc-gap);
  grid-template-columns:1fr;
}
@media (min-width:768px){ .mc-rodape__colunas{ grid-template-columns:repeat(4,1fr); } }
.mc-rodape__titulo{
  font-size:.9375rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-block:0 .75rem;
}
.mc-rodape ul{ list-style:none; margin:0; padding:0; }
.mc-rodape li{ margin-block:.4rem; }
.mc-rodape a{ color: var(--mc-azul); text-decoration:none; }
.mc-rodape a:hover{ text-decoration:underline; }
/* Os itens de menu da loja ja trazem o coracao no proprio texto — nao adicionamos outro aqui, senao sai dobrado. */
.mc-rodape__contato p{ margin-block:.4rem; display:flex; gap:.4rem; align-items:baseline; }
.mc-rodape__contato p::before{ content:"\2665"; }

.mc-rodape__pagamentos{
  max-width: var(--mc-largura);
  margin:2rem auto 0;
  padding:1.25rem 16px;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.mc-rodape__pagamentos img{ max-height:86px; width:auto; }
.mc-rodape__selo{ font-size:.8125rem; font-weight:700; }

.mc-rodape__base{
  background: var(--mc-lilas-escuro);
  text-align:center;
  padding:1rem 16px;
  font-size:.8125rem;
  margin-top:1rem;
}

/* =========================================================================
   5. CARDS DE PRODUTO (catalogo)
   ========================================================================= */
.woocommerce ul.products li.product,
.wc-block-grid__product{
  background: var(--mc-fundo);
  border:1px solid var(--mc-borda);
  border-radius: var(--mc-raio);
  padding:.75rem;
  text-align:center;
  transition: box-shadow .18s ease, transform .18s ease;
}
@media (prefers-reduced-motion: reduce){
  .woocommerce ul.products li.product{ transition:none; }
}
.woocommerce ul.products li.product:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product img{ border-radius: var(--mc-raio); margin-bottom:.6rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:.9375rem !important;
  font-weight:600;
  color: var(--mc-texto);
  min-height:2.8em;
  line-height:1.4;
  padding:0 !important;
}
.woocommerce ul.products li.product .price{ color: var(--mc-preco); font-weight:700; font-size:1.0625rem; }
.woocommerce ul.products li.product .price del{ color: var(--mc-esgotado); font-weight:400; font-size:.875rem; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce ul.products li.product .star-rating{ margin:.35rem auto; font-size:.8rem; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  background: var(--mc-azul);
  color:#fff;
  border-radius:999px;
  font-size:.8125rem;
  font-weight:700;
  padding:.5rem 1rem;
  margin-top:.5rem;
}
.woocommerce ul.products li.product .button:hover{ background:#002f66; }
.woocommerce span.onsale{
  background: var(--mc-promo);
  color:#fff;
  border-radius:999px;
  padding:.15rem .6rem;
  font-size:.75rem;
  min-height:auto;
  min-width:auto;
  line-height:1.6;
}
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title{ color: var(--mc-esgotado); }

/* =========================================================================
   6. LAYOUT HERDADO DO UX BUILDER
   ========================================================================= */
.mc-row{display:flex;flex-wrap:wrap;gap:var(--mc-gap);margin-block:1.5rem}
.mc-col{flex:1 1 100%;min-width:0}
@media (min-width:768px){
  .mc-col--1-2{flex-basis:calc(50% - (var(--mc-gap) / 2))}
  .mc-col--1-3{flex-basis:calc(33.333% - (var(--mc-gap) * 2 / 3))}
  .mc-col--2-3{flex-basis:calc(66.666% - (var(--mc-gap) / 3))}
  .mc-col--1-4{flex-basis:calc(25% - (var(--mc-gap) * 3 / 4))}
  .mc-col--3-4{flex-basis:calc(75% - (var(--mc-gap) / 4))}
}
.mc-block{margin-block:1.5rem}
.mc-text{margin-block:1rem}
.mc-block--ausente{display:none}

/* =========================================================================
   7. PAGINAS INSTITUCIONAIS RECONSTRUIDAS
   ========================================================================= */
.mc-conteudo{max-width:var(--mc-leitura)}
.mc-conteudo h2,
.mc-conteudo h3{color:var(--mc-azul);margin-block:1.5rem .75rem}
.mc-conteudo ul{padding-left:1.25rem;margin-block:1rem}
.mc-conteudo li{margin-block:.35rem}
.mc-rotulo{color:var(--mc-azul);font-weight:700}
.mc-contato{margin-block:1.5rem}
.mc-contato p{margin-block:.25rem}
.mc-aviso{border-left:3px solid var(--mc-azul);padding-left:1rem;margin-block:1.5rem}
hr.mc-divider{border:0;border-top:1px solid var(--mc-borda);margin-block:2.5rem}

/* Lista de desejos no cabecalho ------------------------------------------- */
.mc-desejos{ display:flex; align-items:center; }
.mc-desejos a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem; height:2.25rem;
  color: var(--mc-azul);
  text-decoration:none;
  font-size:1.15rem;
  line-height:1;
}
.mc-desejos a:hover{ color:#002f66; }
.mc-desejos__conta{
  position:absolute; top:-2px; right:-2px;
  background: var(--mc-preco); color:#fff;
  border-radius:999px;
  font-size:.65rem; font-weight:700;
  min-width:1.1rem; height:1.1rem;
  display:flex; align-items:center; justify-content:center;
  padding:0 .2rem;
}

/* =========================================================================
   8. HOME
   ========================================================================= */

/* Slider do topo ---------------------------------------------------------- */
.mc-slider{ position:relative; }
.mc-slider__lista{ list-style:none; margin:0; padding:0; }
.mc-slider__item img{ display:block; width:100%; height:auto; }
/* Sem JS, todos os slides aparecem empilhados — a pagina continua completa. */
.mc-slider--ativo .mc-slider__item[data-oculto]{ display:none; }
.mc-slider__nav{
  position:absolute; left:50%; bottom:.75rem; transform:translateX(-50%);
  display:flex; gap:.4rem;
}
.mc-slider__ponto{
  width:.6rem; height:.6rem; padding:0; border:0; border-radius:999px;
  background:rgba(255,255,255,.65); cursor:pointer;
}
.mc-slider__ponto[aria-current="true"]{ background: var(--mc-azul); }

/* Abas -------------------------------------------------------------------- */
.mc-abas{ margin-block:2rem; }
.mc-abas__barra{
  display:flex; flex-wrap:wrap; gap:.5rem;
  justify-content:center; margin-bottom:1.5rem;
}
.mc-abas__botao{
  background: var(--mc-lilas); color: var(--mc-azul);
  border:1px solid transparent; border-radius:999px;
  padding:.5rem 1.25rem;
  font-weight:700; font-size:.875rem;
  cursor:pointer;
}
.mc-abas__botao:hover{ background: var(--mc-lilas-escuro); }
.mc-abas__botao[aria-selected="true"]{ background: var(--mc-azul); color:#fff; }
.mc-abas__botao:focus-visible{ outline:2px solid var(--mc-azul); outline-offset:2px; }
/* Sem JS a barra nao serve para nada — some, e os titulos dos paineis guiam. */
.mc-abas:not(.mc-abas--ativo) .mc-abas__barra{ display:none; }
.mc-abas--ativo .mc-abas__titulo-fallback{ display:none; }
.mc-abas--ativo .mc-abas__painel[data-oculta]{ display:none; }
.mc-abas__titulo-fallback{
  text-align:center; color: var(--mc-azul);
  font-size:1.25rem; margin-block:1.5rem .75rem;
}

/* Colecoes ---------------------------------------------------------------- */
.mc-colecoes{
  list-style:none; margin:0; padding:0;
  display:grid; gap: var(--mc-gap);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.mc-colecao{
  background: var(--mc-fundo);
  border:1px solid var(--mc-borda); border-radius: var(--mc-raio);
  overflow:hidden; display:flex; flex-direction:column;
}
.mc-colecao__link{ text-decoration:none; color:inherit; display:block; }
.mc-colecao__img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.mc-colecao__nome{ color: var(--mc-azul); font-size:1.0625rem; margin:.75rem .875rem .25rem; }
.mc-colecao__desc{ margin:0 .875rem .5rem; font-size:.875rem; color: var(--mc-texto-suave); }
.mc-colecao__conta{ margin:auto .875rem .875rem; font-size:.8125rem; font-weight:700; color: var(--mc-azul); }

/* Blog -------------------------------------------------------------------- */
.mc-posts{
  list-style:none; margin:0; padding:0;
  display:grid; gap: var(--mc-gap);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.mc-post a{ text-decoration:none; color:inherit; }
.mc-post__img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius: var(--mc-raio); }
.mc-post__titulo{ font-size:1rem; color: var(--mc-azul); margin:.6rem 0 .25rem; }
.mc-post__data{ font-size:.8125rem; color: var(--mc-texto-suave); }

/* Faixas da home ---------------------------------------------------------- */
.mc-faixa{ padding:2.5rem 0; }
.mc-faixa--clara{ background: var(--mc-azul-claro); }
.mc-faixa__interno{ max-width: var(--mc-largura); margin-inline:auto; padding-inline:16px; }
.mc-titulo-secao{
  text-align:center; color: var(--mc-azul);
  font-size:1.75rem; margin-block:0 1.5rem;
}
.mc-retirada{ display:grid; gap: var(--mc-gap); grid-template-columns:1fr; align-items:center; }
@media (min-width:768px){ .mc-retirada{ grid-template-columns:auto 1fr; } }
.mc-retirada__icone{ display:block; margin-inline:auto; }
.mc-banner img{ display:block; width:100%; height:auto; }
.mc-pagamentos-home{ text-align:center; padding:2rem 16px; }
.mc-pagamentos-home img{ max-height:110px; width:auto; }

/* Faixa com cor propria vinda do conteudo (ex.: sobre-loja) ---------------- */
.mc-faixa--cor{ background: var(--mc-faixa-bg, transparent); padding-block:2.5rem; }
.mc-faixa--cor img{ max-width:100%; height:auto; }

/* Depoimentos ------------------------------------------------------------- */
.mc-depo{
  margin:0 0 1.25rem; padding:1.25rem;
  background: var(--mc-fundo);
  border:1px solid var(--mc-borda); border-radius: var(--mc-raio);
  break-inside:avoid;
}
.mc-depo__nota{ margin:0 0 .5rem; color:#f5a623; font-size:1rem; letter-spacing:.1em; }
.mc-depo__texto{ margin:0; padding:0; border:0; font-style:normal; font-size:.9375rem; line-height:1.55; }
.mc-depo__autor{ margin-top:.75rem; font-weight:700; color: var(--mc-azul); font-size:.875rem; }
@media (min-width:768px){
  .mc-depos-grade{ columns:2; column-gap: var(--mc-gap); }
}

/* ── Seletor de variação por miniatura (substitui o EPO) ───────────────── */
.mc-var-select-oculto{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.mc-variacoes{ list-style:none; margin:.35rem 0 0; padding:0; display:flex;
  flex-wrap:wrap; gap:.5rem; }
.mc-var-item{ margin:0; padding:0; }
.mc-var-botao{ display:flex; flex-direction:column; align-items:center; gap:.25rem;
  width:74px; padding:.3rem; border:2px solid var(--mc-lilas); border-radius:10px;
  background:#fff; cursor:pointer; font-family:inherit; line-height:1.1;
  transition:border-color .15s ease, box-shadow .15s ease; }
.mc-var-botao img{ width:64px; height:64px; object-fit:cover; border-radius:7px; display:block; }
.mc-var-sem-foto{ width:64px; height:64px; border-radius:7px; display:block;
  background:repeating-linear-gradient(45deg,var(--mc-rosa),var(--mc-rosa) 6px,#fff 6px,#fff 12px); }
.mc-var-nome{ font-size:.7rem; color:var(--mc-azul); text-align:center;
  max-width:66px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mc-var-botao:hover{ border-color:var(--mc-lilas-escuro); }
.mc-var-botao:focus-visible{ outline:2px solid var(--mc-azul); outline-offset:2px; }
.mc-var-ativo{ border-color:var(--mc-azul); box-shadow:0 0 0 2px var(--mc-azul) inset; }