/* MODERN THEME TOKENS - derivados das cores configuradas no admin */ :root{ --modern-primary:#; --modern-primary-hover:#; --modern-on-primary:#; --modern-on-primary-hover:#; --modern-ink:#; --modern-surface:#; --modern-surface-soft:color-mix(in srgb, # 5%, #); --modern-surface-strong:color-mix(in srgb, # 10%, #); --modern-border:color-mix(in srgb, # 14%, transparent); --modern-border-strong:color-mix(in srgb, # 35%, transparent); --modern-muted:color-mix(in srgb, # 62%, transparent); --modern-shadow:color-mix(in srgb, # 14%, transparent); --modern-shadow-strong:color-mix(in srgb, # 22%, transparent); } .ch{color:# !important;} .cd{color:# !important;} .bd{color:# !important;} .bh{color:# !important;} /*TOP LOGO*/ #top {background: # !important;padding-bottom:17px; min-height:100px} /*SLIDE CONTROLS*/ .carousel-control.left, .carousel-control.right { filter: alpha(opacity=10); opacity: 1; background-image: none; background-repeat: no-repeat; text-shadow: none; color: # !important; } /* LOGIN */ .panel-custom{ background: # !important; color: #000 !important; } /* BG */ .bg-custom{ background: # !important; } /* FOOTER CONDICOES */ #footer-condicoes{ background: #; color: #; padding: 15px; } #footer-company{ background: #; color: #; padding: 15px; } /* BTN */ .btn-custom{ background: # !important; color: # !important; } .btn-custom:hover{ color: # !important; } .btn-default{ background: # !important; color:# !important; } .btn-default:hover{ background: # !important; } /* ALERT-CUSTOM BG */ .alert-custom{ font-size: 18px !important; background: #; color: #; padding:6px !important; } /*LABEL-SUCCESS*/ .label-success{ background:# !important;} /* CORES SLIDER RANGE PREÇO */ .slider-handle {background-color: # !important;} .slider-handle {background: # !important;} .slider-track{background-color: # !important;} .slider-track{background: # !important;} .slider-selection{background-color: # !important;} .slider-selection{background: # !important;} /*FIM CORES SLIDER RANGE PREÇO */ /*CORES TOOLTIPS HOVER BOOTSTRAP*/ .tooltip-inner { max-width: 200px; padding: 3px 8px; color: #; text-align: center; text-decoration: none; background-color: #; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-color: #; border-width: 5px 5px 0; } .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-right-color: #; border-width: 5px 5px 5px 0; } .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-left-color: #; border-width: 5px 0 5px 5px; } .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-bottom-color: #; border-width: 0 5px 5px; } /*FIM CORES TOOLTIPS HOVER BOOTSTRAP*/ .box-item:hover{ -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; box-shadow:0 0 0 0px # inset; border-bottom: 2px solid # !important; } .bootstrap-select.btn-group .no-results { background: # !important; } .bootstrap-select.btn-group .dropdown-menu .notify { background: # !important; } .bootstrap-select .selected a{ background: # !important; } /*CSS PRELOADER CARREGAR/ORDENAR ITENS*/ #movingBallG{ position:relative; width:256px; height:20px; margin:0 auto !important; } .movingBallLineG{ position:absolute; left:0px; top:8px; height:4px; width:256px; background-color:#; } .movingBallG{ background-color:#; position:absolute;.box-item .label-important{ background-color: # !important; border-radius: 0 0 50px 50px !important; padding:10px !important; font-size: 12px ; } top:0; left:0; width:20px; height:20px; -moz-border-radius:10px; -moz-animation-name:bounce_movingBallG; -moz-animation-duration:0.5s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -webkit-border-radius:10px; -webkit-animation-name:bounce_movingBallG; -webkit-animation-duration:0.5s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -ms-border-radius:10px; -ms-animation-name:bounce_movingBallG; -ms-animation-duration:0.5s; -ms-animation-iteration-count:infinite; -ms-animation-direction:linear; -o-border-radius:10px; -o-animation-name:bounce_movingBallG; -o-animation-duration:0.5s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; border-radius:10px; animation-name:bounce_movingBallG; animation-duration:0.5s; animation-iteration-count:infinite; animation-direction:linear; } @-moz-keyframes bounce_movingBallG{ 0%{left:0px;} 50%{left:236px;} 100%{left:0px;} } @-webkit-keyframes bounce_movingBallG{ 0%{left:0px;} 50%{left:236px;} 100%{left:0px;} } @-ms-keyframes bounce_movingBallG{ 0%{left:0px;} 50%{left:236px;} 100%{left:0px;} } @-o-keyframes bounce_movingBallG{ 0%{left:0px;} 50%{left:236px;} 100%{left:0px;} } @keyframes bounce_movingBallG{ 0%{left:0px;} 50%{left:236px;} 100%{left:0px; } } /*FIM PRELOADER*/ /*DIV TODAS A LOJA / CATEGORIAS*/ #lista-categorias{ width: 100%; position: absolute; z-index: 600; margin-top: 0px; background-color: #fafafa; padding-top: 5px; padding-bottom: 5px; min-height:200px; border: 0px solid #000; border-top: 3px solid #; border-bottom: 2px solid #; } #lista-categorias a{ color:#333; } #lista-categorias a:hover{ color: # !important; text-decoration:underline; } #lista-categorias p b{ color:# !important; font-size:12px; } #lista-categorias p{ padding: 1px; margin: 0px; font-size: 12px; font-family: 'Open Sans'; font-weight: normal; } .depto{ min-width: 120px; margin-right: 10px; min-height: 80px; float:left; } #top-depto{ border-bottom: 3px solid #; height:54px; opacity:1 !important; } /*FIM DIV TODAS A LOJA / CATEGORIAS*/ /*DIV MENU LATERAL FILTROS */ .menu-filtro b, .menu-filtro strong { color: # !important; } .filtro-sub-categoria, .filtro-categoria{ list-style: none !important; } .menu-filtro .filtro-categoria a.active{ font-weight: bold; border-bottom:1px solid # !important; } .menu-filtro a{ color: #; } .menu-filtro h5{ font-family: 'Ubuntu',Helvetica,sans-serif,Arial; line-height:30px; font-size: 17px; } .menu-filtro{ font-size:13px; color:#333; } .menu-filtro .filtro-sub-categoria a{ /*padding-left:6px !important;*/ font-size:12px; color:#555; } .menu-filtro .filtro-sub-categoria a:hover{ color:#; } .menu-filtro .filtro-sub-categoria a.active{ color:#; font-style:italic; border-bottom:1px dotted # !important; } .menu-filtro #p-range-preco{ z-index: 100 !important; position: relative !important; } /*FIM MENU LATERAL FILTROS */ /*CORES CUSTOM DA NAVBAR BOOTSTRAP*/ .dropdown-menu {background-color: #;} .dropdown-menu a { color: # !important;} .dropdown-menu a:hover {background-color: # !important;} .dropdown-toggle{padding-left:10px !important;padding-right:10px !important;} .dropdown-toggle:hover {background-color: # !important;} .navbar-default { background-color: #; border-color: #; border: 0px solid #; border-bottom: 3px solid #; } .navbar-default .navbar-brand { color: #; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #; } .navbar-default .navbar-text { color: #; } .navbar-default .navbar-nav > li > a { color: #; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #; background-color: #; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #; background-color: #; } .navbar-default .navbar-toggle { border-color: #; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #; } .navbar-default .navbar-toggle .icon-bar { background-color: #; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #; } .navbar-default .navbar-link { color: #; } .navbar-default .navbar-link:hover { color: #; } /* NAVBAR CATEGORIAS */ #nav-categoria .dropdown-menu {background-color: # !important;} #nav-categoria .dropdown-menu a { color: # !important;} #nav-categoria .dropdown-menu a:hover {background-color: # !important;} #nav-categoria .dropdown-toggle{padding-left:10px !important;padding-right:10px !important;} #nav-categoria .dropdown-toggle:hover {background-color: # !important;} #nav-categoria.navbar-default { background-color: # !important; border-color: # !important; border: 0px solid # !important; border-bottom: 3px solid # !important; } #nav-categoria.navbar-default .navbar-brand { color: #; } #nav-categoria.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #; } #nav-categoria.navbar-default .navbar-text { color: #; } #nav-categoria.navbar-default.navbar-nav > li > a { color: #; } /* centraliza menu --- remover */ /* #nav-categoria.navbar-default .navbar-nav { width: 100%; text-align: center !important; } #nav-categoria.navbar-default .navbar-nav > li { float: none; display: inline-block; } */ /* end centraliza menu --- remover */ #nav-categoria.navbar-default.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #; } #nav-categoria.navbar-default.navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #; background-color: # !important; } #nav-categoria.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #; background-color: # !important; } #nav-categoria.navbar-default .navbar-toggle { border-color: #; } #nav-categoria.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: # !important; } #nav-categoria.navbar-default .navbar-toggle .icon-bar { background-color: # !important; } #nav-categoria.navbar-default .navbar-collapse, #nav-categoria.navbar-default .navbar-form { border-color: # !important; } #nav-categoria.navbar-default .navbar-link { color: # !important; } #nav-categoria.navbar-default .navbar-link:hover { color: # !important; } .2box-item .2label-important{ background-color: # !important; opacity: 0.5 !important; border-radius: 5px !important; padding:10px !important; font-size: 12px ; } .box-item .label-important{ background-color: # !important; border-radius: 0 0 90px 90px !important; padding:10px !important; font-size: 12px ; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #; background-color: #; } } .navbar a{ /*font-size: 13px !important;*/ } .navbar .glyphicon{font-size: 15px !important;} .navbar{ border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; } .menu-fixed-border{ border-bottom: 1px solid #; } .navbar-wrapper { position: absolute; top: 0; left: 0; right: 0; z-index:900; margin-top: 20px; } .navbar-wrapper .container { padding-left: 0; padding-right: 0; } .navbar-wrapper .navbar { padding-left: 15px; padding-right: 15px; } .navbar-content{ padding: 15px; padding-bottom:0px; color:# !important; } .navbar-content:before, .navbar-content:after{ display: table; content: ""; line-height: 0; } .navbar-nav.navbar-right:last-child { margin-right: 15px !important; } .navbar-footer{ background-color:# !important; } .navbar-footer-content { padding:15px 15px 15px 15px; } .dropdown-menu { padding: 0px; overflow: hidden; } .navbar-content *{ text-shadow: none !important; -moz-text-shadow: none #fff !important; -moz-box-shadow:none !important; -webkit-box-shadow:none !important; background: none; text-decoration: none !important; color:# !important; } /*FIM CORES CUSTOM DA NAVBAR BOOTSTRAP*/ .box-item h3, .box-item h5{ color: # !important; } .transition-timer-carousel .transition-timer-carousel-progress-bar { height: 5px; background-color: #; } /* BREADCRUMB - PRODUTO */ .breadcrumb { padding: 0px; background: #; list-style: none; overflow: hidden; margin-top: 20px; } .breadcrumb>li+li:before { padding: 0; } .breadcrumb li { float: left; } .breadcrumb li.active a { background: brown; /* fallback color */ background: #; } .breadcrumb li.completed a { background: brown; /* fallback color */ background: hsla(153, 57%, 51%, 1); } .breadcrumb li.active a:after { border-left: 30px solid # ; } .breadcrumb li.completed a:after { border-left: 30px solid ; } .breadcrumb li a { color: white; text-decoration: none; padding: 10px 0 10px 45px; position: relative; display: block; float: left; } .breadcrumb li a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent; border-left: 30px solid #; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .breadcrumb li a:before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent; border-left: 30px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; } .breadcrumb li:first-child a { padding-left: 15px; } .breadcrumb li a:hover { background: # ; } .breadcrumb li a:hover:after { border-left-color: # !important; } /*HR*/ .separador h1 span { padding:0 10px; } .separador h1 { margin: 30px 0 40px; font-size:36px !important; color:# !important; overflow: hidden; text-align: center; } .separador h1:before, .separador h1:after { background-color: #; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } .separador h1:before { right: 0.5em; margin-left: -50%; } .separador h1:after { left: 0.5em; margin-right: -50%; } .hello-cliente{ color: # !important; display: inline-block; margin: 0px !important; padding-left:20px; font-size: 14px; } #sidemenu{ margin-bottom: 40px; margin-top: 20px; } #sidemenu ul{ margin:0px; padding:0px; } #sidemenu li{ list-style: none; } #sidemenu li a{ font-size:1.1em; padding:4px; display: block; text-decoration: none; color:# !important; } #sidemenu li a:hover{ color:# !important; } #sidemenu-header{ text-align:center; font-size:1.2em; padding:4px; } #sidemenu .cats{ font-weight:bold !important; text-align:center; color:# !important; background: # !important; } #sidemenu .subs{ color:# !important; } .playground .controls { margin: 0 0 30px; padding: 30px; background-color: #fff; border-radius: 8px } .playground .result { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-line-pack: start; align-content: flex-start } .playground .result .post { position: relative; display: block; margin: 0 0 2%; widths: 32%; /*border-radius: 4px; */ overflow: hidden } .playground .result .post img { position: absolute; top: 50%; left: 0; width: 100%; border-radius: 4px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } .playground .result .post .meta { position: absolute; left: 0; bottom: 0; display: block; padding: 15px; width: 100%; height: 60px; color: #fff; font-size: 13px; text-decoration: none; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(60%, rgba(0, 0, 0, 0.65)), to(rgba(0, 0, 0, 0.65))); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0.65) 100%); -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; overflow: hidden } .playground .result .post .meta p { margin: 0 0 20px; opacity: 0; visibility: hidden; -webkit-transition: all .5s ease; transition: all .5s ease } .playground .result .post .meta .stats { position: absolute; left: 15px; right: 15px; bottom: 10px; text-align: center } .playground .result .post .meta .stats i { margin: 0 10px 0 0 } .playground .result .post .meta .stats .likes { margin: 0 30px 0 0 } .playground .result .post::after { display: block; padding-top: 100%; content: '' } .playground .result .post:hover .meta { height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.65)), color-stop(60%, rgba(0, 0, 0, 0.65)), to(rgba(0, 0, 0, 0.65))); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0.65) 100%) } .playground .result .post:hover .meta p { opacity: 1; visibility: visible } .text-center { text-align:center !important; } .news { background-color: #; padding: 2%; color: # } 
/* ========================================================================== */
/* MODERNIZACAO VISUAL FRONT-END                                              */
/* Todas as cores abaixo sao consumidas das variaveis geradas por tema.php.  */
/* Nenhuma cor de identidade visual fica fixa neste arquivo.                  */
/* ========================================================================== */

:root {
    --modern-radius-xs: 8px;
    --modern-radius-sm: 12px;
    --modern-radius-md: 16px;
    --modern-radius-lg: 22px;
    --modern-radius-pill: 999px;
    --modern-space-1: 6px;
    --modern-space-2: 10px;
    --modern-space-3: 16px;
    --modern-space-4: 24px;
    --modern-space-5: 32px;
    --modern-space-6: 48px;
    --modern-transition: 180ms ease;
}

html {
    scroll-behavior: smooth;
}

body,
html,
button,
input,
select,
textarea {
    font-family: "Segoe UI Variable", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

body {
    background: var(--modern-surface) !important;
    color: var(--modern-ink) !important;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body a {
    color: var(--modern-ink);
    transition: color var(--modern-transition), opacity var(--modern-transition), transform var(--modern-transition);
}

body a:hover,
body a:focus {
    color: var(--modern-primary-hover);
}

#main {
    color: var(--modern-ink) !important;
    padding-top: var(--modern-space-4) !important;
}

/* Topo institucional */
#fixed.navbar {
    min-height: 42px;
    margin: 0;
    border: 0 !important;
    background: var(--modern-primary-hover) !important;
    box-shadow: 0 8px 24px var(--modern-shadow);
}

#fixed .navbar-nav > li > a {
    color: var(--modern-on-primary) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .015em;
    padding-top: 11px;
    padding-bottom: 11px;
    opacity: .92;
}

