/** Shopify CDN: Minification failed
Line 817:17 Expected identifier but found whitespace
Line 817:26 Unexpected "!"
Line 896:7 Expected identifier but found whitespace
Line 896:12 Unexpected ";"
Line 1583:0 Unexpected "}"
Line 3218:1 Expected "}" to go with "{"
**/
/* ===== LIMPEZA: desativando blocos antigos de banner/degradê ===== */
/* =====================================================
BAMBUREY — Menu Categorias (seta no final do branco)
===================================================== */
@media (min-width: 990px){
/* largura fixa da coluna branca */
.nav-dropdown{
width: 420px !important;
max-width: 420px !important;
column-count: 1 !important;
columns: 1 !important;
}
/* cada item ocupa a linha inteira */
.nav-dropdown__item{
width: 100% !important;
}
/* O LINK é o container flex */
.nav-dropdown__link{
display: flex !important;
align-items: center !important;
width: 100% !important;
box-sizing: border-box !important;
padding-right: 16px !important; /* respiro da seta */
}
/* TEXTO da categoria */
.nav-dropdown__link span,
.nav-dropdown__link:not(:has(svg)){
flex: 1 1 auto !important;
}
/* SETA vai para o final do branco */
.nav-dropdown__link svg.icon-nav-triangle-borderless{
margin-left: auto !important;
flex-shrink: 0 !important;
}
}
/* se existir “faixa azul” no container/pai, força laranja também */
#shopify-section-template--23351491526949__custom_html_VfgQ8u{
background: #ff5a00 !important;
padding: 0 !important;
margin: 0 !important;
}
/* cola a faixa laranja de baixo (tira o “respiro” entre as duas) */
#shopify-section-template--23351491526949__custom_html_VfgQ8u{
margin-bottom: -18px !important; /* ajuste fino: teste -12 / -18 / -24 */
}
/* ===== BAMBUREY: encostar a faixa do cronômetro na seção laranja ===== */
:root{ --flashOrange:#ff5a00; }
/* 1) Zera espaço e pinta o fundo do bloco do cronômetro (custom html) */
#shopify-section-template--23351491526949__custom_html_VfgQ8u,
#shopify-section-template--23351491526949__custom_html_VfgQ8u .section,
#shopify-section-template--23351491526949__custom_html_VfgQ8u .page-width{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
background: var(--flashOrange) !important;
}
/* 2) Puxa a vitrine laranja pra cima 2px pra sumir a “fresta” */
#shopify-section-template--23351491526949__featured_collection_LC6yGR{
margin-top: -2px !important;
}
/* 3) Remove qualquer borda/linha superior que alguns temas colocam */
#shopify-section-template--23351491526949__featured_collection_LC6yGR .section{
border-top: 0 !important;
padding-top: 0 !important;
}
:root{ --flashOrange:#ff5a00; }
/* 2) pinta a faixa e tira qualquer espaço dela */
.flash-header{
background: var(--flashOrange) !important;
margin: 0 !important;
padding: 10px 16px !important;
}
/* 3) zera o “top” da seção laranja de produtos (a de baixo) */
[id*="__featured_collection_"]{
margin-top: 0 !important;
padding-top: 0 !important;
}
[id*="__featured_collection_"] .section,
[id*="__featured_collection_"] .page-width{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 4) se ainda sobrar 1px de fresta, puxa a seção de baixo um tiquinho pra cima */
[id*="__featured_collection_"]{
margin-top: -8px !important; /* ajuste: -4 / -8 / -12 */
}
/* AUMENTAR TAMANHO DO CRONÔMETRO */
.flash-header{
font-size: 18px !important; /* tamanho do texto */
padding: 16px 24px !important; /* altura da faixa */
}
/* Caixinhas do tempo (dias, horas, etc) */
.flash-header span,
.flash-header .countdown,
.flash-header .timer,
.flash-header .time{
font-size: 17px !important;
padding: 6px 10px !important;
border-radius: 6px;
}
/* Título "Oferta Relâmpago" */
.flash-header strong,
.flash-header b{
font-size: 18px !important;
}
/* CENTRALIZAR OFERTA + CRONÔMETRO */
.flash-header{
display: flex !important;
justify-content: center !important; /* centraliza horizontal */
align-items: center !important; /* centraliza vertical */
gap: 12px; /* espaço entre título e tempo */
text-align: center;
}
/* FUNDO LARANJA NA VITRINE DA OFERTA RELÂMPAGO */
#shopify-section-template--23351491526949__featured_collection_LC6yGR,
#shopify-section-template--23351491526949__featured_collection_LC6yGR .section,
#shopify-section-template--23351491526949__featured_collection_LC6yGR .page-width,
#shopify-section-template--23351491526949__featured_collection_LC6yGR .container,
#shopify-section-template--23351491526949__featured_collection_LC6yGR .featured-collection {
background: #ff5a00 !important; /* mesmo laranja de cima */
}
/* Fundo geral do site (degradê leve, não pesado) */
body{
background: linear-gradient(180deg,
rgba(255, 212, 0, 0.10) 0%,
rgba(255, 255, 255, 1) 35%,
rgba(255, 212, 0, 0.06) 100%
) !important;
}
/* ===== Endereço abaixo do header (Bamburey) ===== */
.bambu-endereco-strip{
padding: 6px 0;
}
.bambu-endereco-strip .envio-endereco{
display: inline-flex;
align-items: center;
gap: 6px;
background: #FFD400;
color: #222;
padding: 6px 10px;
border-radius: 999px;
font-weight: 600;
font-size: 12px;
line-height: 1;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bambu-endereco-strip .envio-endereco a{
color: #222;
text-decoration: underline;
}
/* Mobile: mais compacto (não estoura) */
@media (max-width: 989px){
.bambu-endereco-strip{
padding: 4px 0;
}
.bambu-endereco-strip .envio-endereco{
font-size: 11px;
padding: 5px 8px;
max-width: 92vw;
}
}
/* Se quiser esconder no mobile, descomente:
@media (max-width: 989px){
.bambu-endereco-strip{ display:none; }
}
/* =========================================================
BAMBUREY — BANNER INTEGRADO (LIMPO)
- 1 único degradê (sem duplicar)
- sem blocos sem seletor
========================================================= */
:root{
--bambu-page-bg: linear-gradient(180deg,
rgba(255, 212, 0, 0.10) 0%,
rgba(255, 255, 255, 1) 35%,
rgba(255, 212, 0, 0.06) 100%
);
}
/* fundo da página */
body{
background: var(--bambu-page-bg) !important;
}
/* seção do slideshow/banner vira referência do degradê */
.shopify-section[data-section-type="slideshow"],
.shopify-section.section--slideshow{
position: relative !important;
overflow: hidden !important;
}
/* degradê integrado (do banner para o fundo da página) */
.shopify-section[data-section-type="slideshow"]::after,
.shopify-section.section--slideshow::after{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
height:140px !important; /* ajuste: 110 / 140 / 180 */
pointer-events:none !important;
z-index:9 !important;
/* aparece o fundo da página “subindo” */
background: var(--bambu-page-bg) !important;
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%,
rgba(0,0,0,0.35) 45%,
rgba(0,0,0,1) 100%
);
mask-image: linear-gradient(to bottom,
transparent 0%,
rgba(0,0,0,0.35) 45%,
rgba(0,0,0,1) 100%
);
}
/* remove linha/espacinho entre o banner e a seção seguinte */
.shopify-section[data-section-type="slideshow"] + .shopify-section{
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
/* ===== Bamburey | Diminuir altura da Oferta Relâmpago ===== */
.flash-header{
padding: 6px 16px !important; /* antes era ~16px 24px */
min-height: 44px !important; /* força ficar mais fina */
font-size: 15px !important;
line-height: 1.2 !important;
}
/* Ajusta os blocos do contador */
.flash-header span,
.flash-header div{
padding: 3px 6px !important;
font-size: 13px !important;
}
/* ===== Bamburey | Oferta Relâmpago MAIS fina (força mesmo) ===== */
.flash-header{
padding: 2px 12px !important;
min-height: 34px !important;
height: auto !important;
line-height: 1.1 !important;
}
/* contador e textos mais compactos */
.flash-header *{
line-height: 1.1 !important;
}
.flash-header span,
.flash-header a,
.flash-header div{
padding: 2px 6px !important;
font-size: 12px !important;
}
/* ===== Bamburey | diminuir o BLOCO da seção (menos “tijolo” laranja) ===== */
.flash-header{
margin: 0 !important;
}
/* reduz padding do bloco onde a faixa está dentro */
.container .html.rte{
padding-top: 8px !important;
padding-bottom: 8px !important;
}
/* ===== Bamburey | Header amarelo ===== */
.header,
.site-header,
.header-wrapper,
.header__wrapper{
background: #FFD400 !important; /* amarelo ML */
}
/* Ajusta textos pra contraste */
.header *,
.site-header *,
.header-wrapper *{
color: #222 !important;
}
/* Campo de busca */
.header input,
.header input::placeholder{
color: #222 !important;
}
/* Ícones */
.header svg,
.header i{
fill: #222 !important;
color: #222 !important;
}
/* ===== Bamburey | Header amarelo ===== */
.header,
.site-header,
.header-wrapper,
.header__wrapper{
background: #FFD400 !important; /* amarelo ML */
}
/* Ajusta textos pra contraste */
.header *,
.site-header *,
.header-wrapper *{
color: #222 !important;
}
/* Campo de busca */
.header input,
.header input::placeholder{
color: #222 !important;
}
/* Ícones */
.header svg,
.header i{
fill: #222 !important;
color: #222 !important;
}
/* ===== Bamburey | Forçar textos e ícones do header em preto ===== */
.header *,
.site-header *,
.header-wrapper *,
.header__wrapper *{
color: #111 !important;
}
/* Links */
.header a,
.site-header a{
color: #111 !important;
}
/* Ícones */
.header i,
.header svg,
.site-header i,
.site-header svg{
fill: #111 !important;
color: #111 !important;
}
/* Busca */
.header input,
.header input::placeholder{
color: #111 !important;
}
/* Botões */
.header button{
color: #111 !important;
}
/* ===== Forçar ícones do topo em PRETO ===== */
.header__action-list svg,
.header__action-list path,
.header__action-list i{
fill: #111 !important;
color: #111 !important;
stroke: #111 !important;
}
/* Botões do header */
.header__action-list a,
.header__action-list button{
color: #111 !important;
}
/* Hover (quando passa o mouse) */
.header__action-list a:hover,
.header__action-list button:hover{
color: #000 !important;
}
.header__action-list a:hover svg,
.header__action-list button:hover svg{
fill: #000 !important;
}
/* ===== Remover ícone duplicado de conta ===== */
/* Esconde o segundo boneco */
.header__action-item--account + .header__action-item--account{
display: none !important;
}
/* ===== Remover ícone duplicado de conta (mobile) ===== */
.header .icon-account-mobile{
display: none !important;
}
/* ===== Caminhão só com contorno (sem preenchimento) ===== */
.header svg path,
.header svg circle,
.header svg rect {
fill: none !important;
stroke: #000 !important; /* preto */
stroke-width: 1.8px; /* espessura do traço */
}
/* ===== Padronizar ícones do header (preto + contorno) ===== */
.header svg,
.header svg * {
fill: none !important;
stroke: #000 !important;
stroke-width: 1.8px !important;
}
/* Força links/ícones */
.header a svg,
.header button svg {
fill: none !important;
stroke: #000 !important;
}
/* ===== Forçar borda preta no ícone do carrinho ===== */
.header .icon-state__primary svg,
.header .icon-state__primary svg * {
fill: none !important;
stroke: #000 !important;
stroke-width: 2px !important;
}
/* ===== BAMBUREY — Ícones do header em PRETO (contorno) ===== */
/* garante que tudo dentro do header herde preto */
.header, .site-header, .header-wrapper{
color: #111 !important;
}
/* links/textos do header em preto */
.header a, .site-header a, .header-wrapper a{
color: #111 !important;
}
/* SVGs (boneco/caminhão/carrinho/lupa etc) */
.header svg, .site-header svg, .header-wrapper svg{
color: #111 !important; /* muitos ícones usam currentColor */
fill: none !important; /* remove preenchimento */
stroke: currentColor !important; /* contorno na cor do texto */
}
/* força paths/linhas do svg */
.header svg path,
.header svg circle,
.header svg rect,
.header svg line,
.header svg polyline,
.header svg polygon,
.site-header svg path,
.site-header svg circle,
.site-header svg rect,
.site-header svg line,
.site-header svg polyline,
.site-header svg polygon,
.header-wrapper svg path,
.header-wrapper svg circle,
.header-wrapper svg rect,
.header-wrapper svg line,
.header-wrapper svg polyline,
.header-wrapper svg polygon{
fill: none !important;
stroke: #111 !important;
stroke-width: 1.8px;
}
/* se algum ícone tiver partes com fill setado inline, tenta neutralizar */
.header svg [fill]:not([fill="none"]),
.site-header svg [fill]:not([fill="none"]),
.header-wrapper svg [fill]:not([fill="none"]){
fill: none !important;
}
/* ===== OFERTA RELÂMPAGO (seção de baixo) — NÃO pegar tela toda ===== */
/* deixa o fundo da seção transparente (pra aparecer o fundo do site) */
#shopify-section-template--23351491526949__featured_collection_LC6yGR{
background: transparent !important;
}
/* o “bloco” central que fica laranja */
#shopify-section-template--23351491526949__featured_collection_LC6yGR .container{
max-width: 1200px !important;
margin: 0 auto !important;
background: #ff5a00 !important; /* laranja só no miolo */
border-radius: 0 !important; /* quadrado */
overflow: hidden !important;
padding: 18px !important; /* respiro interno (ajuste se quiser) */
}
/* ===== OFERTA RELÂMPAGO (FAIXA DE CIMA) — LARGURA IGUAL AO BLOCO DE BAIXO ===== */
#shopify-section-template--23351491526949__custom_html_Vfg0gU{
background: transparent !important; /* mostra o fundo do site nas laterais */
}
/* o tema geralmente pinta a faixa aqui — então zeramos */
#shopify-section-template--23351491526949__custom_html_Vfg0gU .flash-header{
background: transparent !important; /* IMPORTANTE */
position: relative !important;
z-index: 1;
}
/* ===== BAMBUREY — Faixa do cronômetro com a mesma largura do bloco laranja ===== */
/* ID da seção do cronômetro (sua custom html) */
#shopify-section-template--23351491526949__custom_html_Vfg0gU{
background: transparent !important; /* mostra o fundo do site nas laterais */
}
/* zera padding lateral do tema só nessa seção */
#shopify-section-template--23351491526949__custom_html_Vfg0gU > .container{
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* o “miolo” (faixa) fica centralizado e com largura fixa */
#shopify-section-template--23351491526949__custom_html_Vfg0gU .flash-header{
max-width: 1200px !important;
margin: 0 auto !important;
background: #ff5a00 !important;
border-radius: 0 !important;
}
/* garante que a faixa ocupe 100% do miolo */
#shopify-section-template--23351491526949__custom_html_Vfg0gU .flash-header{
width: 100% !important;
}
/* ===== FAIXA OFERTA RELÂMPAGO (FORÇADO PELO ID DA SEÇÃO) ===== */
#shopify-section-template--23351491526949__custom_html_VfgQgU .flash-header{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:12px !important;
padding:12px 12px !important;
background:#ff6a00 !important;
border-radius:0 !important;
}
#shopify-section-template--23351491526949__custom_html_VfgQgU .flash-title{
color:#fff !important;
font-weight:900 !important;
font-size:26px !important;
}
#shopify-section-template--23351491526949__custom_html_VfgQgU .flash-timer span{
background:#000 !important;
color:#fff !important;
padding:4px 8px !important;
border-radius:6px !important;
font-size:13px !important;
margin-right:3px !important;
}
#shopify-section-template--23351491526949__custom_html_VfgQgU .flash-timer b{
color:#ff6a00 !important;
}
/* === AJUSTAR FAIXA OFERTA RELÂMPAGO === */
/* Centraliza e limita largura igual vitrine */
#shopify-section-template--23351491526949__custom_html_VfgQgU .container{
max-width: 1200px !important;
margin: 0 auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Diminui altura da faixa */
#shopify-section-template--23351491526949__custom_html_VfgQgU .flash-header{
padding: 6px 0 !important;
min-height: auto !important;
}
/* Remove espaço extra em volta */
#shopify-section-template--23351491526949__custom_html_VfgQgU{
margin: 0 !important;
padding: 0 !important;
}
/* === COLAR FAIXA OFERTA RELÂMPAGO NA SEÇÃO LARANJA === */
/* Remove espaço inferior da faixa do cronômetro */
#shopify-section-template--23351491526949__custom_html_VfgQgU{
margin-bottom: -32px !important;
padding-bottom: 0 !important;
}
/* Remove espaço superior da vitrine laranja */
#shopify-section-template--23351491526949__featured_collection_LC6yGR{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* === COLAR DEFINITIVO: OFERTA + VITRINE LARANJA === */
/* Remove espaço da section do cronômetro */
#shopify-section-template--23351491526949__custom_html_VfgQgU .section{
margin-bottom: -70px !important;
padding-bottom: 0 !important;
}
/* Remove espaço superior da vitrine */
#shopify-section-template--23351491526949__featured_collection_LC6yGR{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Remove a linha preta abaixo do header */
.container-fluid.color-line,
.color-line{
background: transparent !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
animation: none !important;
border: none !important;
}
body {
background: #ffffff !important;
}
/* DEGRADÊ APENAS NA ÁREA DO BANNER */
.shopify-section-header + section .container--flush {
position: relative;
background: linear-gradient(
180deg,
#FFD400 0%, /* amarelo forte no topo */
#FFE57A 35%, /* amarelo médio */
#FFF1C4 65%, /* amarelo bem claro */
#FFFFFF 100% /* branco */
);
padding-bottom: 60px;
}
/* Remove fundo preto e sublinhado dos títulos das seções */
.section__header-stack,
.section__header-stack *,
.section__header,
.section__header * {
background: transparent !important;
text-decoration: none !important;
box-shadow: none !important;
}
/* Caso o fundo venha de span ou strong */
.section__header-stack span,
.section__header-stack strong,
.section__header span,
.section__header strong {
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* Remove qualquer sublinhado forçado */
.section__header-stack a,
.section__header a {
text-decoration: none !important;
}
/* === CORREÇÃO: manter texto visível nos títulos das seções === */
.section__header,
.section__header-stack,
.section__header-stack * {
color: #111 !important; /* texto preto */
background-color: transparent !important;
text-decoration: none !important;
box-shadow: none !important;
}
/* se o tema usa mark/label/badge no título */
.section__header-stack mark,
.section__header-stack .highlight,
.section__header-stack .badge,
.section__header-stack span,
.section__header-stack strong {
color: #111 !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* === REMOVER sublinhado/linha dos títulos de seção (links) === */
.section__header a,
.section__header-stack a {
text-decoration: none !important;
box-shadow: none !important;
border-bottom: none !important;
background: transparent !important;
}
/* Remove linhas criadas por ::after / ::before */
.section__header a::after,
.section__header a::before,
.section__header-stack a::after,
.section__header-stack a::before {
content: none !important;
display: none !important;
}
/* Garante texto visível */
.section__header a,
.section__header-stack a,
.section__header *,
.section__header-stack * {
color: #111 !important;
opacity: 1 !important;
}
/* ===== REMOVE linha/sublinhado do título "Oferta Relâmpago" e similares ===== */
/* remove qualquer underline / sombra de link no header da seção */
.section__header .section__action-link,
.section__header .section__action-link:link,
.section__header .section__action-link:visited,
.section__header .section__action-link:hover,
.section__header .section__action-link:active{
text-decoration: none !important;
box-shadow: none !important;
border-bottom: 0 !important;
background: transparent !important;
}
/* mata a linha desenhada por pseudo-elementos */
.section__header .section__action-link::before,
.section__header .section__action-link::after,
.section__header .section__header-stack::before,
.section__header .section__header-stack::after,
.section__header .section__header-stack *::before,
.section__header .section__header-stack *::after{
content: none !important;
display: none !important;
}
/* garante que o texto/ícones continuem visíveis */
.section__header .section__action-link,
.section__header .section__action-link *{
color: inherit !important;
opacity: 1 !important;
}
/* ===== Remove efeitos herdados da classe .section nos títulos ===== */
.section .section__header-stack,
.section .section__header-stack h2,
.section .section__header-stack h3 {
background: transparent !important;
box-shadow: none !important;
border: none !important;
text-decoration: none !important;
}
/* Garante cor do título */
.section__header-stack h2,
.section__header-stack h3 {
color: #111 !important; /* pode trocar se quiser */
}
.section__header {
padding: 10px 0 !important;
}
/* ===== Forçar preto real no site ===== */
:root {
--color-text: #000000 !important;
--color-heading: #000000 !important;
--color-body-text: #000000 !important;
--color-base-text: #000000 !important;
}
/* Força textos principais */
body,
p,
span,
li,
a,
h1, h2, h3, h4, h5, h6 {
color: #000000 !important;
}
/* ===== Fundo do rodapé ===== */
footer,
.shopify-section-footer,
footer.footer {
background-color: #f2f2f2 !important; /* cinza claro */
}
/* Cinza um pouco mais escuro */
background-color: #eaeaea !important;
/* ================================
Rodapé cinza claro (FORÇADO)
================================ */
/* força o fundo direto no rodapé + seção */
#shopify-section-footer,
#shopify-section-footer footer,
#shopify-section-footer footer.footer,
footer.footer{
background-color: #f2f2f2 !important;
background-image: none !important;
}
/* alguns temas pintam o fundo num ::before/::after */
#shopify-section-footer footer.footer::before,
#shopify-section-footer footer.footer::after,
footer.footer::before,
footer.footer::after{
background: transparent !important;
background-image: none !important;
}
/* se o tema usa variável de background no rodapé */
#shopify-section-footer,
#shopify-section-footer footer.footer,
footer.footer{
--background: #f2f2f2 !important;
--footer-background: #f2f2f2 !important;
--footer-bg: #f2f2f2 !important;
}
#shopify-section-footer *{
background-color: transparent !important;
}
#shopify-section-footer{
background-color: #f2f2f2 !important;
}
#shopify-section-footer,
#shopify-section-footer footer,
#shopify-section-footer .footer,
#shopify-section-footer .footer__content,
#shopify-section-footer .footer__blocks,
#shopify-section-footer .footer__bottom{
background: #f2f2f2 !important;
background-image: none !important;
}
/* ===== FORÇAR TEXTO DO RODAPÉ PARA PRETO ===== */
#shopify-section-footer,
#shopify-section-footer * {
color: #000000 !important;
}
/* Links do rodapé */
#shopify-section-footer a {
color: #000000 !important;
text-decoration: none !important;
}
/* Títulos do rodapé */
#shopify-section-footer h1,
#shopify-section-footer h2,
#shopify-section-footer h3,
#shopify-section-footer h4,
#shopify-section-footer h5,
#shopify-section-footer h6 {
color: #000000 !important;
}
/* Ícones (WhatsApp, social, etc) */
#shopify-section-footer svg,
#shopify-section-footer i {
color: #000000 !important;
fill: #000000 !important;
}
/* Texto que vem em span (seu caso do contato) */
#shopify-section-footer span {
color: #000000 !important;
}
ground: #fff;
border-radius: 14px;
}
/* ===== Fundo degradê tipo Mercado Livre (SÓ HOME) ===== */
/* o Shopify geralmente coloca a classe assim no BODY */
body.template-index{
position: relative;
}
/* degradê */
body.template-index::before{
content:"";
position: fixed; /* fixed = não “some” com wrapper do tema */
left:0; right:0;
top:0;
height: 720px; /* aumenta se quiser descer mais */
z-index: 0;
pointer-events:none;
background: linear-gradient(
180deg,
#FFD400 0%,
#FFDD4D 45%,
#FFFFFF 100%
);
}
/* coloca o conteúdo por cima do degradê */
body.template-index > *{
position: relative;
z-index: 1;
}
/* =========================================
BAMBUREY — Degradê topo igual header
========================================= */
body.template-index{
position: relative;
}
body.template-index::before{
content:"";
position: absolute;
left:0;
right:0;
top:0;
height: 520px; /* pode ajustar se quiser */
z-index: 0;
pointer-events:none;
background: linear-gradient(
180deg,
#FFBE00 0%, /* amarelo exato do header */
#FFDD4D 45%, /* transição */
#FFFFFF 100%
);
}
body.template-index > *{
position: relative;
z-index: 1;
}
/* =========================================
BAMBUREY — Card flutuante (Tema Sabino Vision)
alvo: .product-item.product-item--vertical
========================================= */
body.template-index .product-item.product-item--vertical{
background: #fff;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 8px 22px rgba(0,0,0,.08);
transition: transform .18s ease, box-shadow .18s ease;
}
/* garante que o conteúdo interno respeite o arredondado */
body.template-index .product-item.product-item--vertical *{
border-radius: inherit;
}
/* hover “levanta” */
@media (hover:hover){
body.template-index .product-item.product-item--vertical:hover{
transform: translateY(-4px);
box-shadow: 0 14px 34px rgba(0,0,0,.14);
}
}
/* opcional: mais “respiro” entre os cards */
body.template-index .product-list{
gap: 22px;
}
/* === BANNER FULL WIDTH BAMBUREY === */
.section-slideshow,
.slideshow,
.banner,
.hero,
.image-banner {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.section-slideshow .page-width,
.slideshow .page-width,
.image-banner .page-width {
max-width: 100% !important;
padding: 0 !important;
}
/* Altura estilo Mercado Livre */
.image-banner,
.slideshow__slide {
min-height: 480px !important;
max-height: 520px !important;
}
/* =====================================================
BAMBUREY — Banner FULL WIDTH (100vw) estilo Mercado Livre
===================================================== */
/* 1) remove “caixa”/padding do container do banner */
.shopify-section:has(.slideshow),
.shopify-section:has(.banner),
.shopify-section:has(.image-banner),
.shopify-section:has(.hero) {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 2) força o banner a ocupar a tela toda */
.shopify-section:has(.slideshow) .page-width,
.shopify-section:has(.banner) .page-width,
.shopify-section:has(.image-banner) .page-width,
.shopify-section:has(.hero) .page-width {
max-width: none !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 3) remove borda arredondada e garante “corte” correto */
.slideshow,
.banner,
.image-banner,
.hero,
.slideshow * ,
.banner * ,
.image-banner * ,
.hero * {
border-radius: 0 !important;
}
/* 4) altura parecida com Mercado Livre (ajuste se quiser) */
.slideshow__slide,
.banner,
.image-banner {
min-height: 440px !important;
}
/* =====================================================
BAMBUREY — Slideshow FULL WIDTH (Sabino Vision)
===================================================== */
/* tira limite de largura do container do banner */
body.TemaSabinoVision.template-index .slideshow,
body.TemaSabinoVision.template-index .slideshow__slide,
body.TemaSabinoVision.template-index .slideshow__slide-inner,
body.TemaSabinoVision.template-index .slideshow__slide-inner--bottom-right,
body.TemaSabinoVision.template-index .slideshow__slide-inner--bottom-left,
body.TemaSabinoVision.template-index .slideshow__slide-inner--top-right,
body.TemaSabinoVision.template-index .slideshow__slide-inner--top-left {
max-width: none !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* garante que a imagem preencha toda a faixa */
body.TemaSabinoVision.template-index img.slideshow__image {
width: 100% !important;
height: auto !important;
display: block !important;
}
/* remove arredondamento (estilo Mercado Livre = reto) */
body.TemaSabinoVision.template-index .slideshow,
body.TemaSabinoVision.template-index .slideshow__slide-inner,
body.TemaSabinoVision.template-index .slideshow__slide {
border-radius: 0 !important;
overflow: hidden !important;
}
/* =====================================================
BAMBUREY — Fade/degradê no FINAL do banner (Sabino Vision)
(aplicado no container real do slide)
===================================================== */
/* garante referência para o pseudo-elemento */
body.TemaSabinoVision.template-index .slideshow__slide-inner,
body.TemaSabinoVision.template-index .aspect-ratio-hidden-phone {
position: relative !important;
overflow: hidden !important;
}
/* cria o degradê por cima do banner */
body.TemaSabinoVision.template-index .aspect-ratio-hidden-phone::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 160px; /* altura do fade */
pointer-events: none;
z-index: 9999; /* garante que fica por cima */
/* fade tipo Mercado Livre: transparente -> branco */
background: linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.30) 55%,
rgba(255,255,255,0.75) 80%,
#ffffff 100%
);
}
/* ===== ATALHOS ESTILO MERCADO LIVRE ===== */
.section-atalhos {
background: transparent !important;
padding-top: 0 !important;
}
.atalhos-wrapper {
max-width: 1200px;
margin: -60px auto 40px auto; /* sobe os cards sobre o banner */
padding: 0 16px;
display: flex;
gap: 16px;
overflow-x: auto;
}
.atalho-card {
flex: 0 0 190px;
background: #fff;
border-radius: 10px;
padding: 16px;
box-shadow: 0 10px 25px rgba(0,0,0,.12);
text-align: left;
}
/* ===============================
ATALHOS HOME - ESTILO MERCADO LIVRE
=============================== */
/* Remove fundo */
#shopify-section-bamburey_atalhos,
.section-atalhos,
.atalhos-home {
background: transparent !important;
padding-top: 0 !important;
}
/* Container principal */
#shopify-section-bamburey_atalhos .container,
.atalhos-home .container {
max-width: 1200px;
margin: -70px auto 40px auto; /* sobe no banner */
padding: 0 16px;
}
/* Lista de atalhos */
.atalhos-list,
.atalhos-wrapper {
display: flex !important;
gap: 16px;
overflow-x: auto;
padding: 10px 0;
}
/* Card individual */
.atalho-item,
.atalhos-item {
background: #fff;
min-width: 180px;
padding: 16px;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
transition: all .3s ease;
cursor: pointer;
}
/* Hover bonito */
.atalho-item:hover,
.atalhos-item:hover {
transform: translateY(-4px);
box-shadow: 0 14px 35px rgba(0,0,0,0.18);
}
/* =========================================
BAMBUREY — ATALHOS (igual Mercado Livre)
HTML: .br-atalhos__wrap > h2 + .br-atalhos__grid
========================================= */
/* seção sem faixa/altura extra */
.br-atalhos{
background: transparent !important;
padding: 0 !important;
position: relative;
z-index: 5;
}
/* container sobe pra colar no banner */
.br-atalhos__wrap{
max-width: 1200px;
margin: -70px auto 24px auto; /* ajuste -40 a -90 se quiser */
padding: 0 16px;
}
/* título alinhado como ML */
.br-atalhos__title{
margin: 0 0 12px 0 !important;
font-weight: 700;
}
/* a “fileira” de cards */
.br-atalhos__grid{
display: flex !important;
gap: 16px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
padding: 10px 2px 18px 2px !important;
scroll-snap-type: x mandatory;
}
/* cada atalho vira um card (pega o primeiro nível de itens dentro do grid) */
.br-atalhos__grid > *{
flex: 0 0 190px;
scroll-snap-align: start;
}
/* aparência do card */
.br-atalhos__grid > *{
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 26px rgba(0,0,0,.14);
overflow: hidden;
transition: .25s ease;
}
/* hover */
.br-atalhos__grid > *:hover{
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(0,0,0,.18);
}
/* === FIX: remove a faixa vazia acima dos atalhos === */
.br-atalhos{
background: transparent !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.br-atalhos__wrap{
margin-top: -70px !important; /* cola no banner */
margin-bottom: 18px !important;
}
/* se o tema estiver colocando espaço dentro de section.shopify-section */
#shopify-section-template--23351491526949__bamburey_atalhos_cmLEL3{
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.br-atalhos__grid > *{
background: #fff !important;
border-radius: 14px !important;
box-shadow: 0 10px 26px rgba(0,0,0,.14) !important;
}
/* =========================================
1) CORTA o “vazio/gradiente” que sobra do banner
(ajusta a seção do slideshow/banner da home)
========================================= */
/* remove padding/margem embaixo do banner */
.shopify-section:has(.slideshow),
.shopify-section:has(.banner),
.shopify-section:has(.image-with-text),
.shopify-section:has(.slideshow__slide){
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* se o seu banner tiver fundo/gradiente aplicado na section */
.shopify-section:has(.slideshow){
background: transparent !important;
}
/* =========================================
2) FAZ OS ATALHOS SUBIREM e “flutuarem” no banner
========================================= */
.br-atalhos{
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.br-atalhos__wrap{
margin-top: -85px !important; /* sobe em cima do banner */
margin-bottom: 18px !important;
padding: 0 16px !important;
}
/* cartões com cara de Mercado Livre */
.br-atalhos__grid > *{
background: #fff !important;
border-radius: 14px !important;
box-shadow: 0 10px 26px rgba(0,0,0,.14) !important;
}
#vistos-recentes{
scroll-margin-top: 160px;
}
/* ===============================
CARDS ABAIXO DO BANNER (ESTILO MERCADO LIVRE)
=============================== */
.atlhos-grid,
.atalhos,
.home-shortcuts,
.shortcuts-wrapper {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
gap: 16px !important;
margin-top: 25px !important;
padding: 0 10px !important;
}
/* Card individual */
.atlhos-grid > div,
.atalhos > div,
.home-shortcuts > div,
.shortcuts-wrapper > div {
background: #fff !important;
border-radius: 12px !important;
padding: 16px !important;
text-align: center !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
transition: 0.2s ease !important;
}
/* Hover */
.atlhos-grid > div:hover,
.atalhos > div:hover,
.home-shortcuts > div:hover,
.shortcuts-wrapper > div:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important;
}
/* Ícones */
.atlhos-grid img,
.atalhos img,
.home-shortcuts img,
.shortcuts-wrapper img {
width: 48px !important;
height: auto !important;
margin-bottom: 10px !important;
}
/* Título */
.atlhos-grid h3,
.atalhos h3,
.home-shortcuts h3,
.shortcuts-wrapper h3 {
font-size: 15px !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 6px !important;
}
/* Texto */
.atlhos-grid p,
.atalhos p,
.home-shortcuts p,
.shortcuts-wrapper p {
font-size: 13px !important;
color: #666 !important;
}
/* Botão */
.atlhos-grid a,
.atalhos a,
.home-shortcuts a,
.shortcuts-wrapper a {
display: inline-block !important;
margin-top: 8px !important;
padding: 6px 12px !important;
background: #3483fa !important;
color: #fff !important;
border-radius: 6px !important;
font-size: 12px !important;
text-decoration: none !important;
}
/* ===== CORRIGIR TEXTO DO CARD "VISTO RECENTEMENTE" ===== */
.recently-viewed,
.recently-viewed *,
.visto-recentemente,
.visto-recentemente * {
color: #333 !important;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* Forçar título aparecer */
.recently-viewed h3,
.recently-viewed h2,
.recently-viewed .title {
display: block !important;
color: #000 !important;
font-weight: 600 !important;
}
/* ===== Card "Visto recentemente" - título em cima ===== */
#vistos-recentes,
#vistos,
#vistos * {
color: #111 !important;
}
/* esse é o texto "Visto Recentemente" que hoje está embaixo */
#vistos-recentes + .product-recommendations__heading,
#vistos .section__title,
#vistos h2.section__title,
#vistos h2 {
display: block !important;
order: 0 !important;
margin: 0 0 10px 0 !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #111 !important;
}
/* ===== Organizar item do visto recentemente (foto > preço > nome) ===== */
#vistos .product-item,
#vistos .product-card,
#vistos .product-item__info,
#vistos .product-item__info-inner {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
/* imagem */
#vistos .product-item__image-wrapper,
#vistos .product-item__primary-image,
#vistos img {
order: 1 !important;
}
/* preço */
#vistos .price-list,
#vistos .price,
#vistos .product-item__price-list,
#vistos [class*="price"]{
order: 2 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-weight: 700 !important;
color: #111 !important;
margin-top: 6px !important;
}
/* título/nome do produto */
#vistos .product-item__title,
#vistos .product-card__title,
#vistos h3,
#vistos a[href*="/products/"]{
order: 3 !important;
margin-top: 6px !important;
color: #111 !important;
}
/* ===== Atalhos: Card Visto recentemente (título + foto + preço) ===== */
a.br-atalho--recent{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 8px !important;
}
/* topo do card */
a.br-atalho--recent .br-atalho__top{
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
}
/* título injetado */
a.br-atalho--recent .br-recent-title{
font-weight: 800 !important;
font-size: 13px !important;
color: #111 !important;
}
/* preço injetado */
a.br-atalho--recent .br-recent-price{
font-weight: 900 !important;
font-size: 14px !important;
color: #111 !important;
margin-top: 6px !important;
}
/* Texto em cima da imagem */
a.br-atalho.br-atalho--recent::before{
content: "Visto recentemente";
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
/* SEM FUNDO */
background: transparent !important;
/* TEXTO PRETO */
color: #000 !important;
font-size: 14px;
font-weight: 700;
padding: 0;
border-radius: 0;
z-index: 9999;
pointer-events: none;
/* leve sombra pra não sumir na imagem */
text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
/* Descer a imagem do produto no card "Visto recentemente" */
a.br-atalho.br-atalho--recent .br-atalho__icon{
margin-top: 50px !important;
}
/* ============================= */
/* RECENTES – mostrar nome abaixo da imagem */
/* ============================= */
a.br-atalho.br-atalho--recent{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
}
/* imagem */
a.br-atalho.br-atalho--recent .br-atalho__icon{
margin-top: 50px !important;
}
/* container de texto */
a.br-atalho.br-atalho--recent .br-atalho__text{
display: block !important;
width: 100%;
text-align: center;
margin-top: 8px;
}
/* nome do produto */
.br-atalho.br-atalho--recent .br-atalho__label{
display: block !important;
color: #000 !important;
font-weight: 600;
font-size: 13px;
line-height: 1.3;
}
/* Remover o texto "Visto Recentemente" que aparece embaixo (label) */
}
/* Mostrar nome do produto nos recentes */
.br-atalho.br-atalho--recent .br-atalho__label{
display: block !important;
color: #000 !important;
font-size: 13px;
font-weight: 600;
text-align: center;
margin-top: 6px;
}
/* Esconder APENAS quando o texto for "Visto recentemente" */
.br-atalho.br-atalho--recent .br-atalho__label:empty,
.br-atalho.br-atalho--recent .br-atalho__label[data-label="recent"]{
display: none !important;
}
/* Só some enquanto estiver carregando (evita piscada, mas não quebra) */
.br-atalho.br-atalho--recent.br-recent-loading .br-atalho__label{
opacity: 0 !important;
}
/* Quando carregar, aparece */
.br-atalho.br-atalho--recent.br-recent-loaded .br-atalho__label{
opacity: 1 !important;
}
/* =========================================================
BAMBUREY — FIX DEFINITIVO "Visto recentemente" (Atalhos)
- Mantém texto "Visto recentemente" SOMENTE em cima (overlay)
- Remove piscada do texto embaixo
- Mostra nome real do produto embaixo da imagem
========================================================= */
/* Card do recente como referência */
a.br-atalho.br-atalho--recent{
position: relative !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: center !important;
gap: 8px !important;
}
/* Texto em cima da imagem (overlay) */
a.br-atalho.br-atalho--recent::before{
content: "Visto recentemente";
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
background: transparent !important;
color: #000 !important;
font-size: 14px;
font-weight: 700;
padding: 0;
border-radius: 0;
z-index: 9999;
pointer-events: none;
text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
/* Desce a imagem para não encostar no overlay */
a.br-atalho.br-atalho--recent .br-atalho__icon{
margin-top: 50px !important;
}
/* Container do texto (embaixo) */
a.br-atalho.br-atalho--recent .br-atalho__text{
display: block !important;
width: 100% !important;
text-align: center !important;
margin-top: 8px !important;
}
/* ===== Anti-piscada: por padrão NÃO mostra o label até estar pronto ===== */
.br-atalho.br-atalho--recent .br-atalho__label{
display: block !important;
color: #000 !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
margin-top: 6px !important;
opacity: 0 !important;
transition: opacity .15s ease !important;
}
/* =========================================================
BAMBUREY — Visto recentemente (ATALHOS) | FIX SEM JS
- Mantém "Visto recentemente" só em cima (overlay)
- Mostra nome do produto embaixo (não some mais)
- Evita a piscada escondendo o label só nos primeiros ms
========================================================= */
a.br-atalho.br-atalho--recent{
position: relative !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: center !important;
gap: 8px !important;
}
/* Texto em cima da imagem (overlay) */
a.br-atalho.br-atalho--recent::before{
content: "Visto recentemente";
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
background: transparent !important;
color: #000 !important;
font-size: 14px;
font-weight: 700;
z-index: 9999;
pointer-events: none;
text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
/* Descer imagem para não encostar no overlay */
.br-atalho.br-atalho--recent .br-atalho__icon{
margin-top: 50px !important;
}
/* Texto embaixo (nome do produto) */
.br-atalho.br-atalho--recent .br-atalho__text{
display: block !important;
width: 100% !important;
text-align: center !important;
margin-top: 8px !important;
}
.br-atalho.br-atalho--recent .br-atalho__label{
display: block !important;
color: #000 !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
margin-top: 6px !important;
/* truque anti-piscada: esconde só no começo e volta sozinho */
opacity: 0 !important;
animation: brRecentReveal .01s linear forwards;
animation-delay: .55s; /* ajuste: 0.35s a 0.9s */
}
@keyframes brRecentReveal{
to { opacity: 1; }
}
/* Esconde o label até estar pronto */
.br-atalho__label {
visibility: hidden !important;
}
/* Mostra só quando o JS liberar */
.br-recent-ready .br-atalho__label {
visibility: visible !important;
}
/* ===== BAMBUREY — evita o “pisca” do texto no nome do produto ===== */
/* o nome fica invisível por um instante e aparece depois (já com o nome real) */
.br-atalho.br-atalho--recent .br-atalho__label{
opacity: 0 !important;
animation: brLabelShow .01s linear .6s forwards !important; /* aparece após 0,6s */
}
@keyframes brLabelShow{
to { opacity: 1; }
}
/* Anti-pisca: só atrasa o nome do produto (embaixo) */
.br-atalho.br-atalho--recent .br-atalho__label{
opacity: 0 !important;
animation: brLabelShow .01s linear .55s forwards !important;
}
@keyframes brLabelShow{
to { opacity: 1; }
}
/* ===== Remove espaço branco entre banner e Atalhos ===== */
#shopify-section-slideshow + .shopify-section{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Remove padding interno da seção Atalhos */
#shopify-section-slideshow + .shopify-section section{
padding-top: 0 !important;
}
/* ===== BR-ATALHOS: remove faixa bege + some título ===== */
/* remove fundo/gradiente da seção e zera espaçamentos que criam a faixa */
section.br-atalhos{
background: transparent !important;
background-image: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* garante que nenhum wrapper interno esteja criando a faixa */
.br-atalhos__wrap,
.br-atalhos__grid{
background: transparent !important;
background-image: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* remove o título Atalhos */
h2.br-atalhos__title{
display: none !important;
}
/* se ainda sobrar "respiro" acima dos cards, zera */
section.br-atalhos .br-atalhos__grid{
padding-top: 0 !important;
}
/* ==================================================
Degradê estilo Mercado Livre no final do banner
(funciona mesmo quando o ID não é #shopify-section-slideshow)
================================================== */
/* pega a seção do Shopify que contém o slideshow */
div[id^="shopify-section-"][id*="slideshow"]::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:220px; /* ajuste aqui */
pointer-events:none;
z-index:999;
background: linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.30) 45%,
rgba(255,255,255,0.70) 75%,
#ffffff 100%
) !important;
}
/* o degradê */
div[id^="shopify-section-"][id*="slideshow"]::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:180px; /* ajuste aqui */
pointer-events:none;
z-index:999;
background: linear-gradient(
to bottom,
rgba(255,212,0,0) 0%,
rgba(255,212,0,0.25) 35%,
rgba(255,212,0,0.55) 60%,
rgba(255,212,0,0.85) 80%,
#ffffff 100%
);
/* ==================================================
Cards "Atalhos" flutuando por cima do banner
================================================== */
/* garante que o banner fique atrás */
.slideshow{
position: relative !important;
z-index: 1 !important;
}
/* puxa a seção de atalhos pra cima (sobrepõe no banner) */
section.br-atalhos{
position: relative !important;
z-index: 20 !important;
margin-top: -120px !important; /* <<< ajuste aqui */
padding-top: 0 !important;
}
/* garante que a grade dos cards fique acima */
.br-atalhos__grid{
position: relative !important;
z-index: 30 !important;
}
/* dá “cara de flutuando” nos cards */
.br-atalhos__grid > *{
border-radius: 14px;
box-shadow: 0 14px 30px rgba(0,0,0,.12) !important;
}
/* ==================================================
Banner: mostrar imagem inteira (sem cortar)
================================================== */
.slideshow__image,
.slideshow img{
object-fit: contain !important; /* não corta */
background: #FFD400; /* fundo amarelo p/ sobras */
}
/* ==================================================
BANNER SEM CORTE - BAMBUREY
================================================== */
.slideshow .flickity-viewport{
height: auto !important;
}
.slideshow__slide,
.slideshow__slide-inner{
height: auto !important;
}
.slideshow__image,
.slideshow img{
width: 100% !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
display: block !important;
}
/* ===== BANNER/SLIDESHOW - NÃO CORTAR (imagem inteira) ===== */
/* quando é ![]()
*/
.slideshow img,
.slideshow__slide img,
.banner img,
.hero img,
.media img,
.banner__media img {
object-fit: contain !important;
width: 100% !important;
height: 100% !important;
}
/* evita altura fixa que força o “corte” */
.slideshow .media,
.slideshow__slide .media,
.banner .media,
.hero .media,
.banner__media {
height: auto !important;
}
/* quando o tema usa BACKGROUND-IMAGE em vez de ![]()
*/
.slideshow [style*="background-image"],
.banner [style*="background-image"],
.hero [style*="background-image"] {
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* ===== SOBREPOR CARDS NO BANNER ===== */
/* container geral da seção */
.br-atalhos {
position: relative;
z-index: 5;
margin-top: -120px !important; /* sobe os cards */
}
/* caixa dos cards */
.br-atalhos__wrap {
background: #ffffff;
border-radius: 16px;
padding: 20px 16px;
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
/* garante que o banner fique atrás */
.slideshow,
.banner,
.hero {
position: relative;
z-index: 1;
}
/* ===================================================
BAMBUREY — Cards sobrepostos ao banner (estilo ML)
=================================================== */
/* 1️⃣ Remove espaço entre banner e próxima seção */
body.template-index .shopify-section:first-of-type{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Se o tema usar container interno */
body.template-index .slideshow,
body.template-index .banner,
body.template-index .hero{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* 2️⃣ Sobe a seção dos atalhos */
body.template-index .br-atalhos{
position: relative !important;
z-index: 50 !important;
margin-top: -200px !important; /* <<< ajuste aqui: -80 / -95 / -110 */
}
/* 3️⃣ Estilo do “card branco” flutuante */
body.template-index .br-atalhos__wrap{
background: #fff !important;
border-radius: 18px !important;
box-shadow: 0 15px 40px rgba(0,0,0,.18) !important;
padding: 16px 10px !important;
}
/* 4️⃣ Garante banner atrás */
body.template-index .slideshow,
body.template-index .banner,
body.template-index .hero{
position: relative !important;
z-index: 1 !important;
}
/* 5️⃣ Mobile: sobe menos */
@media (max-width: 989px){
body.template-index .br-atalhos{
margin-top: -45px !important;
}
}
/* =========================================
BAMBUREY — Degradê de transição (banner -> seção)
========================================= */
/* garante que o banner aceite uma camada por cima */
body.TemaSabinoVision.template-index .shopify-section--slideshow,
body.TemaSabinoVision.template-index .slideshow,
body.TemaSabinoVision.template-index .banner,
body.TemaSabinoVision.template-index .hero{
position: relative !important;
overflow: visible !important;
}
/* camada de degradê no final do banner */
body.TemaSabinoVision.template-index .shopify-section--slideshow::after,
body.TemaSabinoVision.template-index .slideshow::after{
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: -1px !important; /* cola e “mata” a linha */
height: 110px !important; /* ajuste: 80 / 110 / 140 */
pointer-events: none !important;
z-index: 5 !important;
/* 🔥 Degradê (ajuste as cores conforme o seu banner) */
background: linear-gradient(
to bottom,
rgba(255, 199, 0, 0) 0%, /* transparente */
rgba(255, 199, 0, .35) 35%, /* amarelo suave */
#ffffff 100% /* branco da seção */
) !important;
}
/* ==================================================
BAMBUREY — Degradê de transição no final do banner
(aplicado no wrapper div.aspect-ratio do slideshow)
================================================== */
body.TemaSabinoVision.template-index .slideshow .aspect-ratio{
position: relative !important;
overflow: visible !important;
}
/* o degradê “saindo” do banner e indo para o branco */
body.TemaSabinoVision.template-index .slideshow .aspect-ratio::after{
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: -1px !important; /* mata a linha */
height: 140px !important; /* ajuste: 100 / 140 / 180 */
pointer-events: none !important;
z-index: 10 !important;
/* cor do seu banner (amarelo) -> branco */
background: linear-gradient(
to bottom,
rgba(255, 199, 0, 0) 0%,
rgba(255, 199, 0, .45) 40%,
#ffffff 100%
) !important;
}
/* ==================================================
BAMBUREY — Degradê real no banner (igual ML)
Atua direto na imagem do slideshow
================================================== */
/* prepara o container */
body.TemaSabinoVision.template-index .slideshow__image{
position: relative !important;
display: block !important;
}
/* camada de degradê sobre a imagem */
body.TemaSabinoVision.template-index .slideshow__image::after{
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 180px !important; /* ajuste: 120 / 180 / 220 */
pointer-events: none !important;
z-index: 5 !important;
background: linear-gradient(
to bottom,
rgba(255, 215, 0, 0) 0%,
rgba(255, 215, 0, .55) 45%,
#ffffff 100%
) !important;
}
/* remove fundo branco da seção dos cards */
body.TemaSabinoVision.template-index section.br-atalhos{
--br-bg: transparent !important;
background: transparent !important;
}
/* ==========================================
BAMBUREY — Degradê no final do banner (ML)
========================================== */
/* container do banner (onde o tema define a altura) */
body.TemaSabinoVision.template-index .slideshow .aspect-ratio{
position: relative !important;
overflow: hidden !important; /* segura o degradê dentro do banner */
}
/* degradê sobre a parte de baixo do banner */
body.TemaSabinoVision.template-index .slideshow .aspect-ratio::after{
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 180px !important; /* ajuste: 120 / 180 / 220 */
pointer-events: none !important;
z-index: 999 !important;
background: linear-gradient(
to bottom,
rgba(255, 215, 0, 0) 0%,
rgba(255, 215, 0, .65) 45%,
#ffffff 100%
) !important;
}
/* remove a “linha”/espaço entre banner e a seção seguinte */
body.TemaSabinoVision.template-index .shopify-section--slideshow{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
/* deixa o fundo da seção dos cards transparente (pra degradê aparecer bonito) */
body.TemaSabinoVision.template-index section.br-atalhos{
--br-bg: transparent !important;
background: transparent !important;
}
/* ==========================================
BAMBUREY — Faixa de transição estilo ML
========================================== */
/* remove espaço padrão do banner */
body.TemaSabinoVision.template-index .shopify-section--slideshow{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* cria a faixa de degradê */
body.TemaSabinoVision.template-index .shopify-section--slideshow + .shopify-section{
position: relative !important;
margin-top: 0 !important;
}
/* pseudo faixa */
body.TemaSabinoVision.template-index .shopify-section--slideshow + .shopify-section::before{
content:"" !important;
position:absolute !important;
top:-180px !important; /* sobe sobre o banner */
left:0 !important;
right:0 !important;
height:180px !important;
z-index:1 !important;
pointer-events:none !important;
background: linear-gradient(
to bottom,
rgba(255,199,0,0) 0%,
rgba(255,199,0,.7) 50%,
#ffffff 100%
) !important;
}
/* garante que os cards fiquem acima */
body.TemaSabinoVision.template-index section.br-atalhos{
position: relative !important;
z-index: 5 !important;
background: transparent !important;
}
/* ==================================================
BAMBUREY — Degradê de transição (igual Mercado Livre)
Faz o degradê nascer nos CARDS e subir para o banner
================================================== */
/* Seção dos cards/atalhos: fica transparente para aparecer o degradê */
body.TemaSabinoVision.template-index section.br-atalhos{
--br-bg: transparent !important;
background: transparent !important;
position: relative !important;
z-index: 50 !important;
margin-top: -160px !important; /* sobe os cards */
padding-top: 0 !important;
}
/* O degradê que “invade” o banner */
body.TemaSabinoVision.template-index section.br-atalhos::before{
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: -180px !important; /* sobe para cima (em cima do banner) */
height: 180px !important; /* altura do efeito */
pointer-events: none !important;
z-index: 1 !important;
/* cor do seu banner -> branco */
background: linear-gradient(
to bottom,
rgba(255,199,0,0) 0%,
rgba(255,199,0,.70) 55%,
#ffffff 100%
) !important;
}
/* Garante que o “card branco” fique acima do degradê */
body.TemaSabinoVision.template-index section.br-atalhos .br-atalhos__wrap{
position: relative !important;
z-index: 2 !important;
background: #fff !important;
border-radius: 18px !important;
box-shadow: 0 16px 40px rgba(0,0,0,.18) !important;
}
/* Remove qualquer “linha”/borda que o tema coloque no topo da seção */
body.TemaSabinoVision.template-index section.br-atalhos{
border-top: 0 !important;
}
:root{--ml:#f5f5f5}#MainContent>.shopify-section:first-child{position:relative}#MainContent>.shopify-section:first-child:after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(#0000,var(--ml));pointer-events:none}#MainContent>.shopify-section:nth-child(2){background:var(--ml);margin-top:-40px;padding-top:40px;position:relative;z-index:2;border-top:0}
.slideshow{position:relative;overflow:hidden}
.slideshow:after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:100px;
background:linear-gradient(to bottom,transparent,#f5f5f5);
z-index:3;
pointer-events:none
}
#MainContent>.shopify-section:nth-child(2){
background:#f5f5f5;
margin-top:-50px;
padding-top:50px;
position:relative;
z-index:5;
border-top:0
}
/* ==================================================
BAMBUREY — AJUSTE DOS CARDS (ATALHOS) - SEM MEXER EM CORES
================================================== */
/* 1) A seção dos atalhos sobe e fica por cima do banner */
body.template-index section.br-atalhos{
position: relative !important;
z-index: 50 !important;
margin-top: -120px !important; /* ajuste fino: -80 / -100 / -120 / -140 */
padding-top: 0 !important;
}
/* 2) O “card branco” (wrap) com sombra, sem alterar cor do site */
body.template-index section.br-atalhos .br-atalhos__wrap{
border-radius: 18px !important;
box-shadow: 0 15px 40px rgba(0,0,0,.18) !important;
overflow: hidden !important;
}
/* 3) Grade horizontal com scroll suave */
body.template-index section.br-atalhos .br-atalhos__grid{
display: flex !important;
gap: 16px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 10px 12px 18px 12px !important;
}
/* 4) Cada card com largura fixa (estilo ML) */
body.template-index section.br-atalhos .br-atalhos__grid > *{
flex: 0 0 190px !important;
}
/* 5) Mobile: sobe menos */
@media (max-width: 989px){
body.template-index section.br-atalhos{
margin-top: -45px !important;
}
}
/* ==================================================
BAMBUREY — CARDS (ATALHOS) ESTILO MERCADO LIVRE
================================================== */
/* Faz a seção subir e ficar sobre o banner */
body.template-index .br-atalhos{
position: relative !important;
z-index: 20 !important;
margin-top: -140px !important; /* ajuste fino */
}
/* Container branco com sombra */
body.template-index .br-atalhos__wrap{
background: #fff !important;
border-radius: 18px !important;
box-shadow: 0 12px 35px rgba(0,0,0,.18) !important;
padding: 12px 0 !important;
}
/* Grade horizontal */
body.template-index .br-atalhos__grid{
display: flex !important;
gap: 14px !important;
overflow-x: auto !important;
padding: 12px 16px 18px !important;
scroll-behavior: smooth;
}
/* Cada card */
body.template-index .br-atalho{
flex: 0 0 190px !important;
background: #fff !important;
border-radius: 14px !important;
box-shadow: 0 6px 18px rgba(0,0,0,.15) !important;
padding: 14px !important;
text-align: center;
transition: transform .2s ease, box-shadow .2s ease;
}
/* Hover (desktop) */
@media (hover:hover){
body.template-index .br-atalho:hover{
transform: translateY(-4px);
box-shadow: 0 12px 26px rgba(0,0,0,.22) !important;
}
}
/* Mobile: sobe menos */
@media (max-width: 989px){
body.template-index .br-atalhos{
margin-top: -70px !important;
}
body.template-index .br-atalho{
flex: 0 0 150px !important;
}
}
.br-atalhos{margin-top:-140px!important;position:relative!important;z-index:999!important}.br-atalhos__wrap{background:#fff!important;border-radius:18px!important;box-shadow:0 12px 35px rgba(0,0,0,.18)!important}.br-atalhos__grid{display:flex!important;gap:14px!important;overflow:auto!important;padding:12px 16px 18px!important}.br-atalho{flex:0 0 190px!important;background:#fff!important;border-radius:14px!important;box-shadow:0 6px 18px rgba(0,0,0,.15)!important}
/* =========================================================
BAMBUREY — Banner FULL WIDTH + transição suave (SEM mudar cores)
========================================================= */
/* 1) Tira o “limite” (caixa) do banner e deixa 100vw */
body.template-index .shopify-section:has(.slideshow),
body.template-index .shopify-section:has(.banner),
body.template-index .shopify-section:has(.image-banner),
body.template-index .shopify-section:has(.hero){
padding-left: 0 !important;
padding-right: 0 !important;
}
/* o container interno do tema costuma limitar a largura */
body.template-index .shopify-section:has(.slideshow) .page-width,
body.template-index .shopify-section:has(.banner) .page-width,
body.template-index .shopify-section:has(.image-banner) .page-width,
body.template-index .shopify-section:has(.hero) .page-width{
max-width: none !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 2) Remove espaço/linha grossa entre banner e seção seguinte */
body.template-index .shopify-section:has(.slideshow){
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
/* se a seção seguinte tiver borda/linha no topo */
body.template-index .shopify-section:has(.slideshow) + .shopify-section{
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
/* 3) Transição suave (degradê) no final do banner */
body.template-index .shopify-section:has(.slideshow){
position: relative !important;
overflow: visible !important;
}
body.template-index .shopify-section:has(.slideshow)::after{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:-1px !important;
height:110px !important; /* ajuste: 80 / 110 / 140 */
pointer-events:none !important;
z-index:5 !important;
/* fade suave (não muda suas cores do site) */
background: linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.35) 55%,
#ffffff 100%
) !important;
}
/* mata linha/“shadow” que alguns temas desenham no banner */
body.template-index .shopify-section:has(.slideshow) *,
body.template-index .shopify-section:has(.slideshow)::before{
box-shadow: none !important;
}
/* =========================================================
HOME — Banner full width + transição suave com a seção de baixo
(usa 1ª seção = banner; 2ª seção = atalhos/conteúdo)
========================================================= */
/* 1) BANNER (primeira seção): full width real (100vw) */
body.template-index #MainContent > .shopify-section:first-child{
margin: 0 !important;
padding: 0 !important;
position: relative !important;
overflow: visible !important;
}
body.template-index #MainContent > .shopify-section:first-child .page-width,
body.template-index #MainContent > .shopify-section:first-child .container,
body.template-index #MainContent > .shopify-section:first-child .container--flush{
max-width: none !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 2) Mata a “linha/borda” que fica entre o banner e a seção seguinte */
body.template-index #MainContent > .shopify-section:first-child{
border-bottom: 0 !important;
box-shadow: none !important;
}
body.template-index #MainContent > .shopify-section:nth-child(2){
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
/* 3) Transição suave (fade) no final do banner para não ficar a divisão grossa */
body.template-index #MainContent > .shopify-section:first-child::after{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:-1px !important;
height:110px !important; /* ajuste: 80 / 110 / 140 */
pointer-events:none !important;
z-index:5 !important;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%) !important;
}
/* =========================================================
BAMBUREY — BANNER (ID REAL) full width + fade suave embaixo
========================================================= */
#shopify-section-template--23351491526949__slideshow-f9ace-0452a82c1c45{
position: relative !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
overflow: visible !important;
}
/* força a “caixa” interna do tema a virar 100vw */
#shopify-section-template--23351491526949__slideshow-f9ace-0452a82c1c45 .page-width,
#shopify-section-template--23351491526949__slideshow-f9ace-0452a82c1c45 .container,
#shopify-section-template--23351491526949__slideshow-f9ace-0452a82c1c45 .container--flush{
max-width: none !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* remove qualquer “linha”/divisão do tema no final do banner */
#shopify-section-template--23351491526949__slideshow-f9ace-0452a82c1c45 *{
border-bottom: 0 !important;
box-shadow: none !important;
}
/* degradê suave entre banner e seção de baixo (tira a divisão grosseira) */
#shopify-section-template--23351491526949__slideshow-f9ace-0452a82c1c45::after{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:-1px !important;
height:120px !important; /* ajuste: 80 / 120 / 160 */
pointer-events:none !important;
z-index:9 !important;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%) !important;
}
/* =========================================================
Seção logo abaixo do banner: encosta e remove borda superior
========================================================= */
#shopify-section-template--23351491526949__slideshow-f9ace-0452a82c1c45 + .shopify-section{
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
box-shadow: none !important;
}
/* =========================================================
BAMBUREY — Degradê branco SUBINDO (seção de baixo -> banner)
alvo: seção imediatamente após o slideshow (ID real do seu banner)
========================================================= */
#shopify-section-template--23351491526949__slideshow-f9ace-0452a82c1c45 + .shopify-section{
position: relative !important;
z-index: 2 !important; /* fica acima do banner */
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
box-shadow: none !important;
}
/* faixa de degradê que “sobe” e invade o banner */
#shopify-section-template--23351491526949__slideshow-f9ace-0452a82c1c45 + .shopify-section::before{
content:"" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
/* sobe para cima (invade o banner) */
top: -140px !important; /* ajuste: -90 / -120 / -160 */
height: 140px !important; /* ajuste junto com o top */
pointer-events: none !important;
z-index: 5 !important;
background: linear-gradient(
to top,
#ffffff 0%,
rgba(255,255,255,0.85) 45%,
rgba(255,255,255,0) 100%
) !important;
}
/* ===================================================
BAMBUREY — Cards sobrepostos ao banner (FORÇADO)
=================================================== */
/* Banner: fica como base */
#shopify-section-template--23351491526949__slideshow-f9ace-0452a82c1c45{
position: relative !important;
z-index: 1 !important;
}
/* Seção dos atalhos/cards */
section.br-atalhos{
position: relative !important;
z-index: 50 !important;
/* <<< AQUI CONTROLA O QUANTO SOBE >>> */
margin-top: -160px !important; /* teste: -120 / -140 / -180 */
}
/* Caixa branca dos cards */
.br-atalhos__wrap{
background: #fff !important;
border-radius: 18px !important;
padding: 18px 14px !important;
box-shadow: 0 15px 35px rgba(0,0,0,.15) !important;
}
/* Mobile: sobe menos */
@media (max-width: 989px){
section.br-atalhos{
margin-top: -70px !important;
}
}
/* =====================================
BAMBUREY — Degradê branco no banner
===================================== */
/* Base da seção */
.shopify-section:has(.slideshow) {
position: relative !important;
overflow: hidden !important;
}
/* Garante que o slideshow fique abaixo */
.shopify-section:has(.slideshow) .slideshow {
position: relative;
z-index: 1;
}
/* Degradê por cima */
.shopify-section:has(.slideshow)::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 180px;
background: linear-gradient(
to bottom,
rgba(255,255,255,0),
#ffffff
);
pointer-events: none;
z-index: 3; /* MAIS ALTO que o banner */
}
/* =====================================
BAMBUREY — Degradê branco no banner (Flickity)
===================================== */
/* o banner vira referência pro ::after */
body .slideshow{
position: relative !important;
overflow: hidden !important;
}
/* garante que a imagem fique abaixo do degradê */
body .slideshow .flickity-viewport,
body .slideshow .flickity-slider,
body .slideshow .slideshow__slide{
position: relative !important;
z-index: 1 !important;
}
/* DEGRADÊ por cima do banner */
body .slideshow::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 180px !important;
background: linear-gradient(to bottom, rgba(255,255,255,0), #fff) !important;
pointer-events: none !important;
z-index: 9 !important;
}
/* =====================================
BAMBUREY — Degradê branco no banner (Flickity)
===================================== */
/* o banner vira referência pro ::after */
body .slideshow{
position: relative !important;
overflow: hidden !important;
}
/* garante que a imagem fique abaixo do degradê */
body .slideshow .flickity-viewport,
body .slideshow .flickity-slider,
body .slideshow .slideshow__slide{
position: relative !important;
z-index: 1 !important;
}
/* DEGRADÊ por cima do banner */
body .slideshow::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 400px !important;
background: linear-gradient(to bottom, rgba(255,255,255,0), #fff) !important;
pointer-events: none !important;
z-index: 9 !important;
}
/* =====================================
BAMBUREY — Fundo cinza claro geral
===================================== */
body {
background: #f7f7f7 !important;
background-color: #f7f7f7 !important;
}
/* =====================================
BAMBUREY — Layout Marketplace Completo
===================================== */
/* FUNDO GERAL */
html, body{
background:#f7f7f7 !important;
}
/* CONTAINERS PRINCIPAIS → transparentes */
#MainContent,
main,
.main-content,
.shopify-section,
.section,
.page-width,
.container{
background: transparent !important;
}
/* CARDS → brancos, com leve sombra */
.card,
.product-item,
.product-card,
.collection-list__item,
.multicolumn-card,
.recently-viewed__item,
.br-atalho{
background:#ffffff !important;
border-radius:12px;
box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
/* BANNER */
section[data-section-type="slideshow"]{
position:relative !important;
}
.slideshow__slide-inner{
position:relative !important;
overflow:hidden !important;
}
/* IMAGEM ABAIXO */
.slideshow__slide-inner img,
.slideshow__slide-inner .aspect-ratio{
position:relative !important;
z-index:1 !important;
}
/* DEGRADÊ → casa com fundo */
.slideshow__slide-inner::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:280px;
background:linear-gradient(
to bottom,
rgba(255,255,255,0),
#f7f7f7
);
pointer-events:none;
z-index:9;
}
/* SEÇÃO LOGO ABAIXO DO BANNER → sobe levemente */
section[data-section-type="slideshow"] + .shopify-section{
margin-top:-80px;
position:relative;
z-index:20;
}
/* =====================================
BAMBUREY — BANNER INTEGRADO DEFINITIVO
===================================== */
/* FUNDO PADRÃO MARKETPLACE */
html, body{
background:#f5f5f5 !important;
}
/* Remove branco dos containers */
#MainContent,
main,
.main-content,
.shopify-section,
.section,
.page-width,
.container{
background: transparent !important;
}
/* CARDS */
.card,
.product-card,
.product-item,
.collection-list__item,
.br-atalho,
.recently-viewed__item{
background:#fff !important;
border-radius:14px;
box-shadow:0 2px 10px rgba(0,0,0,0.07);
}
/* BANNER */
section[data-section-type="slideshow"]{
position:relative !important;
z-index:1;
}
.slideshow__slide-inner{
position:relative !important;
overflow:hidden !important;
}
/* IMAGEM */
.slideshow__slide-inner img,
.slideshow__slide-inner .aspect-ratio{
position:relative !important;
z-index:1;
}
/* DEGRADÊ DE INTEGRAÇÃO */
.slideshow__slide-inner::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:300px;
background:linear-gradient(
to bottom,
rgba(255,255,255,0),
#f5f5f5
);
pointer-events:none;
z-index:9;
}
/* SOBE A PRIMEIRA SEÇÃO */
section[data-section-type="slideshow"] + .shopify-section{
margin-top:-100px;
position:relative;
z-index:20;
}
/* ==================================================
BAMBUREY — Banner integrado REAL (Sabino Vision)
alvo: .slideshow__slide-inner
================================================== */
/* garante referência */
.slideshow__slide-inner{
position: relative !important;
overflow: hidden !important;
}
/* degradê no final do banner */
.slideshow__slide-inner::after{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
height:160px !important; /* ajuste: 120 / 160 / 200 */
pointer-events:none !important;
z-index:10 !important;
/* banner → fundo da página */
background: linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.4) 45%,
#f7f7f7 100%
) !important;
}
/* remove linha/divisão abaixo do banner */
.shopify-section--slideshow{
margin-bottom:0 !important;
padding-bottom:0 !important;
border-bottom:0 !important;
}
/* Degradê ligando o banner aos atalhos */
.br-atalhos{
position: relative;
overflow: visible;
}
.br-atalhos::before{
content: "";
position: absolute;
left: 0;
right: 0;
top: -140px; /* sobe para dentro do banner */
height: 140px;
pointer-events: none;
z-index: 1;
background: linear-gradient(
to bottom,
rgba(255,215,0,0) 0%,
rgba(255,215,0,0.35) 45%,
#ffffff 100%
);
}
.br-atalhos__wrap{
position: relative;
z-index: 2;
}
/* ============================
BAMBUREY — remover linha/gap entre banner e seção de baixo
============================ */
/* banner/slideshow: sem borda, sem sombra, sem espaço embaixo */
body.template-index section[data-section-type="slideshow"],
body.template-index .shopify-section--slideshow,
body.template-index .shopify-section:has(.slideshow){
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
/* tudo dentro do banner sem sombra/borda “fantasma” */
body.template-index section[data-section-type="slideshow"] *{
border-bottom: 0 !important;
box-shadow: none !important;
}
/* seção logo abaixo do banner: sem borda e sem “respiro” no topo */
body.template-index section[data-section-type="slideshow"] + .shopify-section,
body.template-index .shopify-section--slideshow + .shopify-section{
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
box-shadow: none !important;
}
/* se ainda sobrar 1–2px de “fresta”, puxa a seção de baixo levemente */
body.template-index section[data-section-type="slideshow"] + .shopify-section{
margin-top: -2px !important;
}
/* extra: matar linha vinda do flickity/slide-inner */
body.template-index .slideshow__slide-inner,
body.template-index .slideshow .flickity-viewport{
border: 0 !important;
box-shadow: none !important;
}
/* =========================================================
BAMBUREY — TIRAR LINHA/DIVISÃO ENTRE BANNER E ATALHOS
(usa o ID real dos Atalhos que aparece no seu DevTools)
========================================================= */
/* 1) Mata borda/sombra do slideshow/banner (fim do banner) */
body.template-index section[data-section-type="slideshow"],
body.template-index .shopify-section--slideshow,
body.template-index .shopify-section:has(.slideshow){
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
/* 2) Mata borda/sombra “fantasma” do flickity/slide-inner */
body.template-index .slideshow,
body.template-index .slideshow .flickity-viewport,
body.template-index .slideshow__slide-inner{
border: 0 !important;
box-shadow: none !important;
margin-bottom: 0 !important;
}
/* 3) Zera o topo da seção de ATALHOS (a sua seção real) */
#shopify-section-template--23351491526949__bamburey_atalhos_cmLEL3{
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* 4) Zera espaçamento dentro da seção Atalhos */
#shopify-section-template--23351491526949__bamburey_atalhos_cmLEL3 section.br-atalhos{
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
background: transparent !important;
}
/* Se algum CSS antigo criou faixa/linha via pseudo-elemento, desliga */
body.template-index section[data-section-type="slideshow"]::before,
body.template-index section[data-section-type="slideshow"]::after,
body.template-index .slideshow::before,
body.template-index .slideshow::after{
content: none !important;
display: none !important;
}
/* ===== BAMBUREY — Compactar Cabeçalho ===== */
/* Header principal */
header.header,
.header,
.site-header {
padding: 4px 0 !important;
min-height: 60px !important;
height: auto !important;
}
/* Container interno */
.header__inner,
.header__wrapper,
.header__container,
.header__content,
.header-main {
padding: 0 !important;
min-height: auto !important;
}
/* Linha do topo */
.header-top,
.header__top {
padding: 2px 0 !important;
}
/* Logo */
.header__logo img,
.site-logo img,
.logo img {
max-height: 38px !important;
width: auto !important;
}
/* Barra de busca */
.header__search,
.search-bar,
.search {
margin: 0 !important;
padding: 2px 6px !important;
}
/* Menu / ícones */
.header-icons,
.header__icons,
.header-actions {
margin: 0 !important;
padding: 0 !important;
}
/* === REMOVE ESPAÇO ENTRE BANNER E PRÓXIMA SEÇÃO === */
.shopify-section {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.shopify-section--slideshow,
.shopify-section[data-section-type="slideshow"],
.shopify-section[data-section-type="image-banner"],
.shopify-section.section--slideshow {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Remove espaço da seção logo abaixo */
.shopify-section + .shopify-section {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Remove fundo branco escondido */
body {
background: #fff !important;
}
/* === BAMBUREY: REMOVE ESPAÇO INTERNO DO SLIDESHOW === */
/* Remove padding da seção */
.shopify-section--slideshow,
.shopify-section[data-section-type="slideshow"] {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Remove padding interno do container */
.shopify-section--slideshow .container,
.shopify-section[data-section-type="slideshow"] .container {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Remove espaço do slider */
.slideshow,
.slideshow__slide,
.slideshow__container {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Puxa próxima seção pra cima */
.shopify-section + .shopify-section {
margin-top: -25px !important;
}
/* ===== BAMBUREY — REMOVER LINHA/GAP DO BANNER ===== */
body.template-index section[data-section-type="slideshow"],
body.template-index .shopify-section--slideshow{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
body.template-index section[data-section-type="slideshow"] + .shopify-section,
body.template-index .shopify-section--slideshow + .shopify-section{
margin-top: -40px !important; /* ajuste: -20 / -30 / -40 */
padding-top: 0 !important;
border-top: 0 !important;
}
/* =========================================================
BAMBUREY — HOME: 1 ÚNICO DEGRADÊ BRANCO (universal)
Desliga degradês antigos do banner e remove o gap
========================================================= */
/* 1) Desliga QUALQUER degradê antigo no banner/slideshow (HOME) */
body.template-index .shopify-section--slideshow::before,
body.template-index .shopify-section--slideshow::after,
body.template-index section[data-section-type="slideshow"]::before,
body.template-index section[data-section-type="slideshow"]::after,
body.template-index .slideshow::before,
body.template-index .slideshow::after,
body.template-index .slideshow__slide-inner::before,
body.template-index .slideshow__slide-inner::after,
body.template-index div[id^="shopify-section-"][id*="slideshow"]::before,
body.template-index div[id^="shopify-section-"][id*="slideshow"]::after,
body.template-index #MainContent > .shopify-section:first-child::before,
body.template-index #MainContent > .shopify-section:first-child::after{
content: none !important;
display: none !important;
}
/* 2) Remove espaço/linha entre banner e a seção seguinte */
body.template-index section[data-section-type="slideshow"],
body.template-index .shopify-section--slideshow{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
body.template-index section[data-section-type="slideshow"] + .shopify-section,
body.template-index .shopify-section--slideshow + .shopify-section{
margin-top: -18px !important; /* ajuste fino: -10 / -18 / -25 */
padding-top: 0 !important;
border-top: 0 !important;
}
/* 3) Aplica o degradê branco universal (apenas 1) */
body.template-index .slideshow .aspect-ratio{
position: relative !important;
overflow: hidden !important;
}
body.template-index .slideshow .aspect-ratio::after{
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 140px !important; /* ajuste: 110 / 140 / 180 */
pointer-events: none !important;
z-index: 9 !important;
background: linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.35) 55%,
#ffffff 100%
) !important;
}
/* ================================
CORRIGE CORTE E DIVISAO DO BANNER
================================ */
/* Banner principal */
.shopify-section.section--slideshow,
.shopify-section[data-section-type="slideshow"],
.shopify-section[data-section-type="image-banner"]{
position: relative !important;
overflow: visible !important;
background: transparent !important;
}
/* Remove altura fixa */
.shopify-section.section--slideshow *,
.shopify-section[data-section-type="slideshow"] *,
.shopify-section[data-section-type="image-banner"] *{
max-height: none !important;
}
/* Faz a imagem aparecer inteira */
.shopify-section.section--slideshow img,
.shopify-section[data-section-type="slideshow"] img,
.shopify-section[data-section-type="image-banner"] img{
width: 100% !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
}
/* Remove fundo branco da seção seguinte */
.shopify-section + .shopify-section{
background: transparent !important;
}