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;
}

@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);
  }
}


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

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

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

html.como-comprar-video-open {
  overflow: hidden;
}

body.como-comprar-video-open .krblox-crisp-mascot-wrap {
  transition: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.como-comprar-video-modal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
}

.como-comprar-video-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.como-comprar-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.82);
  transform: translateZ(0);
}

.como-comprar-video-modal__panel {
  position: relative;
  z-index: 1;
  transform: translateZ(0);
}

#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;
}

.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%;
  }
}

.reveal-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: var(--delay, 0s);
}

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

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

.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));
}

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

  to {
      left: 100%;
  }
}

.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;
}

.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;
}

.animate-float {
  animation: floatRandom 15s ease-in-out infinite;
}

@keyframes floatRandom {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    transform: translate(-6px, -10px) rotate(-1deg);
  }
  40% {
    transform: translate(4px, -5px) rotate(1deg);
  }
  60% {
    transform: translate(-4px, -12px) rotate(-1.5deg);
  }
  80% {
    transform: translate(3px, -7px) rotate(1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


@keyframes roblox-disclaimer-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.roblox-disclaimer-enter.roblox-disclaimer-visible {
  animation: roblox-disclaimer-in 0.45s ease-out forwards;
}

.roblox-msg-enter.roblox-msg-visible {
  animation: roblox-disclaimer-in 0.4s ease-out forwards;
}

.gradient-text {
  background: linear-gradient(
    45deg,
    hsl(var(--primary)),
    hsl(var(--primary) / 0.8),
    hsl(var(--primary) / 0.6),
    hsl(var(--primary) / 0.9),
    hsl(var(--primary)),
    hsl(var(--primary) / 0.7),
    hsl(var(--primary) / 0.5),
    hsl(var(--primary) / 0.8)
  );
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease-in-out infinite;
}

.package-green-gradient-text {
  color: #22c55e !important;
  display: inline-block !important;
  background: linear-gradient(
    45deg,
    #22c55e,
    #4ade80,
    #86efac,
    #16a34a,
    #22c55e,
    #4ade80,
    #86efac,
    #16a34a
  );
  background-size: 400% 400% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: gradient-shift 3s ease-in-out infinite !important;
}

@supports not (-webkit-background-clip: text) {
  .package-green-gradient-text {
    background: none !important;
    color: #22c55e !important;
  }
}


/* Meus pedidos — linha do pedido: vermelho (#ef4444) + neon suave */
@keyframes order-id-neon-pulse {
  0%,
  100% {
    text-shadow:
      0 0 6px rgba(239, 68, 68, 0.85),
      0 0 14px rgba(220, 38, 38, 0.55),
      0 0 26px rgba(185, 28, 28, 0.28);
    filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.55));
  }
  50% {
    text-shadow:
      0 0 10px rgba(248, 113, 113, 0.95),
      0 0 22px rgba(239, 68, 68, 0.65),
      0 0 34px rgba(220, 38, 38, 0.38);
    filter: drop-shadow(0 0 9px rgba(239, 68, 68, 0.7));
  }
}

span.account-order-id-neon {
  color: #ef4444 !important;
  -webkit-text-fill-color: #ef4444 !important;
  display: inline-block;
  text-shadow:
    0 0 8px rgba(239, 68, 68, 0.65),
    0 0 16px rgba(220, 38, 38, 0.42),
    0 0 28px rgba(185, 28, 28, 0.22);
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5));
  animation: order-id-neon-pulse 3.2s ease-in-out infinite;
}