#fixed .navbar-nav > li > a:hover,
#fixed .navbar-nav > li > a:focus {
    background: var(--modern-primary) !important;
    color: var(--modern-on-primary-hover) !important;
    opacity: 1;
}

#top {
    padding-top: 66px !important;
    padding-bottom: 24px !important;
    min-height: 132px !important;
    background: var(--modern-surface) !important;
}

#logo-div img {
    max-width: 100%;
    max-height: 86px;
    width: auto;
    height: auto;
    object-fit: contain;
}

#top .vitrine a {
    color: var(--modern-ink) !important;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .02em;
}

#top .vitrine a > i.fa-3x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: var(--modern-radius-md);
    background: var(--modern-surface-soft);
    color: var(--modern-primary) !important;
    font-size: 22px;
    transition: transform var(--modern-transition), background var(--modern-transition), color var(--modern-transition);
}

#top .vitrine a:hover > i.fa-3x {
    transform: translateY(-2px);
    background: var(--modern-primary);
    color: var(--modern-on-primary) !important;
}

.hello-cliente {
    color: var(--modern-primary-hover) !important;
    font-weight: 600;
}

/* Busca */
#custom-search-input {
    overflow: hidden;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-pill) !important;
    background: var(--modern-surface) !important;
    box-shadow: 0 8px 26px var(--modern-shadow);
    transition: box-shadow var(--modern-transition), border-color var(--modern-transition);
}

