@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .nome, .title, .titulo {
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* =========================================
   CORES DINÂMICAS DO ESTABELECIMENTO
   ========================================= */

.colored,
.shop-bag i,
.naver .navbar a i,
.header .naver .navbar .social a:hover i,
.naver .navbar a:hover,
.user-menu i,
.search-bar-mobile button i,
.categoria .vertudo i,
.categoria .counter,
.bread i,
.produto-detalhes .categoria a,
.campo-numero i,
.sacola-table .sacola-remover i,
.sacola-table .sacola-change i,
.adicionado .checkicon,
.title-line i,
.back-button i,
.sidebar-info i,
.filter-select .outside,
.filter-select .fake-select i,
.pagination i,
.funcionamento-mobile i,
.fake-select i,
.search-bar button i,
.holder-shop-bag i
{
color: #0055bd !important;
}

.top {
border-color: #0055bd !important;
}

.footer-info,
.categoria .produto .detalhes,
.cover,
.carousel-indicators .active,
.botao-acao,
.badge-oferta,
.sidebar .sidebar-header,
.minitop,
.opcoes .opcao.active .check,
.floatbar {
background: #0055bd !important;
}

.pagination > li > a:hover, .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover,
.pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
background: #0055bd !important;
color: #fff !important;
}

.is-sticky .avatar {
height: 70px !important;
width: 70px !important;
}

.tv-infinite-menu a.active,
.tv-infinite-menu a:hover,
.fancybox-thumbs__list a::before {
border-color: #0055bd !important;
}

.tv-infinite-menu a.active {
color: #0055bd !important;
}

/* Limitar altura da imagem destaque do produto */
.single-produto .galeria .carousel-inner .item img {
max-height: 500px;
width: auto;
max-width: 100%;
margin: 0 auto;
display: block;
object-fit: contain;
}

/* =========================================
   ANIMAÇÕES DE ENTRADA
   ========================================= */

@keyframes fadeInUp {
from {
  opacity: 0;
  transform: translateY(18px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

@keyframes fadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}



/* Animação nos cards de produtos */
.categoria .produto,
.novoproduto {
animation: fadeInUp 0.4s ease both;
}

/* Delay progressivo nos cards */
.tv-infinite > .col-infinite:nth-child(1) .produto,
.tv-grid > .col-md-3:nth-child(1) .produto { animation-delay: 0.03s; }
.tv-infinite > .col-infinite:nth-child(2) .produto,
.tv-grid > .col-md-3:nth-child(2) .produto { animation-delay: 0.07s; }
.tv-infinite > .col-infinite:nth-child(3) .produto,
.tv-grid > .col-md-3:nth-child(3) .produto { animation-delay: 0.11s; }
.tv-infinite > .col-infinite:nth-child(4) .produto,
.tv-grid > .col-md-3:nth-child(4) .produto { animation-delay: 0.15s; }
.tv-infinite > .col-infinite:nth-child(5) .produto,

.categoria .produto {
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.03);
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.categoria .produto:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.06);
}

.categoria .produto .capa {
  transition: transform 0.4s ease;
}

.categoria .produto:hover .capa {
  transform: scale(1.02);
}

/* HOVER NOS CARDS DE PRODUTO (LISTAGEM) */
.novoproduto {
  border-radius: 12px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  border: 1px solid rgba(0,0,0,0.03) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important;
}

.novoproduto:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.08) !important;
}

.novoproduto .capa {
  border-radius: 8px !important;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.novoproduto:hover .capa img {
transform: scale(1.04);
}

.novoproduto .capa img {
transition: transform 0.3s ease;
}

/* =========================================
   COVER COM OVERLAY GRADIENTE
   ========================================= */

.cover {
position: relative;
}

.cover::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60%;
background: linear-gradient(to bottom, transparent, rgba(0,0,0,.28));
pointer-events: none;
}

/* =========================================
   STATUS DE FUNCIONAMENTO — PULSANTE
   ========================================= */

/* Desktop (minitop / navigation) */
.funcionamento .aberto,
.funcionamento .fechado {
display: flex;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 600;
}

.funcionamento .aberto::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #22c55e;
flex-shrink: 0;
}

.funcionamento .fechado::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ef4444;
flex-shrink: 0;
}