/* KRBlox: gradiente fixo (sem animação) — uso em badges/labels */
.krblox-static-word {
  display: inline-block;
  background: linear-gradient(
    45deg,
    hsl(var(--primary)),
    hsl(var(--primary) / 0.85),
    hsl(var(--primary) / 0.65),
    hsl(var(--primary))
  );
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* KRBlox: gradiente animado + leve movimento em onda */
.krblox-wave-word {
  display: inline-block;
  background: linear-gradient(
    45deg,
    hsl(var(--primary)),
    hsl(var(--primary) / 0.8),
    hsl(var(--primary) / 0.6),
    hsl(var(--primary) / 0.9),
    hsl(var(--primary)),
    hsl(var(--primary) / 0.7),
    hsl(var(--primary) / 0.5),
    hsl(var(--primary) / 0.8)
  );
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease-in-out infinite, krblox-wave-y 2.4s ease-in-out infinite;
}

@keyframes krblox-wave-y {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

/* KRBlox: “shimmer” no próprio texto (gradiente deslizante) */
.krblox-shimmer-word {
  display: inline-block;
  color: transparent;
  background-image: linear-gradient(
    110deg,
    hsl(var(--primary) / 0.45) 0%,
    hsl(var(--primary) / 0.95) 45%,
    #ffffff 50%,
    hsl(var(--primary) / 0.95) 55%,
    hsl(var(--primary) / 0.45) 100%
  );
  background-size: 240% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: krblox-shimmer-slide 2.2s linear infinite;
}

@keyframes krblox-shimmer-slide {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}

/* KRBlox: “magnético” (micro jitter lateral) */
.krblox-magnetic-word {
  display: inline-block;
  background: linear-gradient(
    45deg,
    hsl(var(--primary)),
    hsl(var(--primary) / 0.75),
    hsl(var(--primary)),
    hsl(var(--primary) / 0.55)
  );
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3.2s ease-in-out infinite, krblox-magnetic-jitter 1.35s ease-in-out infinite;
}

@keyframes krblox-magnetic-jitter {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(0.6px);
  }
  50% {
    transform: translateX(-0.7px);
  }
  75% {
    transform: translateX(0.45px);
  }
}

/* KRBlox: pulso suave de brilho */
.krblox-pulse-glow-word {
  display: inline-block;
  background: linear-gradient(
    45deg,
    hsl(var(--primary)),
    hsl(var(--primary) / 0.85),
    hsl(var(--primary) / 0.65),
    hsl(var(--primary))
  );
  background-size: 220% 220%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 2.8s ease-in-out infinite, krblox-pulse-glow 1.8s ease-in-out infinite;
}

@keyframes krblox-pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  50% {
    filter: drop-shadow(0 0 6px hsl(var(--primary) / 0.35));
  }
}

/* KRBlox: leve “flicker” de opacidade */
/* Rodapé — efeito arcade ciano/roxo no “gamer” (único no site) */
.krblox-gamer-word {
  display: inline;
  font-weight: 600;
  background: linear-gradient(
    110deg,
    #67e8f9 0%,
    #a78bfa 38%,
    #f472b6 50%,
    #a78bfa 62%,
    #67e8f9 100%
  );
  background-size: 240% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: krblox-gamer-arcade 3.2s linear infinite;
  filter: drop-shadow(0 0 7px rgba(167, 139, 250, 0.4));
}

@keyframes krblox-gamer-arcade {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 240% 50%;
  }
}

@supports not (-webkit-background-clip: text) {
  .krblox-gamer-word {
    background: none;
    -webkit-text-fill-color: inherit;
    color: #a78bfa;
    filter: none;
  }
}

.krblox-flicker-word {
  display: inline-block;
  background: linear-gradient(
    45deg,
    hsl(var(--primary)),
    hsl(var(--primary) / 0.7),
    hsl(var(--primary) / 0.55),
    hsl(var(--primary) / 0.85)
  );
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3.4s ease-in-out infinite, krblox-flicker 1.25s steps(2, end) infinite;
}

@keyframes krblox-flicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.78;
  }
}

/* Mascote KRBlox: leve “respiração” + brilho pulsante (combina com o contorno vermelho da arte) */
.krblox-mascot-fx {
  transform-origin: 55% 85%;
  will-change: transform, filter;
  animation:
    krblox-mascot-bob 2.8s ease-in-out infinite,
    krblox-mascot-glow 2.2s ease-in-out infinite;
}

@keyframes krblox-mascot-bob {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-3px) rotate(-0.6deg);
  }
}

@keyframes krblox-mascot-glow {
  0%, 100% {
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 0 rgba(255, 64, 64, 0));
  }
  50% {
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(255, 64, 64, 0.35));
  }
}