#custom-search-input:focus-within {
    border-color: var(--modern-primary) !important;
    box-shadow: 0 10px 30px var(--modern-shadow-strong);
}

#custom-search-input input {
    height: 48px;
    padding-left: 20px;
    color: var(--modern-ink) !important;
    background: transparent !important;
}

#custom-search-input input::placeholder {
    color: var(--modern-muted);
}

#custom-search-input button {
    width: 50px;
    height: 46px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--modern-border) !important;
    background: var(--modern-primary) !important;
    color: var(--modern-on-primary) !important;
}

#custom-search-input button:hover,
#custom-search-input button:focus {
    background: var(--modern-primary-hover) !important;
    color: var(--modern-on-primary-hover) !important;
}

#custom-search-input .glyphicon-search {
    font-size: 18px;
}

/* Menu principal */
#nav-categoria.navbar {
    min-height: 48px;
    margin: 0 0 6px;
    border: 0 !important;
    background: var(--modern-primary) !important;
    box-shadow: 0 8px 24px var(--modern-shadow);
}

#nav-categoria .navbar-nav > li > a {
    min-height: 48px;
    padding: 15px 13px !important;
    border-radius: 0;
    color: var(--modern-on-primary) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .035em;
}

#nav-categoria .navbar-nav > li > a:hover,
#nav-categoria .navbar-nav > li > a:focus,
#nav-categoria .navbar-nav > .open > a {
    background: var(--modern-primary-hover) !important;
    color: var(--modern-on-primary-hover) !important;
}

