/* Home do tema Mercolar, portada do protótipo v3 (view v-home). Carregado só na página inicial. */
.slider { position:relative;background:var(--graphite);overflow:hidden }
.slide { display:none;min-height:380px;align-items:center;position:relative }
.slide.on { display:flex;animation:fade .4s }
.slide .txt { flex:1;padding:44px 0;color:#fff;position:relative;z-index:2 }
.slide .eyebrow { display:inline-block;background:var(--red);padding:5px 13px;border-radius:99px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;margin-bottom:16px }
.slide h2 { font-size:clamp(1.75rem,3.6vw,2.85rem);font-weight:900;max-width:15ch;line-height:1.08 }
.slide p { margin-top:12px;opacity:.82;max-width:40ch;font-size:1rem }
.slide .cta { display:inline-block;margin-top:22px;background:var(--red);color:#fff;padding:13px 30px;border-radius:99px;font-weight:700;font-size:.92rem }
.slide .cta:hover { background:var(--red-dark) }
.slide .pic { flex:none;width:42%;display:grid;place-items:center;padding:24px 0 }
.slide .pic img { max-height:330px;object-fit:contain;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45)) }
.sl-dots { position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:5 }
.sl-dots i { width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.4);cursor:pointer;display:block }
.sl-dots i.on { background:var(--red-light);width:26px }
.sl-arrow { position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);width:40px;height:40px;border-radius:99px;color:#fff;display:grid;place-items:center;z-index:5 }
.sl-arrow:hover { background:var(--red) }
.sl-arrow.prev { left:14px }
.sl-arrow.next { right:14px }
@media(max-width:860px) {
	.slide { min-height:auto }
	.slide .pic { display:none }
}
.strip { background:#fff;border-bottom:1px solid var(--line) }
.strip .wrap { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:16px;padding-bottom:16px }
.strip .s { display:flex;gap:11px;align-items:center }
.strip svg { color:var(--red);flex:none }
.strip b { display:block;font-size:.83rem;font-weight:600 }
.strip span { font-size:.75rem;color:var(--muted) }
@media(max-width:860px) {
	.strip .wrap { grid-template-columns:1fr;gap:0 }
	.strip .s { display:none }
	.strip .s:first-child { display:flex }
}
.catrail { display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none }
.catrail::-webkit-scrollbar { display:none }
.catrail a { flex:none;width:132px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 10px;text-align:center;transition:.16s }
.catrail a:hover { border-color:var(--red);transform:translateY(-3px);box-shadow:var(--shadow) }
.catrail .ic { color:var(--red);display:flex;justify-content:center;margin-bottom:8px }
.catrail b { font-size:.79rem;font-weight:600;display:block;line-height:1.25 }
.catrail span { font-size:.7rem;color:var(--muted) }
.rail { display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none }
.rail::-webkit-scrollbar { display:none }
.rail .card { flex:none;width:250px }
.banners { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:42px }
.bn { border-radius:var(--r-lg);padding:30px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:170px;overflow:hidden;position:relative }
.bn.a { background:linear-gradient(120deg,var(--red) 0%,var(--red-dark) 100%) }
.bn.b { background:linear-gradient(120deg,var(--graphite) 0%,#1C1C1C 100%) }
.bn h3 { font-size:1.35rem;max-width:14ch }
.bn p { font-size:.85rem;opacity:.85;margin-top:7px;max-width:26ch }
.bn span { display:inline-block;margin-top:14px;font-size:.82rem;font-weight:700;border-bottom:2px solid currentColor;padding-bottom:2px }
.bn img { width:150px;height:150px;object-fit:contain;flex:none;filter:drop-shadow(0 12px 26px rgba(0,0,0,.4)) }
@media(max-width:780px) {
	.banners { grid-template-columns:1fr }
	.bn img { display:none }
}
.brands { display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px }
.brands::-webkit-scrollbar { display:none }
.brands a { flex:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 26px;font-family:'Nunito';font-weight:800;color:var(--graphite-400);font-size:1rem;letter-spacing:-.02em;white-space:nowrap;transition:.15s }
.brands a:hover { color:var(--red);border-color:var(--red) }
.brands a small { display:block;font-size:.62rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.6;font-family:'Figtree' }
.revs { display:grid;grid-template-columns:repeat(3,1fr);gap:16px }
@media(max-width:860px) {
	.revs { grid-template-columns:1fr }
}
.rev { background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px }
.rev .st { color:var(--amber);letter-spacing:-1px;font-size:.95rem }
.rev p { font-size:.88rem;margin:9px 0 14px;color:var(--graphite-700) }
.rev b { font-size:.83rem }
.rev span { font-size:.74rem;color:var(--muted);display:block }
.news { display:grid;grid-template-columns:repeat(3,1fr);gap:16px }
@media(max-width:860px) {
	.news { grid-template-columns:1fr }
}
.nw { background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden }
.nw .ph { height:150px;background:var(--graphite);display:grid;place-items:center;color:rgba(255,255,255,.25) }
.nw .bd { padding:16px }
.nw .bd span { font-size:.72rem;color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.07em }
.nw .bd h3 { font-size:1rem;margin:6px 0 8px }
.nw .bd p { font-size:.83rem;color:var(--muted) }

/* Ajustes da home ao WooCommerce */
.slide .wrap { display: flex; align-items: center; gap: 26px; width: 100%; } /* no protótipo era estilo inline */
/* O CSS do Personalizar do Storefront pinta títulos de #333: nos banners escuros o título herda o branco. */
.slide h2, .bn h3 { color: inherit; }
a.bn { color: #fff; }
/* Na home o conteúdo usa a largura toda (banner de ponta a ponta, como no protótipo); cada seção se limita com .wrap. */
.home .site-content > .col-full { max-width: none; margin: 0; padding: 0; }
.sl-arrow svg { display: block; margin: auto; }
/* Botão de pausa da troca automática (acessibilidade: movimento que dura mais de 5 s precisa poder parar). */
.sl-pausa { position: absolute; right: 18px; bottom: 10px; z-index: 5; width: 30px; height: 30px; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #fff; font-size: .7rem; line-height: 30px; text-align: center; padding: 0; }
.sl-pausa:hover { background: var(--red); }
.sl-pausa:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.catrail .ic img { width: 100%; height: auto; }