:root {
  --primary: #A3375E;
  --secondary: #6B9E78;
  --accent: #E8A838;
  --bg: #FFF8F0;
  --bg-alt: #FBF0E5;
  --text: #2D1B12;
  --text-muted: #7A6558;
  --border: #E8D5C4;
  --success: #4A8C5C;
  --error: #C4324A;
}

html {
  scroll-behavior: smooth;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Serif Display', serif;
}

.slide-in {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

.slide-in.visible {
  opacity: 1;
  transform: translateX(0);
}

.gradient-hover {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: background-position .4s ease;
}

.gradient-hover:hover {
  background-position: 100% 50%;
}

.top-bar {
  transition: max-height .3s ease, opacity .3s ease;
  overflow: hidden;
  max-height: 48px;
  opacity: 1;
}

.top-bar.shrunk {
  max-height: 0;
  opacity: 0;
}

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

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

.faq-tab.active {
  background-color: var(--primary);
  color: #fff;
}

.faq-panel {
  display: none;
}

.faq-panel.active {
  display: block;
}

.catalog-filter-btn.active {
  background-color: var(--primary);
  color: #fff;
}