#nav-categoria .dropdown-menu {
    min-width: 220px;
    padding: 8px !important;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-sm) !important;
    background: var(--modern-surface) !important;
    box-shadow: 0 16px 38px var(--modern-shadow-strong);
}

#nav-categoria .dropdown-menu > li > a {
    padding: 10px 12px !important;
    border-radius: var(--modern-radius-xs);
    color: var(--modern-ink) !important;
    font-weight: 550;
}

#nav-categoria .dropdown-menu > li > a:hover,
#nav-categoria .dropdown-menu > li > a:focus {
    background: var(--modern-surface-soft) !important;
    color: var(--modern-primary-hover) !important;
}

/* Slideshow e banners */
#slide-top {
    margin-top: 0 !important;
    margin-bottom: var(--modern-space-5) !important;
    overflow: hidden;
    background: var(--modern-surface-soft);
}

#slide-top img {
    max-height: 550px;
    object-fit: cover;
}

.carousel-control.left,
.carousel-control.right {
    width: 8%;
    color: var(--modern-primary) !important;
}

/* Titulos de secoes */
.separador h1 {
    margin: 38px 0 26px !important;
    color: var(--modern-ink) !important;
    font-size: clamp(24px, 2.4vw, 34px) !important;
    font-weight: 750 !important;
    letter-spacing: -.025em;
    text-transform: none !important;
}

