/* Tokens e utilitários do template oficial (sem React / sem CSS compilado Vite) */

.text-metallic {
  background: linear-gradient(135deg, #B86B43 0%, #C59B27 50%, #A65F38 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-metallic-copper {
  background: linear-gradient(135deg, #C87D55 0%, #D4AF37 100%);
}

.bg-metallic-copper:hover {
  filter: brightness(1.05);
}

.shadow-copper-sm {
  box-shadow: 0 6px 18px -8px rgba(200, 125, 85, 0.35);
}

.shadow-copper-lg {
  box-shadow: 0 16px 40px -12px rgba(200, 125, 85, 0.45);
}

.shadow-xs {
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

#hero-product-carousel [data-slide] {
  display: none;
}

#hero-product-carousel [data-slide].is-active {
  display: grid;
}

#hero-product-carousel [data-thumb].is-active {
  border-color: #C87D55;
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 0 0 2px rgba(200, 125, 85, 0.45);
}

#mobile-nav {
  display: none;
}

#mobile-nav.is-open {
  display: block;
}

.nav-link-active {
  color: #121316;
  font-weight: 700;
}

.nav-link-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25rem;
  height: 2px;
  background: #C87D55;
  border-radius: 9999px;
}

.bg-metallic-btn {
  background: linear-gradient(135deg, #C87D55 0%, #D4AF37 100%);
}

.bg-metallic-btn:hover {
  background: linear-gradient(135deg, #B56A43 0%, #C49F27 100%);
}

.shadow-copper {
  box-shadow: 0 10px 30px -10px rgba(200, 125, 85, 0.2);
}

.filter-btn.active-filter {
  background: #121316;
  color: #fff;
  border-color: #121316;
}

#top-announcement-track {
  mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}