/* Botão aberto/fechado mobile (app-infos) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 6px 14px;
  margin-top: 10px;
  margin-bottom: 8px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: none;
  cursor: default;
}

.status-badge.aberto {
  background: rgba(16,185,129,.10);
  color: #047857;
  border: 1px solid rgba(16,185,129,.25);
}

.status-badge.fechado {
  background: rgba(239,68,68,.10);
  color: #dc2626;
  border: 1px solid rgba(239,68,68,.25);
}

.status-badge .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-badge.aberto .dot {
  background: #10b981;
}

.status-badge.fechado .dot {
  background: #ef4444;
}

/* Verde/Vermelho no naver (navigation.php) */
button.verdedesktop {
background: rgba(34,197,94,.12);
color: #16a34a;
border: 1.5px solid rgba(34,197,94,.3);
border-radius: 50px;
padding: 5px 14px 4px 14px;
font-weight: 600;
font-size: 13px;
cursor: default;
transition: 0.2s;
}

button.vermelhodesktop {
background: rgba(239,68,68,.10);
color: #dc2626;
border: 1.5px solid rgba(239,68,68,.25);
border-radius: 50px;
padding: 5px 14px 4px 14px;
font-weight: 600;
font-size: 13px;
cursor: default;
transition: 0.2s;
}

/* =========================================
   CHIPS DE INFO (MOBILE — app-infos)
   ========================================= */

.app-infos {
margin: 40px auto auto auto !important;
padding: 10px 12px 0 12px !important;
}

.app-infos .info-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
padding: 10px 10px 6px 10px !important;
max-width: 100% !important;
}

.app-infos .info-badge {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
padding: 6px 14px !important;
border-radius: 50px !important;
border: 1.5px solid rgba(0,0,0,.10) !important;
background: rgba(0,0,0,.03);
gap: 6px;
font-size: 12px;
color: rgba(0,0,0,.7) !important;
font-weight: 500;
}

.app-infos .info-badge i {
font-size: 16px !important;
margin-right: 0 !important;
color: rgba(0,0,0,.45) !important;
}

.app-infos .info-badge span {
text-align: left !important;
font-size: 12px;
line-height: 14px;
color: rgba(0,0,0,.7);
}

.app-infos .info-badge a {
color: rgba(0,0,0,.7);
}

/* =========================================
   BARRA DE CATEGORIAS MOBILE — PILL STYLE
   ========================================= */

.search-bar-mobile .tv-infinite-menu {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start !important;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 4px 12px 8px 12px;
gap: 6px;
mask-image: linear-gradient(to right, transparent, #000 12px, #000 92%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 92%, transparent);
}

.search-bar-mobile .tv-infinite-menu::-webkit-scrollbar {
display: none;
}

.search-bar-mobile .tv-infinite-menu a {
display: inline-flex;
align-items: center;
white-space: nowrap;
flex-shrink: 0;
padding: 7px 16px 6px 16px !important;
border-radius: 50px !important;
border: 1.5px solid #e5e5e5 !important;
border-bottom: 1.5px solid #e5e5e5 !important;
font-size: 13px !important;
font-weight: 500;
color: rgba(0,0,0,.6) !important;
background: #fff;
transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}

.search-bar-mobile .tv-infinite-menu a.active,
.search-bar-mobile .tv-infinite-menu a:hover {
background: #0055bd !important;
border-color: #0055bd !important;
color: #fff !important;
}

/* =========================================
   BADGE DE OFERTA COM % DE DESCONTO
   ========================================= */

.produto-wrapper {
position: relative;
display: block;
}

.badge-oferta {
position: absolute;
top: 8px;
left: 8px;
z-index: 4;
background: #ef4444;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 3px 8px 2px 8px;
border-radius: 50px;
letter-spacing: 0.3px;
line-height: 16px;
box-shadow: 0 2px 6px rgba(239,68,68,.4);
pointer-events: none;
}

/* Badge de oferta na listagem (novoproduto) */
.novoproduto-wrapper {
position: relative;
display: block;
}

.novoproduto-wrapper .badge-oferta {
top: 6px;
right: 6px;
left: auto;
font-size: 10px;
padding: 2px 7px 1px 7px;
}

/* =========================================
   SEARCH BAR — FOCO ANIMADO
   ========================================= */

.search-bar form {
transition: box-shadow 0.25s ease;
border-radius: 8px !important;
}

.search-bar form:focus-within {
box-shadow: 0 0 0 3px #0055bd33 !important;
}

.search-bar-mobile form {
  transition: box-shadow 0.25s ease;
  border-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  margin-top: 10px !important;
  margin-bottom: 24px !important;
}

.search-bar-mobile form:focus-within {
box-shadow: 0 0 0 3px #0055bd22, 0 2px 8px rgba(0,0,0,.10) !important;
}

/* =========================================
   BOTÃO "VER TUDO" MELHORADO
   ========================================= */

.categoria .vertudo {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 20px;
  background: rgba(0,0,0,.04) !important;
  color: rgba(0,0,0,.6) !important;
  padding: 4px 12px 3px 12px !important;
  transition: background 0.2s, color 0.2s;
  margin: 0 !important;
  float: right !important;
}

.categoria .vertudo:hover {
background: #0055bd28 !important;
color: #0055bd !important;
}

.categoria .vertudo i {
transform: translateY(0) !important;
font-size: 14px;
}

/* Wrapper do titulo da categoria */
.categoria-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.categoria-header .title {
  display: inline-block;
}

.categoria-header .vertudo {
  margin: 0 !important;
}

/* =========================================
   SIDEBAR — MELHORIAS VISUAIS
   ========================================= */


.sidebar-info {
  border-radius: 10px;
  padding: 14px 16px !important;
  margin: 0 12px 10px 12px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  font-size: 13px;
  word-break: break-word;
}

.sidebar-info .title {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,.07);
}

