/*
Theme Name: ModuCommerce
Theme URI: https://example.com
Author: Você + ChatGPT
Description: Tema modular para e-commerce (WooCommerce) com foco em SEO, performance e acessibilidade.
Version: 1.0.7
Text Domain: moducommerce
License: GPL-2.0-or-later
*/

/* ===========================
   Tokens / Variáveis globais
   =========================== */
:root{
  --mc-bg:#FFFFFF;
  --mc-surface:#FFFFFF;
  --mc-layer:#F6F7F9;   /* cartelas/inputs */
  --mc-border:#E6E8EC;  /* bordas neutras */
  --mc-text:#111111;
  --mc-text-weak:#666666;
  --mc-primary:#0F172A;
  --mc-accent:#7C5CFF;
  --mc-ok:#22C55E;
  --mc-warn:#F59E0B;
  --mc-radius:16px;
  --mc-font-ui:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  /* Dimensões do card de categoria (preset base) */
  --mc-cat-w: 140px;      /* largura da cartela */
  --mc-cat-h: 92px;       /* altura da cartela */
  --mc-cat-img-max: 120px;/* altura MÁX da imagem (pode ultrapassar a cartela) */
}
@media (max-width:767px){
  :root{
    --mc-cat-w: 112px;
    --mc-cat-h: 78px;
    --mc-cat-img-max: 96px;
  }
}

/* ===========================
   Resets básicos
   =========================== */
html{scroll-behavior:smooth; overflow-x:hidden;}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--mc-bg);
  color:var(--mc-text);
  font-family:var(--mc-font-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
button{font:inherit; cursor:pointer;}
.container{width:min(1200px,92vw); margin-inline:auto; padding-inline:12px;}

/* ===========================
   Header (desktop + mobile)
   =========================== */
.mc-header{background:var(--mc-surface); border-bottom:1px solid var(--mc-border);}
.mc-header__bar{
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:16px; align-items:center; padding:14px 0;
}
.mc-loc{display:flex; gap:10px; align-items:center;}
.mc-loc select{
  background:var(--mc-layer); color:var(--mc-text);
  border:1px solid var(--mc-border); border-radius:10px; padding:8px 10px;
}

.mc-nav{display:flex; gap:18px; justify-content:center;}
.mc-nav a{
  padding:6px 12px; border-radius:10px; color:var(--mc-text-weak);
  border:1px solid transparent;
}
.mc-nav a:hover{background:var(--mc-layer); color:var(--mc-text); border-color:var(--mc-border);}

.mc-actions{display:flex; justify-content:flex-end; gap:14px;}
.mc-action{
  display:flex; gap:8px; align-items:center;
  background:var(--mc-layer); border:1px solid var(--mc-border);
  padding:8px 10px; border-radius:12px;
}
.mc-action__icon{width:22px; height:22px;}
.mc-action__label{font-size:.92rem; color:var(--mc-text-weak);}

/* Mobile: header só com localização + carrinho */
@media (max-width:767px){
  .mc-header__bar{grid-template-columns:1fr auto; gap:10px;}
  .mc-nav{display:none;}
  .mc-actions .mc-action{display:none;}
  .mc-actions .mc-action--cart{display:flex;}
}

/* ===========================
   Barra mobile inferior fixa
   =========================== */
.mc-mobilebar{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--mc-surface); border-top:1px solid var(--mc-border);
  padding:8px; z-index:9999;
}
.mc-mobilebar__row{display:flex; justify-content:space-around;}
.mc-mbtn{display:flex; flex-direction:column; align-items:center; gap:6px;}
.mc-mbtn img{width:22px; height:22px;}
.mc-mbtn span{font-size:.72rem; color:var(--mc-text-weak);}
@media (min-width:1024px){ .mc-mobilebar{display:none;} }
@media (max-width:1023px){ body{padding-bottom:72px;} } /* reserva espaço para a barra */

/* ===========================
   Hero (busca + botão filtro)
   =========================== */
.mc-hero{padding:22px 0 10px;}
.mc-searchwrap{display:grid; grid-template-columns:1fr auto; gap:10px;}
.mc-search{
  display:flex; align-items:center; gap:8px;
  background:var(--mc-layer); border:1px solid var(--mc-border);
  border-radius:12px; padding:6px 10px;
}
.mc-search input{all:unset; color:var(--mc-text); width:100%;}
/* Botão de filtro (abre modal) */
.mc-filter{
  display:flex; align-items:center; justify-content:center;
  background:var(--mc-layer); border:1px solid var(--mc-border);
  border-radius:12px; width:44px; height:40px; padding:0;
}
.mc-filter svg{display:block;}

.mc-banner{
  margin:18px 0; border-radius:16px; overflow:hidden;
  position:relative; background:var(--mc-layer);
}
.mc-banner img{width:100%; height:380px; object-fit:cover;}
@media (max-width:767px){ .mc-banner img{height:220px;} }
.mc-banner--mask::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.15));
  pointer-events:none;
}

/* ============================================
   Carrossel de categorias — PRESET BASE
   Cartela clara + borda, imagem ancorada embaixo
   (parte superior pode “vazar” sem corte)
   ============================================ */
