:root { 
  --brand-black: #000000; 
  --brand-white: #ffffff; 
}
html, body { 
  font-family: 'Poppins', system-ui, sans-serif; 
  scroll-behavior: smooth; 
}
.mono-img { 
  background: #f5f5f5; 
  object-fit: cover; 
}
.invert-hover:hover { 
  filter: invert(1) grayscale(1); 
  transform: scale(1.02); 
  transition: all 0.3s ease; 
}
.zoom-hover:hover { 
  transform: scale(1.03); 
  transition: transform 0.4s ease; 
}
.icon-btn { 
  cursor: pointer; 
}
.carousel-track { 
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* Hero Slider */
.slideshow { 
  position: relative; 
  width: 400%; 
  height: 100%; 
  display: flex; 
  animation: slide 32s infinite; 
}
.slide { 
  position: relative; 
  width: 25%; 
  height: 100%; 
  flex-shrink: 0; 
}
.content {
  position: absolute; 
  inset: 0; 
  display: flex; 
  flex-direction: column;
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  padding: 2rem; 
  color: white;
}
.title {
  font-size: 7rem; 
  font-weight: bold; 
  line-height: 1;
  opacity: 0; 
  animation: fadeInUp 1.2s forwards 0.5s;
}
.subtitle {
  font-size: 1.8rem; 
  margin-top: 2rem; 
  letter-spacing: 0.4em;
  opacity: 0; 
  animation: fadeInUp 1.4s forwards 1.2s;
}
.btn {
  margin-top: 3rem; 
  padding: 1.2rem 4rem; 
  border: 3px solid white; 
  font-weight: bold;
  opacity: 0; 
  animation: fadeInUp 1.4s forwards 1.8s;
}
.btn:hover { 
  background: rgba(255,255,255,0.2); 
}
@keyframes slide {
  0%, 22% { transform: translateX(0%); }
  25%, 47% { transform: translateX(-25%); }
  50%, 72% { transform: translateX(-50%); }
  75%, 97% { transform: translateX(-75%); }
  100% { transform: translateX(0%); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dots */
.dot {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}
.dot:hover {
  background: white;
  transform: scale(1.5);
}
/* #s1:checked ~ .slideshow > .dot:nth-child(1),
#s2:checked ~ .slideshow > .dot:nth-child(2),
#s3:checked ~ .slideshow > .dot:nth-child(3),
#s4:checked ~ .slideshow > .dot:nth-child(4) {
  background: white;
  transform: scale(1.5);
} */

@media (max-width: 1024px) {
    /* Make navigation horizontal but wrap nicely on small screens */
    header nav {
      flex-wrap: wrap;
      gap: 1rem 2rem;
    }
    /* Shop menu on mobile: align left instead of center */
    #shopMainMenu {
      left: 0 !important;
      transform: translateX(0) !important;
      right: auto;
    }
  }


  /* Reel video */
  .reel-video-only iframe {
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  }
  .scrollbar-hide::-webkit-scrollbar { display: none; }
  .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }


  /* combo */
     .swatch {
      width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
      border: 2px solid transparent; transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .swatch.selected {
      border: 2px solid #000; 
      transform: scale(1.12);
      box-shadow: 0 0 0 3px #fff inset, 0 8px 25px rgba(0,0,0,0.2);
    }
    .product-icon {
      width: 60px; height: 60px; border-radius: 16px; object-fit: cover;
      border: 4px solid #000; box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }
 
    
    /* Auto Scroll Left Animation */
  .animate-scroll-left {
    display: flex;
    animation: scrollLeft 10s linear infinite;
  }
  @keyframes scrollLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  /* Pause on hover */
  .animate-scroll-left:hover {
    animation-play-state: paused;
  }



  #bannerCarouselWrapper {
  overflow: hidden;
}