@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');



:root {

  --primary: #e2793d;

}



body { 

  font-family: 'Inter', system-ui, sans-serif; 

}

.font-display { 

  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; 

  font-weight: 600; 

}



.product-card {

  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), 

              box-shadow 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);

}

.product-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

}



.category-pill {

  font-size: 0.65rem;

  padding: 1px 10px;

  border-radius: 9999px;

  background: #f5ecd9;

  color: #5c4033;

  font-weight: 600;

  letter-spacing: -.2px;

}

.price {

  font-weight: 700;

  color: #5c4033;

  font-size: 1.05rem;

}

.filter-btn {

  padding: 6px 14px;

  border-radius: 9999px;

  font-size: 0.875rem;

  font-weight: 500;

  cursor: pointer;

  transition: all 0.1s ease;

  border: 1px solid #e6d7ba;

  background: white;

  color: #6b4a35;

}

.filter-btn.active {

  background: #e2793d;

  color: white;

  border-color: #e2793d;

}

.filter-btn:hover:not(.active) {

  border-color: #ddc9a0;

  background: #f5ecd9;

}

/* Hero "Pre-order" chip: behaves like a filter button (active = orange fill) */

#hero-preorder {

  cursor: pointer;

}

#hero-preorder:hover:not(.active) {

  border-color: #ddc9a0;

  background: #f5ecd9;

}

#hero-preorder.active {

  background: #e2793d;

  color: white;

  border-color: #e2793d;

}

/* Hero "ON HAND" chip: same filter-button behavior as Pre-order */

#hero-onhand {

  cursor: pointer;

}

#hero-onhand:hover:not(.active) {

  border-color: #ddc9a0;

  background: #f5ecd9;

}

#hero-onhand.active {

  background: #e2793d;

  color: white;

  border-color: #e2793d;

}

.section-header {

  letter-spacing: -.025em;

}

.product-img {

  transition: transform 0.3s ease;

}

.product-card:hover .product-img {

  transform: scale(1.04);

}

.star {

  color: #f59e0b;

}

.market-badge {

  background: linear-gradient(135deg, #e2793d, #c2622c);

  color: white;

  font-size: 0.625rem;

  padding: 1px 7px;

  border-radius: 9999px;

  font-weight: 700;

  letter-spacing: 0.5px;

}

.modal {

  animation: modalPop 0.2s cubic-bezier(0.23, 1.0, 0.32, 1);

}

@keyframes modalPop {

  from { opacity: 0; transform: scale(0.96) translateY(10px); }

  to { opacity: 1; transform: scale(1) translateY(0); }

}

.cart-item {

  transition: background-color 0.1s ease;

}

.empty-cart {

  animation: fadeIn 0.3s ease;

}

/* === HERO === */

.hero {

  background: linear-gradient(to bottom, #faf3e4 0%, #f0e4c9 100%);

}

/* Floating hearts (petting / feeding the companion) */

@keyframes floatUp {

  0% { opacity: 0; transform: translateY(8px) scale(0.6); }

  20% { opacity: 1; }

  100% { opacity: 0; transform: translateY(-75px) scale(1.15) rotate(14deg); }

}

/* === BUNNY COMPANION — interactive pet along the bottom === */

#bunny-runner {

  position: fixed;

  bottom: calc(2px + env(safe-area-inset-bottom, 0px));

  left: 0;

  width: 92px;

  height: 150px;

  z-index: 40;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.35s ease;

  will-change: transform;

}

#bunny-runner.visible { opacity: 1; }

#runner-svg {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 92px;

  height: 88px;

  overflow: visible;      /* ears poke above the viewBox */

  pointer-events: auto;   /* the bunny itself is pettable and feedable */

  cursor: pointer;

  touch-action: none;     /* finger-strokes pet him instead of scrolling */

  will-change: transform;

}

/* Articulated rig: poses blend via springy transitions, no sprite swaps */

#b-rig {

  transform-origin: 50px 90px;

  transition: transform 0.5s cubic-bezier(0.34, 1.6, 0.64, 1), opacity 0.2s ease;

}

/* Limb pivots for the hop cycle (driven per-frame from JS) */

