/* ============================================================
   ZENN STORE — USER STYLES
   ============================================================ */

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.menu-open, body.modal-open {
  overflow: hidden;
}

/* ---------- Scrollbar Hide ---------- */
.scroll-hide::-webkit-scrollbar {
  display: none;
}
.scroll-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ---------- View Switching ---------- */
.view {
  display: none;
}
.view.active {
  display: block;
}

/* ---------- Bottom Sheet Animation ---------- */
.sheet-anim {
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.sheet-anim.open {
  transform: translateY(0);
}

/* ---------- Fade Animation ---------- */
.fade {
  opacity: 0;
  transition: opacity .25s ease;
}
.fade.open {
  opacity: 1;
}

@keyframes fadeIn {
  from { opacity: 0 }
  to { opacity: 1 }
}
.content-fade {
  animation: fadeIn .25s ease;
}

/* ---------- Pulse Soft ---------- */
@keyframes pulseSoft {
  0%, 100% { opacity: 1 }
  50% { opacity: .6 }
}
.pulse-soft {
  animation: pulseSoft 2s ease-in-out infinite;
}

/* ---------- Carousel ---------- */
.carousel-track {
  display: flex;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
.carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
}
.carousel-track.dragging {
  transition: none;
  cursor: grabbing;
}
.carousel-dot {
  transition: all .3s ease;
}
.carousel-dot.active {
  width: 20px;
  background-color: #134e4a;
}

/* ---------- Category Card ---------- */
.cat-card {
  transition: all .2s ease;
}
.cat-card:hover {
  transform: translateY(-2px);
}
.cat-card:active {
  transform: scale(0.98);
}

/* ---------- Product Card ---------- */
.product-card,
.popular-card {
  transition: all .2s ease;
}
.product-card:active,
.popular-card:active {
  transform: scale(0.98);
}

/* ---------- Order Button ---------- */
.order-btn {
  transition: all .2s ease;
}
.order-btn:active {
  transform: scale(0.97);
}

/* ---------- Wishlist Button ---------- */
.wishlist-btn {
  transition: all .2s ease;
}
.wishlist-btn:active {
  transform: scale(0.9);
}
.wishlist-btn svg {
  transition: all .2s ease;
}

/* ---------- Detail Button ---------- */
#detailWA {
  transition: all .2s ease;
}
#detailWA:active {
  transform: scale(0.98);
}

/* ---------- Toast ---------- */
#toast {
  transition: all .3s cubic-bezier(.2,.7,.3,1);
}

/* ---------- Promo CTA ---------- */
.promo-cta {
  transition: all .2s ease;
}
.promo-cta:active {
  transform: scale(0.97);
}

/* ---------- Menu Item ---------- */
.menu-item {
  transition: all .15s ease;
}
.menu-item:active {
  background-color: #f0fdfa;
}

/* ---------- Category Filter ---------- */
.cat-filter {
  transition: all .2s ease;
}
.cat-filter:active {
  transform: scale(0.97);
}