.spark-text {
  position: relative;
  display: inline-block;
  animation: spark-flicker 1.35s ease-in-out infinite;
  text-shadow:
    0 0 4px hsl(var(--primary) / 0.45),
    0 0 8px hsl(var(--primary) / 0.3);
}

@keyframes spark-flicker {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
    text-shadow:
      0 0 4px hsl(var(--primary) / 0.45),
      0 0 8px hsl(var(--primary) / 0.3);
  }
  18% {
    opacity: 0.75;
    transform: translateY(-0.2px);
    text-shadow:
      0 0 6px hsl(var(--primary) / 0.65),
      0 0 12px hsl(var(--primary) / 0.45);
  }
  38% {
    opacity: 1;
    transform: translateY(0.2px);
    text-shadow:
      0 0 3px hsl(var(--primary) / 0.35),
      0 0 7px hsl(var(--primary) / 0.25);
  }
  60% {
    opacity: 0.82;
    transform: translateY(-0.3px);
    text-shadow:
      0 0 7px hsl(var(--primary) / 0.7),
      0 0 14px hsl(var(--primary) / 0.5);
  }
}


.glass {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
}

.glass::after {
  content: "";
  transition: all 850ms cubic-bezier(.19,1,.22,1);
  background-color: white;
  opacity: .2;
  width: 50px;
  height: 200px;
  position: absolute;
  left: -85px;
  top: -80px;
  z-index: 1;
  transform: rotate(30deg);
  filter: blur(2px);
}

.glass:hover::after {
  left: 130%;
}

.glass-secondary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
}

.glass-secondary::after {
  content: "";
  transition: all 850ms cubic-bezier(.19,1,.22,1);
  background: linear-gradient(to right, transparent, hsl(var(--secondary) / 0.15), transparent);
  width: 100%;
  height: 200%;
  position: absolute;
  left: -150%;
  top: -50%;
  z-index: 1;
  transform: rotate(30deg);
  filter: blur(10px);
}

.glass-secondary:hover::after {
  left: 150%;
}

.faq-item .faq-content {
  overflow: hidden;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:not([open]) .faq-content {
  height: 0;
}

.faq-item summary {
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  display: none;
  content: '';
}

/* MM2 only: card glow similar to reference */
.mm2-offer-image-wrapper {
  border-radius: 0.5rem;
  isolation: isolate;
}

.mm2-offer-image {
  position: relative;
  z-index: 1;
  display: block;
}

.mm2-offer-image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: 0.5rem;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 14px rgba(255, 255, 255, 0.04),
    0 0 6px rgba(255, 255, 255, 0.05);
}

.mm2-shine-layer {
  display: none !important;
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -140%;
  width: 4%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 46%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 54%
  );
  filter: none;
  mix-blend-mode: normal;
  animation: mm2-card-shine-pass 2.8s linear infinite;
}

/* Fallback for HTML currently live in production */
.mm2-live-shine-wrap {
  isolation: isolate;
}

.mm2-live-shine-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: 0.5rem;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 14px rgba(255, 255, 255, 0.04),
    0 0 6px rgba(255, 255, 255, 0.05);
}

.mm2-live-shine-layer {
  display: none !important;
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -140%;
  width: 4%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 46%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 54%
  );
  filter: none;
  mix-blend-mode: normal;
  animation: mm2-card-shine-pass 2.8s linear infinite;
}

@keyframes mm2-card-shine-pass {
  from { left: -140%; }
  to { left: 140%; }
}

/* Category page: navegação de subcategorias (vermelho KRBlox, não o primary do painel) */
.category-page {
  --krblox-red: 0 84% 60%;
  --krblox-red-strong: 0 72% 51%;
  --krblox-red-deep: 0 63% 42%;
}

.category-page-header {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 0.35rem;
}

.category-page-header__title-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
}

.category-page-header__title-block {
  flex: 1 1 auto;
  min-width: 0;
}

.category-page-header__back:hover {
  border-color: hsl(var(--krblox-red) / 0.45);
  background: hsl(var(--krblox-red) / 0.12);
}

.category-page-header__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-bottom: 0.35rem;
  max-width: 100%;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: #f87171 !important;
  -webkit-text-fill-color: #f87171 !important;
  transition: color 0.2s ease;
}