#b-hind { transform-origin: 34px 74px; }

#b-paws { transform-origin: 63px 80px; }

#b-head { transform-origin: 60px 46px; transition: transform 0.35s ease; }

#b-ear-l, #b-ear-r {

  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

}

#b-ear-l { transform-origin: 54px 22px; }

#b-ear-r { transform-origin: 63px 22px; }

/* Blink */

.b-pupil { transform-box: fill-box; transform-origin: center; animation: bBlink 4.6s infinite; }

@keyframes bBlink {

  0%, 93%, 100% { transform: scaleY(1); }

  96% { transform: scaleY(0.08); }

}

/* Constant nose twitch — the most rabbit thing there is */

#b-nose {

  transform-box: fill-box;

  transform-origin: center;

  animation: noseTwitch 0.55s ease-in-out infinite;

}

@keyframes noseTwitch {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.25, 0.8); }

}

/* Blissful closed eyes (petting / trust-flop) */

.b-eye-happy { opacity: 0; transition: opacity 0.2s ease; }

#runner-svg.blissful .b-pupil,

#runner-svg.blissful .b-shine { opacity: 0; }

#runner-svg.blissful .b-eye-happy { opacity: 1; }

/* Alert / periscope: stretches tall, ears swing upright */

#runner-svg.pose-alert #b-rig { transform: scaleY(1.14) scaleX(0.95); }

#runner-svg.pose-alert #b-head { transform: translateY(-2px) rotate(2deg); }

#runner-svg.pose-alert #b-ear-l { transform: rotate(20deg); }

#runner-svg.pose-alert #b-ear-r { transform: rotate(12deg); }

/* The dramatic flop: crossfades to dedicated lying-down art with a drop */

#b-flop-art {

  opacity: 0;

  transform: translateY(-5px);

  transition: opacity 0.22s ease, transform 0.4s cubic-bezier(0.34, 1.8, 0.64, 1);

}

#runner-svg.pose-flop #b-rig { opacity: 0; }

#runner-svg.pose-flop #b-flop-art { opacity: 1; transform: translateY(0); }

/* Loaf: tucked bread shape, ears folded flat along the back */

#runner-svg.pose-loaf #b-rig { transform: scaleY(0.78) scaleX(1.08); }

#runner-svg.pose-loaf #b-head { transform: translateY(4px) rotate(-4deg); }

#runner-svg.pose-loaf #b-ear-l { transform: rotate(-30deg); }

#runner-svg.pose-loaf #b-ear-r { transform: rotate(-36deg); }

/* Grooming: head dips down while both paws wash the face */

#runner-svg.grooming #b-head { animation: washBob 0.6s ease-in-out infinite; }

#runner-svg.grooming #b-paws { animation: pawWash 0.6s ease-in-out infinite; }

@keyframes washBob {

  0%, 100% { transform: rotate(7deg) translateY(2px); }

  50% { transform: rotate(10deg) translateY(3.5px); }

}

@keyframes pawWash {

  0%, 100% { transform: translate(4px, -8px) rotate(-6deg); }

  50% { transform: translate(6px, -10px) rotate(5deg); }

}

/* Mid-hop: ears stream back (head stays fused to the body) */

#runner-svg.hopping #b-ear-l { transform: rotate(-16deg); }

#runner-svg.hopping #b-ear-r { transform: rotate(-24deg); }

/* Petting: ears melt further back */

#runner-svg.petting #b-ear-l { transform: rotate(-14deg); }

#runner-svg.petting #b-ear-r { transform: rotate(-20deg); }

/* Feeding: carrot is offered to the mouth, then eaten chomp by chomp.

   transform-origin sits at the carrot tip (the mouth), so each bite

   pulls what's left INTO the mouth instead of deflating in mid-air. */

#b-carrot { opacity: 0; transform-box: view-box; transform-origin: 84px 43px; }

#runner-svg.munching #b-carrot { animation: carrotEat 1.5s ease-in-out forwards; }

