:root {
  --forest: #245b3b;
  --forest-dark: #173e29;
  --leaf: #69a52f;
  --cream: #f7f5ed;
  --ink: #1c2b22;
}

html { scroll-behavior: smooth; }

body {
  color: var(--ink);
  background: #fffefa;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 400;
}

*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, h4, strong, b { font-weight: 600; }

button, a, input { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 3px solid rgba(105, 165, 47, .36);
  outline-offset: 3px;
}

.container-shell {
  width: min(100% - 32px, 1240px);
  margin-inline: auto;
}

.hero-grain {
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.5), transparent 22%),
    radial-gradient(circle at 7% 92%, rgba(36,91,59,.12), transparent 26%),
    linear-gradient(130deg, #eef4dc 0%, #f7f5ed 52%, #e7efcf 100%);
}

.hero-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}

.display-serif { font-family: "Lora", serif; }

.product-card:hover .product-image { transform: scale(1.035); }

.product-image { transition: transform .5s cubic-bezier(.2,.7,.2,1); }

.hide-scrollbar { scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

.cart-drawer { transform: translateX(100%); transition: transform .32s ease; }
.cart-drawer.is-open { transform: translateX(0); }

.drawer-overlay { opacity: 0; visibility: hidden; transition: .25s ease; }
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

.search-panel { transform: translateY(-8px); opacity: 0; visibility: hidden; transition: .2s ease; }
.search-panel.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

.toast { transform: translate(-50%, 18px); opacity: 0; pointer-events: none; transition: .25s ease; }
.toast.is-showing { transform: translate(-50%, 0); opacity: 1; }

.leaf-float { animation: leafFloat 5.5s ease-in-out infinite; }

@keyframes leafFloat {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}