.category-page-header__breadcrumb:hover {
  color: #ef4444 !important;
  -webkit-text-fill-color: #ef4444 !important;
}

.category-subnav {
  width: 100%;
  max-width: 100%;
}

.category-subnav__bar {
  display: flex;
  align-items: center;
  gap: 0.65rem 0.85rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid rgba(239, 68, 68, 0.38);
  background: rgb(var(--muted-solid));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  width: 100%;
  max-width: 100%;
}

.category-subnav__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ef4444 !important;
  -webkit-text-fill-color: #ef4444 !important;
  white-space: nowrap;
}

.category-subnav__label-icon {
  width: 0.9rem;
  height: 0.9rem;
  color: #ef4444;
  stroke: #ef4444;
  opacity: 0.9;
}

.category-subnav__scroll-hint {
  display: none;
}

.category-subnav__track {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
}

.category-subnav__fade {
  display: none;
  pointer-events: none;
}

.category-subnav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.15rem 0.15rem 0.15rem 0.2rem;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.category-subnav__list::-webkit-scrollbar {
  display: none;
}

@media (max-width: 639px) {
  .category-subnav__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .category-subnav--scrollable .category-subnav__scroll-hint {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    margin: 0 0 0.15rem 0;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #f87171;
  }

  .category-subnav--scrollable.category-subnav--at-end .category-subnav__scroll-hint {
    opacity: 0;
    visibility: hidden;
  }

  .category-subnav__scroll-hint-icon {
    width: 0.95rem;
    height: 0.95rem;
    animation: category-subnav-hint-nudge 1.4s ease-in-out infinite;
  }

  .category-subnav--scrollable .category-subnav__fade {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 2.25rem;
  }

  .category-subnav__fade--left {
    left: 0;
    background: linear-gradient(to right, rgb(var(--background)) 15%, transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .category-subnav--scrollable:not(.category-subnav--at-start) .category-subnav__fade--left {
    opacity: 1;
  }

  .category-subnav__fade--right {
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.15rem;
    background: linear-gradient(to left, rgb(var(--muted-solid)) 20%, transparent 85%);
    transition: opacity 0.25s ease;
  }

  .category-subnav--scrollable.category-subnav--at-end .category-subnav__fade--right {
    opacity: 0;
  }

  .category-subnav__fade-icon {
    width: 1rem;
    height: 1rem;
    color: #ef4444;
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.45));
    animation: category-subnav-fade-pulse 1.5s ease-in-out infinite;
  }

  .category-subnav--scrollable .category-subnav__list {
    padding-right: 1.75rem;
  }
}

@keyframes category-subnav-hint-nudge {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.85;
  }
  50% {
    transform: translateX(3px);
    opacity: 1;
  }
}

@keyframes category-subnav-fade-pulse {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.65;
  }
  50% {
    transform: translateX(2px);
    opacity: 1;
  }
}

@media (min-width: 640px) {
  /* Borda só até o conteúdo; se não couber, ocupa no máximo a largura da tela */
  .category-subnav:not(.category-subnav--scrollable) {
    width: fit-content;
    max-width: 100%;
  }

  .category-subnav:not(.category-subnav--scrollable) .category-subnav__bar {
    width: fit-content;
    max-width: 100%;
  }

  .category-subnav:not(.category-subnav--scrollable) .category-subnav__track {
    flex: 0 0 auto;
    width: max-content;
    overflow: visible;
  }

  .category-subnav:not(.category-subnav--scrollable) .category-subnav__list {
    overflow: visible;
  }

  .category-subnav--scrollable {
    width: 100%;
  }

  .category-subnav--scrollable .category-subnav__bar {
    width: 100%;
  }

  .category-subnav--scrollable .category-subnav__track {
    flex: 1 1 auto;
    width: auto;
    overflow: hidden;
  }

  .category-subnav__track {
    overflow: hidden;
  }

  /* Só escurece a direita; à esquerda fica limpo (evita sombra em CONTAS) */
  .category-subnav--scrollable:not(.category-subnav--at-end) .category-subnav__track {
    mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 1.35rem),
      transparent 100%
    );
  }

  .category-subnav--scrollable:not(.category-subnav--at-start):not(.category-subnav--at-end) .category-subnav__track {
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 0.75rem,
      #000 calc(100% - 1.35rem),
      transparent 100%
    );
  }

  .category-subnav--scrollable:not(.category-subnav--at-end) .category-subnav__track::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1.35rem;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, rgb(var(--muted-solid)), transparent);
    z-index: 1;
  }
}

