/* v0.1.6 - Pinuts refinements */

/* Walnut menu: SVG only, no black plate, border or glow. */
.menu-toggle.walnut-toggle,
.menu-toggle.walnut-toggle:hover,
.menu-toggle.walnut-toggle:active,
.menu-toggle.walnut-toggle[aria-expanded="true"] {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.menu-toggle.walnut-toggle:hover {
  transform: scale(1.04) !important;
}

.menu-toggle.walnut-toggle:active {
  transform: scale(0.96) !important;
}

.walnut-svg {
  width: 40px !important;
  height: 40px !important;
  display: block !important;
  overflow: visible !important;
}

.walnut-svg .walnut-valve {
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transform-origin: 22px 22px !important;
  opacity: 1 !important;
}

.walnut-toggle[aria-expanded="true"] .walnut-valve-left {
  transform: translateX(-5px) rotate(-11deg) !important;
  opacity: 1 !important;
}

.walnut-toggle[aria-expanded="true"] .walnut-valve-right {
  transform: translateX(5px) rotate(11deg) !important;
  opacity: 1 !important;
}

.walnut-toggle[aria-expanded="true"] .walnut-suture {
  opacity: 0 !important;
}

/* Mobile bestseller exhibition: continuous right-to-left marquee. */
@keyframes pinutsProductMarquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--pinuts-marquee-shift, -50%), 0, 0); }
}

@media (max-width: 760px) {
  .product-viewport {
    overflow: hidden !important;
    padding-inline: 0 !important;
    cursor: default !important;
    touch-action: pan-y !important;
  }

  .product-track.is-mobile-marquee {
    width: max-content !important;
    animation-name: pinutsProductMarquee !important;
    animation-duration: var(--pinuts-marquee-duration, 120s) !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    will-change: transform !important;
  }

  .product-track.is-mobile-marquee .product-card {
    flex: 0 0 min(78vw, 300px) !important;
  }

  [data-carousel-prev],
  [data-carousel-next] {
    display: none !important;
  }
}