.separador h1 span {
    position: relative;
    display: inline-block;
    padding: 0 18px !important;
    background: var(--modern-surface);
}

.separador h1:before,
.separador h1:after {
    height: 1px !important;
    background: var(--modern-border-strong) !important;
}

/* Cards de produtos */
.box-produto {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

.box-item {
    min-height: 390px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-lg);
    background: var(--modern-surface) !important;
    box-shadow: 0 8px 15px var(--modern-shadow);
    transition: transform var(--modern-transition), box-shadow var(--modern-transition), border-color var(--modern-transition) !important;
}

.box-item:hover {
    transform: translateY(-5px);
    border-color: var(--modern-border-strong) !important;
    box-shadow: 0 16px 42px var(--modern-shadow-strong) !important;
}

.box-item:hover img {
    transform: scale(1.02) !important;
    padding-top: 0 !important;
}

.box-item-foto {
    height: 225px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--modern-radius-md);
    /*background: var(--modern-surface-soft) !important;*/
}

.box-item-foto img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    transition: transform 260ms ease !important;
}

.box-item-detalhe {
    padding: 16px 4px 2px !important;
}

.box-item h2 {
    min-height: 44px;
    max-height: none;
    margin: 0 0 10px !important;
    color: var(--modern-ink) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
    text-transform: none !important;
}