.sidebar-info .content a {
display: block;
padding: 4px 0;
font-weight: 500;
color: #333;
transition: color 0.2s;
}

.sidebar-info .content a:hover {
color: #0055bd;
}

/* =========================================
   ALL MOBILE
   ========================================= */

@media (max-width: 991px) {

.user-menu i {
color: #fff !important;
}

.shop-bag i {
color: #fff !important;
}

.shop-bag .counter {
border: 0;
padding-top: 2px;
}

.top {
border-top: 0;
background: #0055bd !important;
}

/* Hover desativado no touch */
.categoria .produto:hover,
.novoproduto:hover {
transform: none;
}

}

/* =========================================
   ALL DESK
   ========================================= */

@media (min-width: 991px) {

.app-infos .info-badges {
max-width: 500px !important;
}

}

/* =========================================
   TEMPLATE LISTA (NOVALISTAGEM) E EQUAL HEIGHTS
   ========================================= */

.novalistagem {
  display: flex !important;
  flex-wrap: wrap !important;
}

.novalistagem > div {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 20px;
}

.novoproduto-wrapper {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  height: 100% !important;
  width: 100% !important;
}

.novoproduto {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  height: 100% !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

.novoproduto > a {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  height: 100% !important;
  width: 100% !important;
}

.novoproduto > a > .row {
  display: flex !important;
  flex: 1 !important;
  width: 100% !important;
  margin: 0 !important;
}

.novoproduto > a > .row > .col-md-9,
.novoproduto > a > .row > .col-sm-7,
.novoproduto > a > .row > .col-xs-7 {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding-right: 10px;
}

.novoproduto > a > .row > .col-md-3,
.novoproduto > a > .row > .col-sm-5,
.novoproduto > a > .row > .col-xs-5 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  float: none !important;
}

.novoproduto .capa {
  float: none !important;
  margin: 0 !important;
}

.novoproduto .descricao {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  margin-top: 5px !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}

.novoproduto .preco {
  margin-top: auto !important;
}

/* Animação de Entrada na Sacola */
@keyframes sacolaPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.shop-bag.pulse-active {
  animation: sacolaPulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2) both;
}

.shop-bag.pulse-active .counter {
  background-color: #22c55e !important;
}

/* =========================================
   DESKTOP HEADER ESCURO E STICKY
   ========================================= */