.category-subnav__list a.category-subnav__link,
.category-subnav__list a.category-subnav__link:visited {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.85rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid rgba(239, 68, 68, 0.42) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fafafa !important;
  -webkit-text-fill-color: #fafafa !important;
  background-image: none !important;
  text-shadow: none !important;
  animation: none !important;
  white-space: nowrap;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.category-subnav__list a.category-subnav__link:hover {
  border-color: rgba(248, 113, 113, 0.75) !important;
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fee2e2 !important;
  -webkit-text-fill-color: #fee2e2 !important;
}

.category-subnav__list a.category-subnav__link.is-active {
  border-color: rgba(252, 165, 165, 0.85) !important;
  background: rgba(239, 68, 68, 0.34) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35);
}

/* Evita herdar amarelo do text-primary / gradientes do tema */
.category-subnav a.text-primary,
.category-subnav .text-primary {
  color: #ef4444 !important;
  -webkit-text-fill-color: #ef4444 !important;
}

/* Direct fallback: apply on current live card markup */
.category-page a.package > div.overflow-hidden.relative::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -140%;
  width: 65%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.03) 38%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.03) 62%,
    rgba(255, 255, 255, 0) 80%
  );
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: mm2-card-shine-pass 2.8s linear infinite;
}


/* Home: category cards shine effect */
.home-category-card {
  isolation: isolate;
}

.home-category-card::after {
  content: "";
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -150%;
  width: 60%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.03) 38%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.03) 62%,
    rgba(255, 255, 255, 0) 80%
  );
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: mm2-card-shine-pass 3.2s linear infinite;
}

/* Package page: subtle, unique emphasis for announcement description title */
.package-announcement-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
  color: #ef4444 !important;
  background: linear-gradient(
    90deg,
    #ef4444 0%,
    #991b1b 28%,
    #111111 52%,
    #7f1d1d 74%,
    #ef4444 100%
  );
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.22);
  animation:
    package-title-red-black-flow 2.9s ease-in-out infinite,
    package-title-red-black-float 2.2s ease-in-out infinite;
}

.package-announcement-title::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
  animation: package-title-ping-soft 2.2s ease-in-out infinite;
}

.package-announcement-title::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0;
  bottom: -0.2rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.15),
    rgba(239, 68, 68, 0.85),
    rgba(0, 0, 0, 0.15)
  );
  transform-origin: left center;
  animation: package-title-underline-wave 2.2s ease-in-out infinite;
}

@keyframes package-title-ping-soft {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 hsl(var(--primary) / 0.28);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 7px rgba(239, 68, 68, 0);
    opacity: 1;
  }
}

@keyframes package-title-red-black-flow {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes package-title-underline-wave {
  0%,
  100% {
    opacity: 0.65;
    transform: scaleX(0.96);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes package-title-red-black-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}

/* Sailor Piece — bloco "ITENS EM PROMOÇÃO": destaque + cronômetro (category-loader) */
.category-promo-section {
  position: relative;
}

.category-promo-banner {
  border: 2px solid transparent;
  background:
    linear-gradient(rgb(12, 13, 22) 0%, rgb(18, 12, 28) 100%) padding-box,
    linear-gradient(
      125deg,
      hsl(var(--primary)),
      #f97316,
      #eab308,
      hsl(var(--primary)),
      #f43f5e
    )
      border-box;
  background-size: 100% 100%, 220% 220%;
  animation: category-promo-banner-shift 4s ease infinite;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 24px hsl(var(--primary) / 0.35),
    0 0 48px rgba(249, 115, 22, 0.12);
}

@keyframes category-promo-banner-shift {
  0%,
  100% {
    background-position: 0% 0%, 0% 50%;
  }
  50% {
    background-position: 0% 0%, 100% 50%;
  }
}

.category-promo-banner__glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    ellipse at 50% 50%,
    hsl(var(--primary) / 0.45) 0%,
    transparent 55%
  );
  animation: category-promo-glow-pulse 2.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes category-promo-glow-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.05);
  }
}