.box-item h3,
.box-item h5 {
    color: var(--modern-primary-hover) !important;
    font-size: 22px !important;
    font-weight: 780 !important;
    line-height: 1.2 !important;
}

.box-item h3 small,
.box-item small {
    color: var(--modern-muted) !important;
    font-weight: 500;
}

.box-item .label-important,
.box-item .label-success {
    border-radius: var(--modern-radius-pill) !important;
    padding: 7px 10px !important;
    background: var(--modern-primary) !important;
    color: var(--modern-on-primary) !important;
}

.over-btn-cart {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin-top: -54px;
    padding: 0 18px 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--modern-transition), transform var(--modern-transition);
    transform: translateY(6px);
}

.box-produto:hover .over-btn-cart {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Botoes */
.btn,
button.btn,
a.btn {
    min-height: 40px;
    border-radius: var(--modern-radius-sm) !important;
    font-weight: 650;
    letter-spacing: .01em;
    box-shadow: none !important;
    transition: transform var(--modern-transition), background var(--modern-transition), color var(--modern-transition), border-color var(--modern-transition) !important;
}

.btn:hover,
.btn:focus {
    transform: translateY(-1px);
}

.btn-custom,
.btn-primary,
.btn-info,
.btn-danger,
.btn-default,
.label-success,
.bg-custom,
.panel-custom {
    border-color: var(--modern-primary) !important;
    background: var(--modern-primary) !important;
    color: var(--modern-on-primary) !important;
}

.btn-custom:hover,
.btn-custom:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus,
.btn-danger:hover,
.btn-danger:focus,
.btn-default:hover,
.btn-default:focus {
    border-color: var(--modern-primary-hover) !important;
    background: var(--modern-primary-hover) !important;
    color: var(--modern-on-primary-hover) !important;
}

.btn-link {
    color: var(--modern-primary-hover) !important;
}

/* Formularios */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.bootstrap-select > .btn {
    min-height: 44px;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-sm) !important;
    background: var(--modern-surface) !important;
    color: var(--modern-ink) !important;
    box-shadow: none !important;
    transition: border-color var(--modern-transition), box-shadow var(--modern-transition), background var(--modern-transition);
}

textarea.form-control {
    min-height: 110px;
}

.form-control:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--modern-primary) !important;
    box-shadow: 0 0 0 3px var(--modern-surface-strong) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--modern-muted) !important;
}

label,
.control-label {
    color: var(--modern-ink);
    font-weight: 600 !important;
}

.input-group-addon {
    border-color: var(--modern-border) !important;
    background: var(--modern-surface-soft) !important;
    color: var(--modern-primary-hover) !important;
}

/* Wells, paineis e caixas */
.well,
.panel,
.img-thumbnail,
.page-content-w-border,
.myAddr {
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-md) !important;
    background: var(--modern-surface) !important;
    box-shadow: 0 8px 28px var(--modern-shadow) !important;
}

.well {
    padding: 24px;
}

.panel-heading,
.panel-footer {
    border-color: var(--modern-border) !important;
    background: var(--modern-surface-soft) !important;
    color: var(--modern-ink) !important;
}

.panel-custom .panel-heading,
.panel-custom .panel-heading h5,
.panel-custom .panel-heading * {
    background: transparent !important;
    color: var(--modern-on-primary) !important;
}

