:root {
  --color-primary: #008cba;
  --color-primary-dark: #006d8f;
  --color-accent: #e31e24;
  --color-link: #008cba;
  --color-dark: #0a0a0a;
  --color-gray-text: #9ca3af;
  --color-whatsapp: #25d366;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.hero-slide {
  background-size: cover;
  background-position: center;
}

.category-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.product-card:hover .product-actions {
  opacity: 1;
}

.product-actions {
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (max-width: 768px) {
  .product-actions {
    opacity: 1;
  }
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item.open .faq-answer {
  max-height: 500px;
}

.faq-item.open .faq-icon {
  transform: rotate(180deg);
}

.faq-icon {
  transition: transform 0.2s ease;
}

#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

#back-to-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.whatsapp-widget {
  background-color: var(--color-whatsapp);
}

.whatsapp-widget:hover {
  background-color: #1ebe57;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.masonry-tall {
  grid-row: span 2;
}

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

.animate-fade-in {
  animation: fadeIn 0.4s ease forwards;
}