/* ==========================================================================
   Base
   ========================================================================== */

body {
  background-color: black;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/* ==========================================================================
   Botões e utilitários do tema
   ========================================================================== */

.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost {
  transition: background-color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
  font-weight: 600;
  border-radius: var(--radius);
  padding-left: 1rem;
  padding-right: 1rem;
  height: 2.25rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline:disabled,
.btn-ghost:disabled {
  opacity: 0.5;
}

.btn-primary {
  background-color: hsl(var(--primary));
  color: black;
  border: 1px solid transparent;
}

.btn-primary:hover {
  filter: brightness(0.85);
}

.btn-secondary {
  background-color: hsla(var(--foreground) / 0.05);
  border: 1px solid hsla(var(--foreground) / 0.1);
}

.btn-secondary:hover {
  background-color: hsla(var(--foreground) / 0.10);
}

.btn-outline {
  background-color: transparent;
  border: 1px solid hsla(var(--foreground) / 0.1);
}

.btn-outline:hover {
  background-color: hsla(var(--foreground) / 0.05);
}

.btn-ghost {
  background-color: transparent;
  border: 1px solid transparent;
}

.btn-ghost:hover {
  background-color: hsla(var(--foreground) / 0.05);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: hsl(var(--primary));
  border-radius: 0.25rem;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.detail-dash {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 50%, hsl(var(--foreground) / 0) 0%);
  background-position: center bottom;
  background-size: 16px;
  background-repeat: repeat-x;
  width: 100%;
  height: 1px;
}

.grid-background {
  background-image: linear-gradient(to right, hsla(0, 0%, 100%, .03) 1px, transparent 1px), linear-gradient(to bottom, hsla(0, 0%, 100%, .03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 60% 85% at 40% 30%, #000 0%, #fff0 110%);
}

.custom-bg-mask {
  mask-image: linear-gradient(hsl(var(--background)), rgba(0, 0, 0, 0.3), rgb(0, 0, 0, 0));
}

/* Sidebar de categorias */
.cat-dropdown {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top;
}

.cat-dropdown:not(.hidden) {
  animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-categories-dropdown:not(.hidden) {
  animation: slideInMobile 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-subcategories:not(.hidden) {
  animation: slideInSub 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Top donators shine */
.top-donators-pill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  pointer-events: none;
  transition: left 0.5s ease-in;
}

.top-donators-pill:hover::after {
  left: 120%;
  transition: left 0.6s ease-out;
}

.centralcart-content iframe {
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Fundo do site (vídeo)
   ========================================================================== */

.site-background {
  position: fixed;
  inset: 0;
  z-index: -20;
  overflow: hidden;
  pointer-events: none;
}

.site-background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  /* o desfoque "puxa" pixels de fora da borda; a sobra evita halo claro nas quinas */
  width: calc(100% + var(--video-overscan, 64px));
  height: calc(100% + var(--video-overscan, 64px));
  transform: translate(-50%, -50%) translateZ(0);
  object-fit: cover;
  filter: blur(var(--background-blur, 8px));
}

/* Escurecimento em camadas: topo e rodapé bem escuros (onde fica o texto),
   vinheta preta nas bordas e um véu leve no meio, para o vídeo aparecer sem
   atrapalhar a leitura. */
.site-background-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      hsl(var(--background) / 0.85) 0%,
      transparent 22%,
      transparent 78%,
      hsl(var(--background) / 0.9) 100%),
    radial-gradient(ellipse 90% 75% at 50% 50%,
      transparent 30%,
      hsl(var(--background) / 0.8) 100%),
    hsl(var(--background) / var(--background-video-overlay, 0.35));
}

/* quem pediu menos movimento no sistema não recebe vídeo rodando no fundo */
@media (prefers-reduced-motion: reduce) {
  .site-background-video {
    display: none;
  }
}

/* ==========================================================================
   Navbar
   ========================================================================== */

/* Barra de vidro flutuante: fundo translúcido + blur + cantos arredondados */
.nav-glass {
  background-color: hsl(var(--background) / 0.72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid hsla(var(--foreground) / 0.08);
  border-radius: var(--navbar-radius, 0.75rem);
}

/* Painéis flutuantes (resultado da busca) sobre o vidro */
.glass-panel {
  background-color: hsl(var(--muted-solid) / 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.search-glass {
  height: 2.5rem;
  background-color: hsla(var(--foreground) / 0.05);
  border: 1px solid hsla(var(--foreground) / 0.08);
  color: hsl(var(--foreground));
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.search-glass::placeholder {
  color: hsl(var(--muted-foreground));
}

.search-glass:focus {
  border-color: hsl(var(--primary) / 0.6);
  background-color: hsla(var(--foreground) / 0.08);
}

.nav-link-premium {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  transition: color 0.2s ease;
}

.nav-link-premium:hover {
  color: hsl(var(--foreground));
}

.nav-link-premium::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  background: hsl(var(--primary));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.nav-link-premium:hover::after {
  transform: scaleX(1);
}

.menu-desktop::-webkit-scrollbar {
  display: none;
}

/* Botão VIP dourado com brilho passando */
.vip-gold {
  position: relative;
  overflow: hidden;
}

.vip-gold::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 215, 0, 0.3) 50%, transparent 100%);
  animation: vip-sweep 3s ease-in-out infinite;
  pointer-events: none;
}

.menu-desktop {
  display: flex;
}

.search-desktop {
  display: block;
}

@media (max-width: 1023px) {

  .menu-desktop,
  .search-desktop {
    display: none;
  }
}

#navbar-search-input,
#navbar-search-results {
  z-index: 9999 !important;
}

/* ==========================================================================
   Formulários
   ========================================================================== */

.input-form {
  background-color: #292929;
  border: 0px solid white;
  border-radius: 15px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  height: 63px;
  color: white;
  padding-left: 1em;
  padding-top: 2px;
}

.input-form::placeholder {
  color: #484848;
  font-size: 17px;
}

.payment-method-selected {
  border: 2px solid #ff7c0f !important;
  transition: 0.2s;
}

/* ==========================================================================
   Hero / fundos
   ========================================================================== */

@keyframes anim {
  0% {
    transform: translateY(-202px)
  }

  33%,
  to {
    transform: translateY(202px)
  }
}

.hero-bg-wrapper {
  pointer-events: none;
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 287px;
  top: 0;
}

.hero-bg {
  left: calc(50vw - 624px);
  pointer-events: none;
  position: absolute;
  top: 50px;
  width: 1248px;
  overflow: hidden;
}

.bg-top {
  background-image: url('https://cdn.centralcart.com.br/public/assets/templates/KOPY/bg-top.png');
  height: 202px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.bg-mask {
  mask-image: url('https://cdn.centralcart.com.br/public/assets/templates/KOPY/bg-mask.png');
  transition: 1s cubic-bezier(.6, .6, 0, 1) opacity;
  left: 0;
  -webkit-mask-size: cover;
  mask-size: cover;
  top: 0;
  width: 100%;
  z-index: 9;
  mask-repeat: no-repeat;
  height: 100%;
  position: absolute;
}

.bg-mask>div {
  animation: anim 6s infinite cubic-bezier(.35, .35, .3, .7);
  background: linear-gradient(180deg, hsl(var(--primary) / 0.5) 0%, hsl(var(--primary)) 100%, hsl(var(--primary)) 100%, hsl(var(--primary) / 0.5) 0%);
  height: 200px;
  position: relative;
  top: 0;
  z-index: 88888;
  width: 100%;
}

.hero-lights {
  background: black;
  background: linear-gradient(254.73deg, #00000000 0.18%, #00000000 85.87%);
  content: "";
  height: 1327px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.background-donators {
  background: black;
  background: linear-gradient(254.73deg, #000000 0.18%, #000000 85.87%);
}

.footer-bg {
  z-index: 1;
  height: 300px;
  background-color: black;
  -webkit-mask-image: url('https://cdn.centralcart.com.br/public/assets/templates/KOPY/footer-bg.png');
  mask-image: url('https://cdn.centralcart.com.br/public/assets/templates/KOPY/footer-bg.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  position: relative;
}

/* ==========================================================================
   Listagem de produtos
   ========================================================================== */

/* Container que "esconde" os espaços em branco entre os cards */
.no-whitespace-container {
  font-size: 0;
  letter-spacing: -1px;
}

.no-whitespace-container>div,
.no-whitespace-container>h3 {
  font-size: 16px;
  letter-spacing: normal;
}

#product-list {
  pointer-events: none;
}

#product-list>* {
  pointer-events: auto;
}

/* O estado inicial escondido só se aplica quando há JS para revelar os cards.
   Sem a classe `.js` (JS desligado, bloqueado ou quebrado) o conteúdo aparece
   normalmente — produto invisível é pior do que produto sem animação. */
.js .package-reveal,
.js .reveal-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: var(--delay, 0s);
}

.js .package-reveal.visible,
.js .reveal-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* .category-loader não tem ninguém que adicione `.visible`, então não pode
   nascer escondido (esta classe não é usada hoje; fica segura se for usada). */
.category-loader {
  transition: opacity .5s ease-out, transform .5s ease-out;
}

.category-loader.visible {
  opacity: 1;
  transform: translateY(0);
}

.mingcute--loading-line {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='mingcuteLoadingLine0' x1='50%25' x2='50%25' y1='5.271%25' y2='91.793%25'%3E%3Cstop offset='0%25' stop-color='%23000'/%3E%3Cstop offset='100%25' stop-color='%23000' stop-opacity='0.55'/%3E%3C/linearGradient%3E%3ClinearGradient id='mingcuteLoadingLine1' x1='50%25' x2='50%25' y1='8.877%25' y2='90.415%25'%3E%3Cstop offset='0%25' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='100%25' stop-color='%23000' stop-opacity='0.55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='url(%23mingcuteLoadingLine0)' d='M8.886.006a1 1 0 0 1 .22 1.988A8.001 8.001 0 0 0 10 17.944v2c-5.523 0-10-4.476-10-10C0 4.838 3.848.566 8.886.007Z' transform='translate(2 2.055)'/%3E%3Cpath fill='url(%23mingcuteLoadingLine1)' d='M14.322 1.985a1 1 0 0 1 1.392-.248A9.99 9.99 0 0 1 20 9.945c0 5.523-4.477 10-10 10v-2a8 8 0 0 0 4.57-14.567a1 1 0 0 1-.248-1.393' transform='translate(2 2.055)'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* ==========================================================================
   Card de produto
   ========================================================================== */

.product-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.product-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  border-color: hsl(var(--primary) / 0.5) !important;
}

.product-card .add-to-cart-final:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px hsl(var(--primary) / 0.4);
}

/* Card em destaque */
.highlighted-card {
  animation: smoothGlow 0.6s ease-in-out infinite;
}

@keyframes smoothGlow {

  0%,
  100% {
    box-shadow: 0 0 6px hsl(var(--primary)), 0 0 15px hsl(var(--primary) / 0.2);
  }

  50% {
    box-shadow: 0 0 12px hsl(var(--primary)), 0 0 30px hsl(var(--primary) / 0.3);
  }
}

/* Card em promoção */
@keyframes saleGlow {

  0%,
  100% {
    box-shadow: 0 0 8px hsl(var(--primary) / 0.3), 0 0 20px hsl(var(--primary) / 0.1);
  }

  50% {
    box-shadow: 0 0 15px hsl(var(--primary) / 0.5), 0 0 35px hsl(var(--primary) / 0.2);
  }
}

.sale-card-glow {
  animation: saleGlow 2s ease-in-out infinite;
}

.sale-card-glow:hover {
  box-shadow: 0 0 25px hsl(var(--primary) / 0.5), 0 0 50px hsl(var(--primary) / 0.2) !important;
}

@keyframes badgePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

.sale-badge-pulse {
  animation: badgePulse 1.5s ease-in-out infinite;
}

/* O card não é clicável (só o botão) */
.group:not(.add-to-cart-final) {
  cursor: default;
}

.add-to-cart-final {
  cursor: pointer;
}

/* ==========================================================================
   Notificações
   ========================================================================== */

.cc-simple-notification {
  z-index: 9999 !important;
}

/* ==========================================================================
   Modal de variáveis
   ========================================================================== */

#variables-modal {
  z-index: 10000 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
}

#variables-modal.hidden {
  display: none !important;
}

#variables-modal>div {
  position: relative !important;
  margin: auto !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}

@keyframes varsModalIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(15px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#modal-variables-container select option {
  background: #292929;
  color: #E8E8E8;
  padding: 8px;
}

#modal-variables-container select[style*="border-color: rgb(239, 68, 68)"],
#modal-variables-container input[style*="border-color: rgb(239, 68, 68)"] {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

#modal-variables-container::-webkit-scrollbar {
  width: 4px;
}

#modal-variables-container::-webkit-scrollbar-track {
  background: transparent;
}