@keyframes carrotEat {

  0%   { opacity: 0; transform: translate(16px, -6px) rotate(12deg) scale(1); }

  12%  { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }   /* offered */

  24%  { transform: scale(1); }

  30%  { transform: scale(0.75); }   /* chomp 1 */

  48%  { transform: scale(0.75); }

  54%  { transform: scale(0.5); }    /* chomp 2 */

  72%  { transform: scale(0.5); }

  78%  { transform: scale(0.28); }   /* chomp 3 */

  92%  { opacity: 1; transform: scale(0.28); }

  100% { opacity: 0; transform: scale(0.05); } /* gone */

}

#runner-svg.munching #b-head { animation: chew 0.3s ease-in-out 5; }

@keyframes chew {

  0%, 100% { transform: rotate(0); }

  50% { transform: rotate(2.5deg) translateY(1px); }

}

.b-mouth-o { opacity: 0; }

#runner-svg.munching .b-mouth { opacity: 0; }

#runner-svg.munching .b-mouth-o { opacity: 1; }

/* Hind-foot thump — how real rabbits register disapproval */

#b-foot-l { transform-box: fill-box; transform-origin: center; }

#runner-svg.thumping #b-foot-l { animation: thumpLeg 0.5s ease-in-out infinite; }

@keyframes thumpLeg {

  0%, 55%, 100% { transform: translateY(0); }

  25% { transform: translateY(-5px) rotate(-10deg); }

  40% { transform: translateY(0); }

}

.dust-puff { opacity: 0; transform-box: fill-box; transform-origin: center; }

#runner-svg.thumping .dust-puff { animation: dustPuff 0.5s ease-out infinite; }

@keyframes dustPuff {

  0%, 38% { opacity: 0; transform: scale(0.4); }

  46% { opacity: 0.7; }

  100% { opacity: 0; transform: scale(1.7) translate(-4px, -2px); }

}

/* Little hearts while petting / feeding */

.pet-heart {

  position: absolute;

  font-size: 0.95rem;

  pointer-events: none;

  animation: floatUp 1.2s ease-out forwards;

}

#runner-bubble {

  position: absolute;

  bottom: 102px;

  left: 50%;

  transform: translateX(-50%);

  background: #fff;

  border: 1px solid #e6d7ba;

  color: #5c4033;

  border-radius: 14px;

  padding: 6px 11px;

  font-size: 12px;

  font-weight: 600;

  white-space: nowrap;

  opacity: 0;

  transition: opacity 0.25s ease;

  box-shadow: 0 6px 14px rgb(0 0 0 / 0.08);

}

#runner-bubble.show { opacity: 1; }

#runner-bubble::after {

  content: '';

  position: absolute;

  top: 100%;

  left: 50%;

  margin-left: -5px;

  border: 5px solid transparent;

  border-top-color: #fff;

}

/* Keep the bubble on screen when the bunny is near an edge */

#bunny-runner.edge-right #runner-bubble { left: auto; right: -4px; transform: none; }

#bunny-runner.edge-right #runner-bubble::after { left: auto; right: 30px; }

#bunny-runner.edge-left #runner-bubble { left: -4px; transform: none; }

#bunny-runner.edge-left #runner-bubble::after { left: 34px; }

/* Cart button wiggle during the checkout nudge */

#cart-button.wiggle { animation: cartWiggle 0.5s ease-in-out 6; }

@keyframes cartWiggle {

  0%, 100% { transform: rotate(0); }

  25% { transform: rotate(-7deg) scale(1.06); }

  75% { transform: rotate(7deg) scale(1.06); }

}

@media (prefers-reduced-motion: reduce) {

  #cart-button.wiggle { animation: none; }

  #bunny-runner { display: none; }

}

.hero-cta {

  background: #5c4033;

  color: white;

  font-weight: 600;

  padding: 12px 28px;

  border-radius: 9999px;

  transition: all 0.15s ease;

  display: inline-flex;

  align-items: center;

  gap: 8px;

}

.hero-cta:hover {

  background: #3f2b21;

  transform: translateY(-1px);

}

/* === Welcome banner === */
.welcome-card {
  background: #fff9e6;
}
.welcome-art {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 480px) {
  .welcome-card .px-8 { padding-left: 1.25rem; padding-right: 1.25rem; }
}