.mc-cats{margin:14px 0 6px;}
.mc-cats__track{
  display:grid; grid-auto-flow:column; gap:16px;
  overflow:auto; padding:24px 4px 8px; /* top maior para acomodar o vazamento */
  scroll-snap-type:x mandatory;
}
.mc-cat{
  width:var(--mc-cat-w);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:8px; overflow:visible;
  scroll-snap-align:center;
  transition:transform .2s ease;
}
.mc-cat__canvas{
  position:relative; width:var(--mc-cat-w); height:var(--mc-cat-h);
  background:var(--mc-layer); border:1px solid var(--mc-border);
  border-radius:16px; overflow:visible;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* Imagem:
   - SEMPRE encostada na parte inferior (bottom:-1px)
   - usa altura MÁXIMA; se pequena, fica colada embaixo sem gap
   - se grande, “vaza” por cima (sem corte)
*/
.mc-cat__image{
  position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  height:auto; max-height:var(--mc-cat-img-max);
  width:auto; max-width:calc(var(--mc-cat-w) - 16px);
  object-fit:contain; object-position:center bottom;
  pointer-events:none; user-select:none;
  transition:transform .2s ease;
}
.mc-cat__label{font-size:.9rem; color:var(--mc-text-weak); line-height:1.2;}

/* Item em evidência (centro do carrossel) */
.mc-cat.is-focus .mc-cat__canvas{
  background:#E3E6EB;           /* leve escurecido */
  border-color:#CBD2DA;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}
.mc-cat.is-focus .mc-cat__image{
  transform:translateX(-50%) scale(1.06); /* levemente maior */
}

/* ===========================
   Barra de ícones informativos
   =========================== */
.mc-infobar{
  display:grid; grid-auto-flow:column; gap:16px;
  overflow:auto; padding:14px 2px 20px;
  border-bottom:1px solid var(--mc-border);
}
.mc-info{
  display:flex; gap:10px; align-items:center;
  background:var(--mc-layer); border:1px solid var(--mc-border);
  border-radius:14px; padding:10px 12px; min-width:240px;
}
.mc-info img{width:24px; height:24px; flex:0 0 auto;}
.mc-info span{font-size:.92rem; color:var(--mc-text-weak);}

/* ===========================
   Modal de filtros (UI)
   =========================== */
.mc-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center;
  z-index:10000; padding:16px;
}
.mc-modal.is-open{display:flex;}
.mc-modal__box{
  width:min(720px,96vw); background:var(--mc-surface);
  border:1px solid var(--mc-border); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  display:flex; flex-direction:column;
}
.mc-modal__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--mc-border);
}
.mc-modal__head h3{margin:0; font-size:1.05rem;}
.mc-modal__close{background:transparent; border:none; font-size:18px; line-height:1;}
.mc-modal__content{padding:14px;}
.mc-filtergrid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:640px){ .mc-filtergrid{grid-template-columns:1fr;} }
.mc-filtercard{background:var(--mc-layer); border:1px solid var(--mc-border); border-radius:12px; padding:12px;}
.mc-filtercard h4{margin:0 0 6px;}
.mc-chips{display:flex; flex-wrap:wrap; gap:8px;}
.mc-chip{background:#fff; border:1px solid var(--mc-border); border-radius:999px; padding:6px 10px; font-size:.9rem;}
.mc-price{display:flex; align-items:center; gap:8px;}
.mc-price input{width:100%; background:#fff; border:1px solid var(--mc-border); border-radius:10px; padding:8px 10px;}
.mc-modal__foot{display:flex; justify-content:flex-end; gap:10px; padding:12px 14px; border-top:1px solid var(--mc-border);}
.mc-btn{background:var(--mc-primary); color:#fff; border:none; border-radius:10px; padding:10px 14px;}
.mc-btn--ghost{background:#fff; border:1px solid var(--mc-border); color:var(--mc-text);}

/* ===========================
   Pré-footer e Footer (responsivo)
   =========================== */
.mc-prefooter{
  margin:30px 0 0; padding:22px 0;
  background:#0F0F0F; border-top:1px solid #232323; border-bottom:1px solid #232323;
}
.mc-prebox{display:flex; gap:16px; align-items:center; justify-content:space-between;}
.mc-prebox p{color:#CFCFCF; margin:0;}
.mc-prebox a{
  background:#FF6A00; color:#111; padding:10px 14px;
  border-radius:12px; font-weight:600; white-space:nowrap;
}
@media (max-width:640px){
  .mc-prebox{flex-direction:column; align-items:stretch;}
  .mc-prebox a{width:100%; text-align:center;}
}

footer.site-footer{background:#0E0E0E; padding:24px 0 80px; overflow:hidden;}
.mc-footgrid{display:grid; gap:20px; grid-template-columns:1.2fr .9fr 1fr;}
@media (max-width:900px){ .mc-footgrid{grid-template-columns:1fr;} }
.mc-foot h4{margin:0 0 10px; font-size:1rem; color:#EDEDED;}
.mc-foot p,.mc-foot a{color:#B9B9B9; font-size:.95rem; word-break:break-word;}
.mc-paybox{background:#101010; border:1px solid #232323; border-radius:12px; padding:12px; text-align:center;}
.mc-paybox img{max-width:100%; height:auto;}

/* ===========================
   Utilidades
   =========================== */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}