* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Montserrat', sans-serif; background-color: #faf8f5; color: #2c1810; overflow-x: hidden; }

/* Scroll Animation */
.fade-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-left.visible { opacity: 1; transform: translateX(0); }
.fade-right { opacity: 0; transform: translateX(50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-right.visible { opacity: 1; transform: translateX(0); }

/* Hero parallax-like overlay */
.hero-overlay {
  background: linear-gradient(
    135deg,
    rgba(44, 24, 16, 0.75) 0%,
    rgba(45, 88, 28, 0.55) 50%,
    rgba(44, 24, 16, 0.7) 100%
  );
}

/* Leaf decoration */
.leaf-divider::before,
.leaf-divider::after { content: '🌿'; margin: 0 0.75rem; opacity: 0.6; }

/* Nav scrolled state */
.nav-scrolled {
  background-color: rgba(250, 248, 245, 0.97) !important;
  box-shadow: 0 2px 20px rgba(44, 24, 16, 0.1) !important;
  backdrop-filter: blur(12px) !important;
}
.nav-scrolled .nav-link { color: #2c1810 !important; }
.nav-scrolled .nav-logo { color: #2d581c !important; }
.nav-scrolled .nav-btn { background-color: #2d581c !important; color: white !important; }

/* Smooth button transitions */
.btn-primary {
  background-color: #2d581c;
  color: white;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%;
  background: rgba(255,255,255,0.15); transition: width 0.5s ease, height 0.5s ease, top 0.5s ease, left 0.5s ease;
}
.btn-primary:hover::after { width: 300px; height: 300px; top: calc(50% - 150px); left: calc(50% - 150px); }
.btn-primary:hover { background-color: #377023; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(45, 88, 28, 0.3); }

/* Menu card hover */
.menu-card { transition: all 0.35s ease; }
.menu-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(44, 24, 16, 0.12); }

/* Image hover zoom */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.6s ease; }
.img-zoom:hover img { transform: scale(1.08); }

/* Form input focus */
.form-input { transition: all 0.3s ease; }
.form-input:focus { border-color: #2d581c; box-shadow: 0 0 0 3px rgba(45, 88, 28, 0.12); }

/* Mobile menu */
.mobile-menu { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.mobile-menu.open { transform: translateX(0); }

/* Робимо бургер-меню темним (як текст) при скролі */
.nav-scrolled #menuToggle {
  color: #4a8c2e !important;
}

/* Додаємо фірмовий зелений колір при наведенні на бургер-меню */
.nav-scrolled #menuToggle:hover {
  color: #2c1810 !important;
}

/* Category tab active */
.cat-tab { transition: all 0.3s ease; }
.cat-tab.active { background-color: #2d581c; color: white; }

/* Decorative wood grain pattern */
.wood-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4c4a8' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Toast notification */
.toast { animation: slideInRight 0.5s ease-out forwards; }
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(-20px); }
}

/* Scroll indicator animation */
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.scroll-indicator { animation: bounce 2s infinite; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f5efe6; }
::-webkit-scrollbar-thumb { background: #b88d5c; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a87642; }