:root{
  --farm:#3d7a1f; --farm-dark:#274d16; --gold:#f0b429; --gold-dark:#de911d;
  --wood:#432a12;
}
*{scroll-behavior:smooth}
body{overflow-x:hidden}

/* ---------- Marquee / moving headline ---------- */
.marquee{overflow:hidden;white-space:nowrap}
.marquee__inner{display:inline-block;padding-left:100%;animation:marquee 22s linear infinite}
.marquee:hover .marquee__inner{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* ---------- Top slider ---------- */
.slider{position:relative}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;display:flex;align-items:center;justify-content:center}
.slide.active{opacity:1;position:relative}
.slide-dot{transition:all .3s}
.slide-dot.active{width:28px;background:var(--gold)}

/* ---------- Hero animations ---------- */
@keyframes floatUp{0%{transform:translateY(0)}50%{transform:translateY(-16px)}100%{transform:translateY(0)}}
.float{animation:floatUp 5s ease-in-out infinite}
.float-slow{animation:floatUp 7s ease-in-out infinite}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .8s ease forwards;opacity:0}
.d1{animation-delay:.1s}.d2{animation-delay:.3s}.d3{animation-delay:.5s}.d4{animation-delay:.7s}
@keyframes popIn{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
.pop{animation:popIn .6s cubic-bezier(.2,.8,.2,1.2) forwards}
@keyframes shine{0%{background-position:-200% center}100%{background-position:200% center}}
.shine-text{background:linear-gradient(90deg,#fff 20%,var(--gold) 40%,#fff 60%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 4s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.spin-slow{animation:spinSlow 40s linear infinite}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(240,180,41,.55)}70%{box-shadow:0 0 0 18px rgba(240,180,41,0)}100%{box-shadow:0 0 0 0 rgba(240,180,41,0)}}
.pulse-ring{animation:pulseRing 2s infinite}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(40px);transition:all .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* product art gradients */
.art{position:relative;overflow:hidden}
.art::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 60%)}
.art i,.art span{position:relative;z-index:2}

/* card hover */
.pcard{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.pcard:hover{transform:translateY(-8px);box-shadow:0 22px 40px -18px rgba(39,77,22,.5)}

/* nav link underline */
.navlink{position:relative}
.navlink::after{content:'';position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--gold);transition:width .3s}
.navlink:hover::after,.navlink.active::after{width:100%}

/* buttons */
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-dark));transition:.3s;box-shadow:0 8px 20px -8px rgba(222,145,29,.7)}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-farm{background:linear-gradient(135deg,#4c9a2a,var(--farm-dark));transition:.3s}
.btn-farm:hover{transform:translateY(-2px);filter:brightness(1.08)}

/* toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);z-index:100;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
#toast.show{transform:translateX(-50%) translateY(0)}

/* cart badge */
.badge{position:absolute;top:-6px;right:-8px;min-width:20px;height:20px;font-size:11px;display:flex;align-items:center;justify-content:center;border-radius:9999px}

/* wave divider */
.wave{display:block;width:100%;height:auto}

/* timeline */
.step{position:relative}
.step::before{content:'';position:absolute;left:19px;top:40px;bottom:-24px;width:2px;background:#d6c39c}
.step:last-child::before{display:none}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:var(--farm);border-radius:8px}