.panel-body {
    background: var(--modern-surface) !important;
}

/* Breadcrumb moderno */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px 0 !important;
    margin: 10px 0 24px !important;
    overflow: visible !important;
    border-radius: 0;
    background: transparent !important;
}

.breadcrumb li {
    float: none !important;
}

.breadcrumb > li + li:before {
    content: "/" !important;
    padding: 0 4px !important;
    color: var(--modern-muted) !important;
}

.breadcrumb li a,
.breadcrumb li.active a,
.breadcrumb li.completed a {
    float: none !important;
    display: inline !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--modern-muted) !important;
    font-size: 13px;
    font-weight: 550;
}

.breadcrumb li.active a {
    color: var(--modern-primary-hover) !important;
    font-weight: 700;
}

.breadcrumb li a:before,
.breadcrumb li a:after {
    display: none !important;
}

.breadcrumb li a:hover {
    color: var(--modern-primary-hover) !important;
}

/* Produto */
#gallery-produto {
    padding: 14px !important;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-lg);
    background: var(--modern-surface) !important;
    box-shadow: 0 10px 32px var(--modern-shadow);
}

#desc-produto {
    padding-left: 28px;
}

.box-detail {
    color: var(--modern-ink) !important;
}

.box-detail h1 {
    padding-top: 4px !important;
    color: var(--modern-ink) !important;
    font-size: clamp(26px, 3vw, 38px) !important;
    font-weight: 780 !important;
    letter-spacing: -.03em;
}

.box-detail h1 small {
    color: var(--modern-muted) !important;
    font-size: 12px;
    font-weight: 550;
}

.box-detail h2,
.box-detail h3 {
    color: var(--modern-primary-hover) !important;
}

.box-detail h2 {
    margin: 24px 0 14px;
    font-size: clamp(30px, 3.4vw, 44px) !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em;
}

.preco-avista,
.text-parcele,
.parcelamento,
.parcelamento * {
    color: var(--modern-muted) !important;
}

.forma-de-pagamento,
.parcelamentos {
    padding: 16px;
    border: 1px solid var(--modern-border);
    border-radius: var(--modern-radius-md);
    background: var(--modern-surface-soft);
}

.nav-tabs {
    border-bottom: 1px solid var(--modern-border) !important;
}

.nav-tabs > li > a {
    margin-right: 6px;
    border: 1px solid transparent !important;
    border-radius: var(--modern-radius-sm) var(--modern-radius-sm) 0 0 !important;
    color: var(--modern-muted) !important;
    font-weight: 650;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-color: var(--modern-border) !important;
    border-bottom-color: var(--modern-surface) !important;
    background: var(--modern-surface) !important;
    color: var(--modern-primary-hover) !important;
}

.tab-content {
    padding: 24px 8px 8px;
}

/* Carrinho */
.box-cart {
    margin: 0 0 12px !important;
    padding: 16px 6px !important;
    border-bottom: 1px solid var(--modern-border) !important;
}

.box-cart .input_qtde {
    height: 42px !important;
    width: 46px !important;
    padding-top: 9px !important;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-xs);
    background: var(--modern-surface-soft) !important;
    color: var(--modern-primary-hover) !important;
}

.btn-cart-remove {
    color: var(--modern-muted) !important;
    background: var(--modern-surface-soft) !important;
}

#carrinho-vazio {
    padding: 30px;
}

/* Tabelas */
.table {
    color: var(--modern-ink);
    background: var(--modern-surface);
}

.table > thead > tr > th {
    border-bottom: 1px solid var(--modern-border) !important;
    background: var(--modern-surface-soft);
    color: var(--modern-ink);
    font-size: 12px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th {
    border-top: 1px solid var(--modern-border) !important;
    vertical-align: middle;
}

.table-hover > tbody > tr:hover {
    background: var(--modern-surface-soft) !important;
}

/* Sidebar, filtros e paginacao */
.menu-filtro,
#sidemenu {
    padding: 16px;
    border: 1px solid var(--modern-border);
    border-radius: var(--modern-radius-md);
    background: var(--modern-surface-soft);
}

.menu-filtro a,
#sidemenu li a,
#lista-categorias a {
    color: var(--modern-ink) !important;
}

