/* v0.1.5 - Pinuts Updates */

/* ==========================================================
   1. HERO TITLE MOBILE: Identical font size for both lines
   ========================================================== */
@media (max-width: 760px) {
  #hero h1,
  .hero-copy h1,
  .hero h1 {
    font-size: clamp(38px, 10.5vw, 62px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em !important;
  }
  #hero h1 .hero-accent,
  .hero-copy h1 .hero-accent,
  .hero h1 .hero-accent,
  .hero h1 em {
    display: inline !important;
    font-size: 1em !important;
    font-size: inherit !important;
    line-height: inherit !important;
    max-width: none !important;
    letter-spacing: inherit !important;
  }
}

@media (max-width: 420px) {
  #hero h1,
  .hero-copy h1,
  .hero h1 {
    font-size: clamp(32px, 9.8vw, 46px) !important;
    line-height: 1.08 !important;
  }
}

/* ==========================================================
   2. AUTHENTIC WALNUT BURGER MENU (Noce Elegante)
   ========================================================== */
.menu-toggle.walnut-toggle {
  position: relative !important;
  width: 52px !important;
  height: 52px !important;
  border: 1px solid rgba(202, 169, 107, 0.35) !important;
  border-radius: 50% !important;
  background: rgba(14, 12, 10, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  overflow: visible !important;
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.28s ease,
              box-shadow 0.28s ease,
              background-color 0.28s ease !important;
}

.walnut-toggle:hover {
  transform: translateY(-2px) scale(1.05) !important;
  border-color: rgba(202, 169, 107, 0.8) !important;
  box-shadow: 0 8px 22px rgba(202, 169, 107, 0.25), 0 0 12px rgba(202, 169, 107, 0.2) !important;
  background: rgba(24, 20, 16, 0.88) !important;
}

.walnut-toggle:active {
  transform: translateY(1px) scale(0.95) !important;
}

.walnut-svg {
  width: 32px;
  height: 32px;
  display: block;
  overflow: visible;
}

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

.walnut-svg .walnut-suture {
  transition: opacity 0.25s ease, stroke-dashoffset 0.3s ease;
}

.walnut-svg .walnut-close-x {
  opacity: 0;
  transform: scale(0.6);
  transform-origin: 22px 22px;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Open menu state: walnut halves separate elegantly */
.walnut-toggle[aria-expanded="true"] {
  border-color: rgba(202, 169, 107, 0.9) !important;
  background: rgba(30, 24, 18, 0.92) !important;
}

.walnut-toggle[aria-expanded="true"] .walnut-valve-left {
  transform: translateX(-6px) rotate(-12deg);
  opacity: 0.45;
}

.walnut-toggle[aria-expanded="true"] .walnut-valve-right {
  transform: translateX(6px) rotate(12deg);
  opacity: 0.45;
}

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

.walnut-toggle[aria-expanded="true"] .walnut-close-x {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================================
   3. BUTTON ANIMATIONS (Hover, Active, Grab)
   ========================================================== */
.button,
.button-primary,
.button-outline,
.button-light,
.header-cta,
.carousel-arrow,
.sound-toggle-btn {
  position: relative !important;
  cursor: pointer !important;
  transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.24s cubic-bezier(0.25, 1, 0.5, 1),
              background-color 0.24s ease,
              border-color 0.24s ease,
              color 0.24s ease !important;
  will-change: transform, box-shadow !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Hover effect */
.button:hover,
.button-primary:hover,
.button-outline:hover,
.button-light:hover,
.header-cta:hover {
  transform: translateY(-3px) scale(1.025) !important;
  box-shadow: 0 12px 28px rgba(202, 169, 107, 0.26), 0 0 16px rgba(202, 169, 107, 0.18) !important;
}

.button-primary:hover {
  background: #ffffff !important;
  color: #050505 !important;
  box-shadow: 0 14px 32px rgba(242, 238, 231, 0.35), 0 0 20px rgba(202, 169, 107, 0.25) !important;
}

.button-outline:hover {
  border-color: var(--gold) !important;
  background: rgba(202, 169, 107, 0.08) !important;
}

/* Active / Click / Grab effect */
.button:active,
.button-primary:active,
.button-outline:active,
.button-light:active,
.header-cta:active,
.carousel-arrow:active,
.sound-toggle-btn:active {
  transform: translateY(1px) scale(0.96) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45) !important;
  transition-duration: 0.08s !important;
}

/* Product Card interactions */
.product-card {
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.28s ease,
              box-shadow 0.28s ease !important;
}

.product-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(202, 169, 107, 0.45) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(202, 169, 107, 0.14) !important;
}

.product-card:active {
  transform: translateY(-2px) scale(0.99) !important;
}

/* Carousel arrows */
.carousel-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(202, 169, 107, 0.3);
  background: rgba(14, 12, 10, 0.7);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.24s cubic-bezier(0.25, 1, 0.5, 1);
}

.carousel-arrow:hover {
  transform: scale(1.08) !important;
  border-color: var(--gold);
  background: rgba(26, 22, 18, 0.9);
  box-shadow: 0 6px 18px rgba(202, 169, 107, 0.25);
}

/* ==========================================================
   4. BESTSELLER: Smooth Mobile Auto-scroll & Grab-and-Pull
   ========================================================== */
.product-viewport {
  cursor: grab !important;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  touch-action: pan-y !important;
}

.product-viewport::-webkit-scrollbar {
  display: none !important;
}

.product-viewport.is-dragging,
.product-viewport.is-grabbing {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  scroll-behavior: auto !important;
}

.product-viewport.is-dragging a,
.product-viewport.is-grabbing a {
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .product-viewport {
    /* Disable rigid CSS snap so continuous auto-scroll and drag glide smoothly */
    scroll-snap-type: none !important;
    padding-inline: 18px !important;
  }

  .product-card {
    scroll-snap-align: none !important;
    flex: 0 0 min(78vw, 300px) !important;
    margin-right: 14px !important;
  }
}

/* ==========================================================
   5. AMBIENT CLASSICAL SOUND WIDGET (Erik Satie, 5% volume)
   ========================================================== */
.sound-widget {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sound-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(202, 169, 107, 0.35);
  background: rgba(10, 9, 8, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--cream);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.sound-toggle-btn:hover {
  border-color: rgba(202, 169, 107, 0.8);
  background: rgba(20, 18, 15, 0.95);
  box-shadow: 0 10px 28px rgba(202, 169, 107, 0.22), 0 0 12px rgba(202, 169, 107, 0.15);
}

.sound-waves {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 14px;
}

.sound-bar {
  width: 2.5px;
  height: 4px;
  background-color: var(--gold);
  border-radius: 2px;
  transition: height 0.2s ease, opacity 0.2s ease;
}

.sound-widget.is-playing .sound-bar:nth-child(1) {
  animation: soundWave 1.1s ease-in-out infinite alternate;
}
.sound-widget.is-playing .sound-bar:nth-child(2) {
  animation: soundWave 0.9s ease-in-out 0.2s infinite alternate;
}
.sound-widget.is-playing .sound-bar:nth-child(3) {
  animation: soundWave 1.3s ease-in-out 0.4s infinite alternate;
}
.sound-widget.is-playing .sound-bar:nth-child(4) {
  animation: soundWave 1.0s ease-in-out 0.15s infinite alternate;
}

.sound-widget.is-muted .sound-bar {
  height: 3px !important;
  opacity: 0.4;
  animation: none !important;
}

@keyframes soundWave {
  0% { height: 3px; }
  50% { height: 13px; }
  100% { height: 6px; }
}

@media (max-width: 480px) {
  .sound-widget {
    right: 14px;
    bottom: 16px;
  }
  .sound-toggle-btn {
    padding: 7px 12px;
    font-size: 10px;
    gap: 6px;
  }
}