:root {
  --azul-marino: #0E3B83;
  --amarillo-dorado: #F6C119;
  --blanco-puro: #FFFFFF;
  --negro-grafito: #1A1A1A;
  --gris-claro: #F8FAFC;
  --gris-borde: #E2E8F0;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar for Cart / Body */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--azul-marino);
}

::-webkit-scrollbar-thumb {
  background: var(--amarillo-dorado);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #D9A814;
}

/* Animations */
@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.liquid {
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hide scrollbar for category filters but allow scroll */
.filter-btn {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.filter-btn::-webkit-scrollbar {
  display: none;
}

/* Organic V6 Animations - Kept for compatibility with JS but modernized feeling */
.product-card {
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.8s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.05) !important;
}

.organic-reveal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.organic-reveal.will-animate {
  opacity: 0;
  transform: translateY(15px) scale(0.99);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.organic-reveal.will-animate.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.organic-drop-shadow {
  filter: drop-shadow(0 15px 25px rgba(14, 59, 131, 0.08));
}

/* Organic Popups */
.organic-popup-overlay {
  background: rgba(26, 26, 26, 0.5);
  backdrop-filter: blur(8px);
}

/* Glass effect for active cards */
.glass-active {
    background: rgba(16, 16, 34, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}