.menu-filtro a:hover,
#sidemenu li a:hover,
#lista-categorias a:hover {
    color: var(--modern-primary-hover) !important;
}

.pagination > li > a,
.pagination > li > span {
    margin: 0 3px;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-xs) !important;
    background: var(--modern-surface) !important;
    color: var(--modern-ink) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > li > a:hover,
.pagination > li > span:hover {
    border-color: var(--modern-primary) !important;
    background: var(--modern-primary) !important;
    color: var(--modern-on-primary) !important;
}

/* Atendimento e paginas internas */
.page-content,
#atd-dados {
    color: var(--modern-ink) !important;
}

.page-content h1,
.page-content h2,
.page-content h3,
.separator-bar {
    color: var(--modern-ink) !important;
}

.separator-bar {
    border-color: var(--modern-border) !important;
    background: var(--modern-surface-soft) !important;
}

/* Newsletter + rodape */
.news {
    margin-top: 42px;
    padding: 34px 0 !important;
    background: var(--modern-primary) !important;
    color: var(--modern-on-primary) !important;
}

.news h4,
.news label,
.news .fa,
.news a {
    color: var(--modern-on-primary) !important;
}

.news .form-control {
    border-color: var(--modern-on-primary) !important;
    background: var(--modern-surface) !important;
    color: var(--modern-ink) !important;
}

#footer {
    padding: 38px 24px !important;
    border-top: 1px solid var(--modern-border) !important;
    background: var(--modern-surface-soft) !important;
    color: var(--modern-ink) !important;
}

#footer h4 {
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--modern-border) !important;
    color: var(--modern-ink) !important;
    font-size: 16px;
    font-weight: 750;
}

#footer h5,
#footer .footer-menu,
#footer .footer-menu ul a {
    color: var(--modern-muted) !important;
}

#footer .footer-menu ul a:hover {
    color: var(--modern-primary-hover) !important;
}

#footer-condicoes,
#footer-company {
    border: 0 !important;
    background: var(--modern-primary) !important;
    color: var(--modern-on-primary) !important;
}

#footer-company {
    background: var(--modern-primary-hover) !important;
}

#footer-company a,
#footer-condicoes a {
    color: var(--modern-on-primary-hover) !important;
    font-weight: 700;
}

/* Modal e dropdowns gerais */
.modal-content {
    overflow: hidden;
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-lg) !important;
    background: var(--modern-surface) !important;
    box-shadow: 0 22px 64px var(--modern-shadow-strong) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--modern-border) !important;
}

.dropdown-menu {
    border: 1px solid var(--modern-border) !important;
    border-radius: var(--modern-radius-sm) !important;
    box-shadow: 0 16px 38px var(--modern-shadow-strong);
}

/* Responsivo */
@media (max-width: 991px) {
    #top {
        padding-top: 58px !important;
    }

    #top .col-md-4 {
        margin-bottom: 14px;
    }

    #logo-div img {
        margin: 0 auto;
    }

    #desc-produto {
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 22px;
    }

    .box-item {
        min-height: 370px;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 14px;
    }

    #fixed.navbar {
        position: relative !important;
    }

    #top {
        padding-top: 20px !important;
        padding-bottom: 18px !important;
    }

    #nav-categoria .navbar-collapse,
    #fixed .navbar-collapse {
        border: 0 !important;
        box-shadow: none;
    }

    #nav-categoria .navbar-nav {
        margin: 0 -15px !important;
    }

    #nav-categoria .navbar-nav > li > a {
        padding: 13px 18px !important;
    }

    #nav-categoria .dropdown-menu {
        margin: 0 10px 10px !important;
        background: var(--modern-surface) !important;
    }

    .separador h1 {
        margin: 28px 0 20px !important;
    }

    .box-produto {
        padding-left: 15px;
        padding-right: 15px;
    }

    .box-item {
        min-height: 0;
        padding: 12px;
    }

    .box-item-foto {
        height: 245px;
    }

    .over-btn-cart {
        margin-top: 0;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        padding-bottom: 4px;
    }

    .well,
    .panel-body,
    .page-content-w-border {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .news {
        padding: 26px 14px !important;
    }

    #footer {
        padding: 28px 18px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}