/* ===== Base Styles ===== */
:root {
  --color-bg-dark: #1a1310;
  --color-bg-card: #211611;
  --color-text-light: #f5f5f4;
  --color-text-muted: #a8a29e;
  --color-primary: #f59e0b; /* Amber */
  --color-primary-hover: #d97706;
  --color-accent: #ea580c; /* Orange */
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin: 0;
}

.font-display {
  font-family: 'Fredoka', sans-serif;
}

/* ===== Marquee Animation ===== */
.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: scrollMarquee 20s linear infinite;
}

@keyframes scrollMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== Mobile Menu ===== */
.mobile-menu {
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.mobile-menu:not(.hidden-menu) {
  max-height: 500px;
  opacity: 1;
}

/* ===== Buttons & UI Elements ===== */
.btn-warm {
  background-color: var(--color-primary);
  color: #1a1310;
  transition: all 0.3s ease;
}

.btn-warm:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.2);
}

.btn-whatsapp {
  background-color: #16a34a;
  color: white;
  transition: all 0.3s ease;
}

.btn-whatsapp:hover {
  background-color: #15803d;
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(22, 163, 74, 0.2);
}

/* ===== Premium Smooth Hover Effect for Cards ===== */
.product-card, .trust-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover, .trust-card:hover {
  transform: translateY(-8px); /* Card slightly up */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Hide scrollbar for filter buttons if added later */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Ensure images don't overflow */
img {
  max-width: 100%;
  height: auto;
}