#modal-variables-container::-webkit-scrollbar-thumb {
  background: hsl(var(--primary));
  border-radius: 2px;
}

@media (max-width: 640px) {
  #variables-modal {
    padding: 0.5rem !important;
  }

  #variables-modal>div>div {
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   Drawer do carrinho
   ========================================================================== */

@keyframes fade-in {
  from {
    background-color: rgba(0, 0, 0, 0);
  }

  to {
    background-color: rgba(0, 0, 0, 0.8);
  }
}

@keyframes fade-out {
  from {
    background-color: rgba(0, 0, 0, 0.8);
  }

  to {
    background-color: rgba(0, 0, 0, 0);
  }
}

@keyframes slide-in {
  from {
    transform: translateX(500px);
  }

  to {
    transform: translateX(0px);
  }
}

@keyframes slide-out {
  from {
    transform: translateX(0px);
  }

  to {
    transform: translateX(500px);
  }
}

body.cart-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
}

#cart-drawer[data-state="open"] {
  animation: fade-in 0.4s forwards;
}

#cart-drawer[data-state="closed"] {
  animation: fade-out 0.4s forwards;
}

#cart-drawer[data-state="open"]>div {
  animation: slide-in 0.4s forwards;
}

#cart-drawer[data-state="closed"]>div {
  animation: slide-out 0.4s forwards;
}