.category-promo-banner__icon {
  color: #fb923c;
  filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.9));
  animation: category-promo-icon-flicker 1.4s ease-in-out infinite;
}

@keyframes category-promo-icon-flicker {
  0%,
  100% {
    transform: scale(1) rotate(-2deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.08) rotate(2deg);
    opacity: 0.88;
  }
}

.category-promo-banner__title {
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fde68a 25%,
    #fff 50%,
    #fdba74 75%,
    #fff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: category-promo-title-shine 3s linear infinite;
  text-shadow: 0 0 18px hsl(var(--primary) / 0.25);
}

@keyframes category-promo-title-shine {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

.category-promo-countdown {
  border: 1px solid hsl(var(--primary) / 0.45);
  background: linear-gradient(
    135deg,
    hsl(var(--primary) / 0.18) 0%,
    rgba(249, 115, 22, 0.12) 50%,
    hsl(var(--primary) / 0.1) 100%
  );
  box-shadow:
    0 0 20px hsl(var(--primary) / 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: category-promo-countdown-pulse 2.5s ease-in-out infinite;
}

@keyframes category-promo-countdown-pulse {
  0%,
  100% {
    box-shadow:
      0 0 16px hsl(var(--primary) / 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  50% {
    box-shadow:
      0 0 28px hsl(var(--primary) / 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

.category-promo-countdown__badge {
  color: #fde68a;
  text-shadow: 0 0 12px rgba(253, 230, 138, 0.5);
  letter-spacing: 0.06em;
}

.category-promo-countdown__timer {
  color: #fff;
  text-shadow:
    0 0 12px hsl(var(--primary) / 0.8),
    0 0 24px rgba(249, 115, 22, 0.35);
  min-width: 6.5ch;
}

/* Descrição do pacote: moldura animada na borda de todos os GIFs */
@property --krblox-gif-orbit-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.package-wrapper #package-description .krblox-gif-orbit-wrap {
  position: relative;
  isolation: isolate;
  display: table;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: 0;
  border-radius: var(--radius);
}

.package-wrapper #package-description .krblox-gif-orbit-wrap::before {
  --krblox-gif-frame: 2px;
  content: '';
  position: absolute;
  z-index: 0;
  inset: calc(-1 * var(--krblox-gif-frame));
  box-sizing: border-box;
  padding: var(--krblox-gif-frame);
  border-radius: calc(var(--radius) + var(--krblox-gif-frame));
  --krblox-gif-orbit-angle: 0deg;
  animation: krblox-gif-orbit-spin 4.5s linear infinite;
  background: conic-gradient(
    from var(--krblox-gif-orbit-angle),
    #450a0a 0deg,
    #7f1d1d 220deg,
    #991b1b 285deg,
    #dc2626 310deg,
    #f87171 322deg,
    #b91c1c 334deg,
    #7f1d1d 350deg,
    #450a0a 360deg
  );
  opacity: 0.88;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.package-wrapper #package-description .krblox-gif-orbit-wrap::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -4px;
  border-radius: calc(var(--radius) + 4px);
  --krblox-gif-orbit-angle: 0deg;
  animation: krblox-gif-orbit-spin 4.5s linear infinite;
  background: conic-gradient(
    from var(--krblox-gif-orbit-angle),
    transparent 0deg,
    transparent 300deg,
    rgba(220, 38, 38, 0.35) 315deg,
    rgba(248, 113, 113, 0.2) 325deg,
    transparent 340deg,
    transparent 360deg
  );
  filter: blur(5px);
  opacity: 0.55;
  pointer-events: none;
}

@keyframes krblox-gif-orbit-spin {
  to {
    --krblox-gif-orbit-angle: 360deg;
  }
}

.package-wrapper #package-description .krblox-gif-orbit-wrap img,
.package-wrapper #package-description .krblox-gif-orbit-wrap iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 230px;
  height: 230px;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
  aspect-ratio: auto;
  border-radius: var(--radius);
  vertical-align: top;
}