@media (min-width: 992px) {
  .header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #0055bd !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  }
  
  .header .top {
    background: #0055bd !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 15px 0 !important;
  }
  
  .header .search-bar form {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.1) !important;
  }
  
  .header .search-bar form input {
    background: transparent !important;
    color: #ffffff !important;
  }
  
  .header .search-bar form input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  
  .header .search-bar form button i {
    color: #ffffff !important;
  }
  
  .header .holder-shop-bag .cash {
    color: #ffffff !important;
  }
  
  .header .holder-shop-bag i {
    color: #ffffff !important;
  }
  
  .header .holder-shop-bag .counter {
    background: #ffffff !important;
    color: #0055bd !important;
  }
  
  .header .navigator.naver {
    background: rgba(0, 0, 0, 0.12) !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    padding: 5px 0 !important;
  }
  
  .header .navigator.naver .navbar-nav > li > a {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 15px !important;
    transition: all 0.2s ease !important;
  }
  
  .header .navigator.naver .navbar-nav > li > a i,
  .header .navigator.naver .navbar-nav > li > span.sidrLeft i {
    color: #ffffff !important;
  }
  
  .header .navigator.naver .navbar-nav > li > a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px !important;
  }
  
  .header .navigator.naver .navbar-nav > li.active > a {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 4px !important;
  }
  
  .header .navigator.naver .navbar-nav > li > span.sidrLeft {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 15px !important;
    cursor: pointer !important;
    display: block !important;
    transition: all 0.2s ease !important;
  }
  
  .header .navigator.naver .navbar-nav > li > span.sidrLeft:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px !important;
  }
}

/* Custom overrides for portrait product cards */
.categoria .produto .capa, 
.produto-wrapper .produto .capa, 
.produto .capa {
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  display: block !important;
  background-size: cover !important;
  background-position: center center !important;
  width: 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Styling for the product name below the photo */
.categoria .produto .nome, 
.produto-wrapper .produto .nome, 
.produto .nome {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin: 8px 0 2px 0 !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #2b2b2b !important;
  letter-spacing: 0.2px !important;
  height: 36px !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

/* Overrides for any background/shadow on the name inside capa if any remains */
.categoria .produto .capa .nome,
.produto .capa .nome {
  display: none !important;
}

/* ==========================================================================
   TIPOGRAFIA E ALINHAMENTO DE FONTES (Estilo Francisca Joias)
   ========================================================================== */

/* Unificação global de fonte para Poppins */
body, html, input, button, select, textarea, span, p, a, div, h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



/* Preço principal (Valor) */
.categoria .produto .valor, 
.produto-wrapper .produto .valor, 
.produto .valor {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  letter-spacing: 0.5px !important;
}

/* Preço anterior (De: R$) */
.categoria .produto .valor_anterior, 
.produto-wrapper .produto .valor_anterior, 
.produto .valor_anterior {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #888888 !important;
}

/* Parcelamento */
.categoria .produto .parcelas, 
.produto-wrapper .produto .parcelas, 
.produto .parcelas {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #666666 !important;
}

/* Botão Comprar */
.categoria .produto .detalhes span, 
.produto-wrapper .produto .detalhes span, 
.produto .detalhes span {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

/* Otimizações responsivas para telas móveis (Estilo Mobile) */
@media (max-width: 767px) {
  .categoria .produto .nome, 
  .produto-wrapper .produto .nome, 
  .produto .nome {
    font-size: 11px !important;
    height: 30px !important;
    line-height: 1.3 !important;
    margin: 6px 0 2px 0 !important;
  }
  .categoria .produto .valor, 
  .produto-wrapper .produto .valor, 
  .produto .valor {
    font-size: 14px !important;
  }
  .categoria .produto .valor_anterior, 
  .produto-wrapper .produto .valor_anterior, 
  .produto .valor_anterior {
    font-size: 10px !important;
  }
  .categoria .produto .parcelas, 
  .produto-wrapper .produto .parcelas, 
  .produto .parcelas {
    font-size: 10px !important;
  }
}

/* Custom styling for the filter select on category page */
.filter-select {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.filter-select .outside {
  position: static !important;
  transform: none !important;
  font-size: 12px !important;
  padding: 5px 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  width: 28px !important;
  margin-right: 4px !important;
  background: rgba(0,0,0,.03) !important;
  border-radius: 4px !important;
}

.filter-select .fake-select {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.filter-select .fake-select select {
  font-size: 12px !important;
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 20px 0 8px !important;
  width: 120px !important;
  border: 1.5px solid rgba(0,0,0,0.08) !important;
  border-radius: 6px !important;
  background-color: #fff !important;
  color: #444 !important;
  font-weight: 500 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.filter-select .fake-select i {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  font-size: 9px !important;
  pointer-events: none !important;
  color: #666 !important;
}