:root {
  --color-primary:         #4B0082;
  --color-hover-primary:   #3d006a;
  --color-secondary:       #E1A31E;
  --color-hover-secondary: #b88518;
  --color-accent:          #D9A61C;
  --color-hover-accent:    #b18816;
  --color-dark:            #2E004F;
  --color-bg:              #F9F1E2;
  --color-text:            #1A0033;
  --color-text-light:      #6B6B6B;
  --auth-bg-color1:        #4B0082;
  --auth-bg-color2:        #E1A31E;
  --auth-text-color:       #ffffff;
  --color-primary-tint:    #ded1e8;
  --color-primary-medium:  #8f60b1;
  --sidebar-bg:            #E1A31E;
  --sidebar-hover:         rgba(255,255,255,.12);
  --sidebar-active:        rgba(255,255,255,.20);
  --blog-primary:          #4B0082;
  --blog-accent:           #E1A31E;
  --blog-bg:               #F9F1E2;
  --blog-card-bg:          #FFFFFF;
  --blog-text:             #1E293B;

}
body {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  background: #F9F1E2;
  color: #1A0033;
}
h1, h2, h3, h4, h5, h6, .topbar-title, .drawer-logo, .flash-modal-msg {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
}
.btn-primary, .btn-secondary, .btn-acao { border-radius: 12px !important; }
.topbar { position: sticky; }
.logo-img { max-height: 100px !important; object-fit: contain !important; width: auto !important; }
.carrossel-slide img, .carrossel-slide { height: 340px !important; }
html body .card img { height: 200px !important; max-height: 200px !important; }
html body .card { border-radius: 16px !important; }
.flash-modal-success { background: #E8F5E9 !important; }
.flash-modal-error   { background: #e3857d !important; }
.flash-modal-info    { background: #FFFFFF !important; }
.flash-modal-success .flash-modal-msg { color: #155724 !important; }
.flash-modal-error   .flash-modal-msg { color: #721c24 !important; }
.flash-modal-info    .flash-modal-msg { color: #0c5460 !important; }
.badge-novo { background: #cc0000 !important; }


*, *::before, *::after { transition-duration: 220ms !important; }


.card:hover { transform: translateY(-5px) !important; box-shadow: 0 12px 28px rgba(0,0,0,.14) !important; }






.products { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
@media (max-width: 768px) { .products { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .products { grid-template-columns: 1fr !important; } }