/* Estilo do tema Mercolar: base, cabeçalho, menu e rodapé portados do protótipo v3 (referencia/mercolar-v3-tema-marca.html). */
:root { --red:#9E2B2B;
  --red-dark:#7E2122;
  --red-light:#C14A48;
  --red-50:#FBF1F1;
  --red-100:#F2DEDE;

  --graphite:#333333;
  --graphite-700:#4A4A4A;
  --graphite-400:#7A7A7A;

  --ink:#242424;
  --muted:#6E6E6E;
  --line:#E4E4E1;
  --bg:#F4F4F1;
  --white:#fff;
  --green:#17835A;
  --green-50:#E9F5F0;
  --amber:#E8A317;

  --r-sm:5px; --r:9px; --r-lg:14px;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --shadow-lift:0 4px 10px rgba(0,0,0,.07), 0 18px 44px rgba(0,0,0,.11);
  --max:1280px; }
* { box-sizing:border-box;margin:0;padding:0 }
body { font-family:'Figtree',system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased }
h1,h2,h3,h4 { font-family:'Nunito',system-ui,sans-serif;line-height:1.15;letter-spacing:-.015em;font-weight:800 }
a { color:inherit;text-decoration:none }
button { font:inherit;cursor:pointer;border:none;background:none;color:inherit }
.wrap { max-width:var(--max);margin:0 auto;padding:0 18px }
@media (prefers-reduced-motion:reduce) {
	* { animation:none!important;transition:none!important }
}
.hdr { background:#fff;border-bottom:1px solid var(--line);position:sticky;top:32px;z-index:300 }
.hdr-main { display:flex;align-items:center;gap:24px;padding:14px 0 }
.logo { display:flex;align-items:center;gap:9px;flex:none }
.logo .mark { width:42px;height:34px;flex:none }
.logo .wm { font-family:'Nunito';font-weight:900;font-size:1.72rem;letter-spacing:-.045em;color:var(--graphite);line-height:1 }
.logo .wm span { color:var(--red) }
.search { flex:1;position:relative;min-width:170px }
.search-in { display:flex;border:2px solid var(--line);border-radius:99px;overflow:hidden;transition:.15s }
.search-in:focus-within { border-color:var(--red) }
.search input { flex:1;border:none;padding:11px 20px;font-size:.92rem;outline:none;background:transparent }
.search button { background:var(--red);color:#fff;padding:0 22px;display:flex;align-items:center }
.search button:hover { background:var(--red-dark) }
.hdr-act { display:flex;align-items:center;gap:20px;font-size:.83rem;flex:none }
.hdr-act .it { display:flex;gap:8px;align-items:center;color:var(--graphite-700) }
.hdr-act .it:hover { color:var(--red) }
.hdr-act .lbl { font-size:.7rem;color:var(--muted);display:block;line-height:1.2 }
.hdr-act strong { font-weight:600;color:var(--ink) }
.chip { position:absolute;top:-7px;right:-9px;background:var(--red);color:#fff;border-radius:99px;min-width:18px;height:18px;font-size:.68rem;font-weight:700;display:grid;place-items:center;padding:0 5px }
.rel { position:relative }
.nav { background:var(--graphite);color:#fff }
.nav > ul { list-style:none;display:flex;gap:0;max-width:var(--max);margin:0 auto;padding:0 18px;overflow-x:auto;scrollbar-width:none }
.nav > ul::-webkit-scrollbar { display:none }
.nav>ul>li { position:relative }
.nav>ul>li>a { display:block;padding:12px 16px;font-size:.85rem;font-weight:500;white-space:nowrap }
.nav>ul>li:hover>a { background:var(--red) }
.sub-menu { position:absolute;top:100%;left:0;background:#fff;color:var(--ink);min-width:250px;box-shadow:var(--shadow-lift);border-radius:0 0 var(--r) var(--r);padding:8px;display:none;z-index:40 }
.nav>ul>li:hover > .sub-menu { display:block }
.sub-menu a { display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:var(--r-sm);font-size:.85rem }
.sub-menu a:hover { background:var(--red-50);color:var(--red) }
.sub-menu li { list-style:none;position:relative }
.sub-menu .sub-menu { position:absolute;left:100%;top:0;background:#fff;min-width:210px;box-shadow:var(--shadow-lift);border-radius:var(--r);padding:8px;display:none }
.sub-menu li:hover > .sub-menu { display:block }
@media(max-width:900px) {
	.hdr-main { flex-wrap:wrap;gap:12px }
	.search { order:3;flex-basis:100% }
	.hdr-act { margin-left:auto }
	.hdr-act .hide-sm { display:none }
}
.btn { display:block;text-align:center;padding:14px;border-radius:var(--r);font-weight:700;font-size:.95rem;transition:.15s }
.btn-red { background:var(--red);color:#fff;flex:1 }
.btn-red:hover { background:var(--red-dark) }
.btn-out { border:1.5px solid var(--graphite);color:var(--graphite);margin-top:9px }
.btn-out:hover { background:var(--graphite);color:#fff }
.ft { background:var(--graphite);color:#fff;padding:40px 0 0 }
.ft-grid { display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:30px;padding-bottom:30px }
@media(max-width:840px) {
	.ft-grid { grid-template-columns:1fr 1fr }
}
.ft h4 { font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:13px;opacity:.55;font-family:'Figtree';font-weight:700 }
.ft a,.ft p { display:block;font-size:.85rem;opacity:.8;padding:3px 0 }
.ft a:hover { opacity:1;color:#FFB3B3 }
.ft-bot { border-top:1px solid rgba(255,255,255,.13);padding:15px 0;font-size:.77rem;opacity:.6;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap }
.socials { display:flex;gap:9px;margin-top:12px }
.socials a { width:34px;height:34px;border-radius:99px;background:rgba(255,255,255,.1);display:grid;place-items:center;opacity:1 }
.socials a:hover { background:var(--red) }

/* Ajustes ao WordPress/Storefront */
.hdr { top: 0; }
body.admin-bar .hdr { top: 32px; }
@media (max-width: 782px) { body.admin-bar .hdr { top: 46px; } }
.nav li:focus-within > .sub-menu { display: block; } /* teclado abre o submenu (mesma propriedade do hover) */
.site-header, .storefront-handheld-footer-bar { display: none; } /* cabeçalho e barra móvel do Storefront não são usados */
/* Menu: no computador quebra linha e deixa os submenus saírem; no celular rola na horizontal e o toque leva à categoria. */
@media (min-width: 901px) { .nav > ul { overflow: visible; flex-wrap: wrap; } }
@media (max-width: 900px) { .nav .sub-menu { display: none !important; } }
.nav .sub-menu { margin: 0; }
/* Minha conta no celular: só o ícone (o texto some; o link tem aria-label). */
@media (max-width: 900px) { .hdr-act .conta-texto { display: none; } }
body { font-family: 'Figtree', system-ui, sans-serif; }
h1, h2, h3, h4, .wm { font-family: 'Nunito', system-ui, sans-serif; }
.ft li { list-style: none; }
.ft li a { display: block; }
.logo-escuro .wm { color: #fff; }
.logo-escuro .wm span { color: var(--red-light); }
/* O CSS do Personalizar do Storefront pinta títulos e links do menu de #333: aqui herdam a cor clara da faixa escura. */
.nav > ul > li > a { color: inherit; }
.nav > ul > li.current-menu-item > a, .nav > ul > li.current-menu-ancestor > a { color: inherit; } /* o Storefront pinta o item atual de cinza-escuro */
/* Gaveta do carrinho (2.5) */
.gaveta-fundo { position: fixed; inset: 0; background: rgba(36, 36, 36, .45); z-index: 998; }
.gaveta { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(420px, 100vw); background: #fff; box-shadow: -14px 0 50px rgba(36, 36, 36, .22); z-index: 999; display: flex; flex-direction: column; }
.gaveta[hidden], .gaveta-fundo[hidden] { display: none; }
.gaveta[aria-busy="true"] .gaveta-conteudo { opacity: .6; pointer-events: none; }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.gaveta-topo h2 { font-size: 1.1rem; margin: 0; }
.gaveta-x { font-size: 1.6rem; line-height: 1; color: var(--muted); background: none; padding: 0 4px; }
.gaveta-erro { margin: 10px 18px 0; padding: 9px 12px; background: var(--red-50); color: var(--red-dark); border-radius: var(--r-sm); font-size: .84rem; }
.gaveta-conteudo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.gaveta-vazia { padding: 24px 18px 12px; color: var(--muted); }
.gaveta-conteudo > .btn-out { margin: 0 18px; }
.gaveta-itens { list-style: none; margin: 0; padding: 0 18px; overflow-y: auto; flex: 1; }
.gaveta-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.gaveta-item img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.gaveta-info { flex: 1; min-width: 0; font-size: .86rem; }
.gaveta-info a { color: inherit; font-weight: 600; }
.gaveta-info .unit { display: block; color: var(--muted); font-size: .76rem; margin: 2px 0 6px; }
.gaveta-qtd { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); }
.gaveta-qtd button { background: none; color: var(--ink); padding: 4px 11px; font-size: 1rem; }
.gaveta-qtd span { min-width: 26px; text-align: center; font-weight: 700; }
.gaveta-sub { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; font-size: .86rem; }
.gaveta-remover { background: none; color: var(--muted); font-size: 1.3rem; padding: 0; }
.gaveta-pe { padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.gaveta-pe .srow { display: flex; justify-content: space-between; font-size: .92rem; }
.gaveta-aviso { color: var(--muted); font-size: .78rem; margin: 4px 0 12px; }
.gaveta-pe .btn-out { width: 100%; margin-top: 9px; background: #fff; }
.card-ft .added_to_cart { display: none; } /* o WooCommerce acrescenta um link "Ver carrinho": a gaveta faz esse papel */
.single-product form.cart .comprar-agora { flex-basis: 100%; background: #fff; color: var(--graphite); border: 1.5px solid var(--graphite); border-radius: var(--r); font-weight: 700; padding: 13px; }
.single-product form.cart .comprar-agora:hover { background: var(--graphite); color: #fff; }