/* ==========================================================================
   Dialogs
   ========================================================================== */

.dialog[data-state="open"] {
  animation: fade-in 0.4s forwards;
}

.dialog[data-state="closed"] {
  animation: fade-out 0.4s forwards;
}

.dialog[data-state="open"]>div {
  animation: dialog-in 0.2s forwards;
}

.dialog[data-state="closed"]>div {
  animation: dialog-out 0.2s forwards;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    scale: 50%;
  }

  to {
    opacity: 1;
    scale: 100%;
  }
}

@keyframes dialog-out {
  from {
    opacity: 1;
    scale: 100%;
  }

  to {
    opacity: 0;
    scale: 50%;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: scaleY(0);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes slideInMobile {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInSub {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes vip-sweep {
  0% {
    left: -100%;
  }

  50% {
    left: 120%;
  }

  100% {
    left: 120%;
  }
}

@keyframes loading {
  0% {
    left: -50%;
  }

  to {
    left: 100%;
  }
}

#package-gallery-slider:not(.is-ready) .keen-slider__slide,
#hero-banner-slider:not(.is-ready) .keen-slider__slide {
  min-width: 100%;
}

/* ==========================================================================
   Efeitos de destaque (usados pelo componente product-highlight)
   ========================================================================== */

.brilho-product {
  border-color: transparent !important;
  overflow: visible !important;
  animation: brilho-breathe 4.5s ease-in-out infinite alternate;
}

.brilho-product>div:first-child {
  border-top-left-radius: 0.7rem;
  border-top-right-radius: 0.7rem;
}

.brilho-product::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2.5px;
  z-index: 4;
  pointer-events: none;
  background: hsl(var(--primary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.brilho-accent {
  background: linear-gradient(90deg, transparent, hsl(var(--primary)), transparent);
  filter: drop-shadow(0 0 6px hsl(var(--primary) / 0.7));
}

.brilho-sheen::before {
  content: "";
  position: absolute;
  top: -60%;
  height: 220%;
  width: 60px;
  left: -30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: rotate(18deg);
  filter: blur(2px);
  animation: brilho-sweep 5.5s ease-in-out infinite;
}

@keyframes brilho-sweep {
  0% {
    left: -30%;
    opacity: 0;
  }

  6% {
    opacity: 1;
  }

  26% {
    left: 120%;
    opacity: 1;
  }

  34% {
    left: 120%;
    opacity: 0;
  }

  100% {
    left: 120%;
    opacity: 0;
  }
}

@keyframes brilho-breathe {
  0% {
    box-shadow: 0 10px 34px -12px rgba(0, 0, 0, 0.75), 0 6px 18px -10px hsl(var(--primary) / 0.28);
  }

  100% {
    box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.8), 0 8px 26px -10px hsl(var(--primary) / 0.45);
  }
}

.hl-badge-tag {
  clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%);
  -webkit-mask: radial-gradient(circle 2.5px at 8px 50%, transparent 2.5px, #000 3px);
  mask: radial-gradient(circle 2.5px at 8px 50%, transparent 2.5px, #000 3px);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

.hl-badge-static {
  transform: translate(-50%, -50%);
  animation: hl-badge 2.6s ease-in-out infinite;
}

@keyframes hl-badge {

  0%,
  100% {
    transform: translate(-50%, calc(-50% + 3px));
  }
}

.hl-badge-swing {
  transform-origin: 8px 50%;
  animation: hl-badge-swing 2.4s ease-in-out infinite;
}

@keyframes hl-badge-swing {

  0%,
  100% {
    transform: rotate(7deg);
  }

  50% {
    transform: rotate(-7deg);
  }
}

.aurora-product {
  border-color: transparent !important;
  overflow: visible !important;
  isolation: isolate;
}

.aurora-product>div:first-child {
  border-top-left-radius: 0.7rem;
  border-top-right-radius: 0.7rem;
}

.aurora-halo {
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: calc(0.7rem + 6px);
  pointer-events: none;
  overflow: hidden;
  -webkit-mask: radial-gradient(ellipse 82% 82% at 50% 50%, transparent 55%, #000 82%);
  mask: radial-gradient(ellipse 82% 82% at 50% 50%, transparent 55%, #000 82%);
}

.aurora-halo-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  translate: -50% -50%;
  background: conic-gradient(hsl(var(--primary)),
      hsl(var(--primary) / 0.25),
      hsl(var(--primary)),
      hsl(var(--primary) / 0.25),
      hsl(var(--primary)));
  filter: blur(8px);
  will-change: transform;
  animation: aurora-spin 7s linear infinite;
}

@keyframes aurora-spin {
  to {
    transform: rotate(360deg);
  }
}

@property --orbita-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.orbita-product {
  border-color: transparent !important;
}

.orbita-product::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3.5px;
  z-index: 4;
  pointer-events: none;
  background: conic-gradient(from var(--orbita-angle),
      transparent 0deg,
      transparent 60deg,
      hsl(var(--primary) / 0.5) 80deg,
      hsl(var(--primary)) 92deg,
      hsl(var(--primary) / 0.5) 104deg,
      transparent 124deg,
      transparent 240deg,
      hsl(var(--primary) / 0.5) 260deg,
      hsl(var(--primary)) 272deg,
      hsl(var(--primary) / 0.5) 284deg,
      transparent 304deg,
      transparent 360deg);
  filter: brightness(1.25) drop-shadow(0 0 8px hsl(var(--primary) / 0.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: orbita-spin 3.5s linear infinite;
}

@keyframes orbita-spin {
  to {
    --orbita-angle: 360deg;
  }
}

.noise-product {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  border-color: transparent !important;
  --noise-color: hsl(var(--primary));
  --noise-light: color-mix(in srgb, hsl(var(--primary)) 55%, white);
  --noise-gradient: linear-gradient(-30deg,
      color-mix(in srgb, var(--noise-light) 40%, transparent),
      transparent 30%,
      transparent 70%,
      color-mix(in srgb, var(--noise-color) 40%, transparent));
}

.noise-product:hover {
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  box-shadow: none !important;
}

.noise-product>div:first-child {
  border-top-left-radius: 0.7rem;
  border-top-right-radius: 0.7rem;
}

.noise-product .noise-border-wrapper {
  position: absolute;
  inset: -2px;
  border-radius: calc(0.7rem + 2px);
  pointer-events: none;
  z-index: 5;
}

.noise-product .noise-bg-glow {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  filter: blur(28px);
  transform: scale(1.05);
  opacity: 0.55;
  z-index: -2;
  background: linear-gradient(-30deg, var(--noise-light), transparent, var(--noise-color));
  pointer-events: none;
}

.noise-product .noise-border-outer {
  position: absolute;
  inset: 0;
  border: 2px solid color-mix(in srgb, var(--noise-color) 50%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

.noise-product .noise-border-main {
  position: absolute;
  inset: 0;
  border: 2px solid var(--noise-color);
  border-radius: inherit;
  pointer-events: none;
  filter: url(#turbulent-displace);
}

.noise-product .noise-glow-1 {
  position: absolute;
  inset: 0;
  border: 2px solid color-mix(in srgb, var(--noise-color) 60%, transparent);
  border-radius: inherit;
  pointer-events: none;
  filter: blur(1px);
}

.noise-product .noise-glow-2 {
  position: absolute;
  inset: 0;
  border: 2px solid var(--noise-light);
  border-radius: inherit;
  pointer-events: none;
  filter: blur(4px);
  opacity: 0.85;
}

.noise-product .noise-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: overlay;
  transform: scale(1.08);
  filter: blur(14px);
  background: var(--noise-gradient);
}

/* ==========================================================================
   Texto branco no site
   ==========================================================================
   Tudo que é texto fica branco. Ficam de fora:
     - a navbar (header + drawer mobile), que mantém os tons próprios;
     - os botões e qualquer superfície com fundo colorido (--primary),
       onde o texto é preto de propósito e ficaria ilegível se virasse branco.
   Para reverter, basta apagar este bloco. */
body :is(p, span, a, li, h1, h2, h3, h4, h5, h6, label, small, strong, b, em, div, td, th, button, select, option, figcaption, blockquote):not(
  #main-header, #main-header *,
  #mobile-drawer, #mobile-drawer *,
  .bg-primary, .bg-primary *,
  .btn-primary, .btn-primary *,
  [style*="hsl(var(--primary))"], [style*="hsl(var(--primary))"] *
) {
  color: #ffffff !important;
}