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

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

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

/* Sidebar categories */
.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;
}

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

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

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

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

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

@keyframes slideInSub {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Sidebar categories */


/* === Premium store visuals === */
:root {
  --card-surface: rgba(6, 11, 18, 0.76);
  --card-surface-strong: rgba(8, 14, 24, 0.92);
}

.store-theme {
  background:
    radial-gradient(circle at 15% 15%, hsl(var(--primary) / 0.18), transparent 22%),
    radial-gradient(circle at 85% 12%, rgba(110, 76, 255, 0.18), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(18, 187, 255, 0.12), transparent 28%),
    rgb(var(--background));
}

.store-theme::before,
.store-theme::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -5;
}

.store-theme::before {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.02), transparent 35%),
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.04), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.03), transparent 24%);
  animation: ambient-pan 18s linear infinite;
}

.store-theme::after {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.035), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.6;
}

@keyframes ambient-pan {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -1.25rem, 0) scale(1.02); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost {
  position: relative;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background-color 0.28s ease;
}

.btn-primary::before,
.btn-secondary::before,
.btn-outline::before,
.btn-ghost::before,
.package-card-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,0.2) 50%, transparent 85%);
  transform: translateX(-125%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover,
.btn-ghost:hover,
.package-card-cta:hover {
  transform: translateY(-2px);
}

.btn-primary:hover::before,
.btn-secondary:hover::before,
.btn-outline:hover::before,
.btn-ghost:hover::before,
.package-card-cta:hover::before {
  transform: translateX(125%);
}

.btn-primary {
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: linear-gradient(135deg, hsl(var(--primary) / 0.96), hsl(var(--primary) / 0.72)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 12px 30px hsl(var(--primary) / 0.35), 0 6px 18px rgba(0,0,0,0.35) !important;
}

.btn-secondary,
.btn-outline,
.btn-ghost {
  border-color: rgba(255,255,255,0.1) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important;
  backdrop-filter: blur(12px);
}

.package-card-shell {
  --card-accent-rgb: 56, 189, 248;
  --card-ember-rgb: 255, 156, 74;
  --card-accent-soft: rgba(var(--card-accent-rgb), 0.18);
  --card-accent-strong: rgba(var(--card-accent-rgb), 0.95);
  position: relative;
  isolation: isolate;
  padding: 2px;
  border-radius: 1.12rem;
  overflow: visible;
  transition: transform 0.32s ease;
}

.package-list > .reveal-fade-up:nth-child(4n + 1) .package-card-shell,
#similar-packages-slider .keen-slider__slide:nth-child(4n + 1) .package-card-shell {
  --card-accent-rgb: 41, 196, 255;
  --card-ember-rgb: 118, 234, 255;
}

.package-list > .reveal-fade-up:nth-child(4n + 2) .package-card-shell,
#similar-packages-slider .keen-slider__slide:nth-child(4n + 2) .package-card-shell {
  --card-accent-rgb: 255, 226, 74;
  --card-ember-rgb: 255, 165, 74;
}

.package-list > .reveal-fade-up:nth-child(4n + 3) .package-card-shell,
#similar-packages-slider .keen-slider__slide:nth-child(4n + 3) .package-card-shell {
  --card-accent-rgb: 180, 72, 255;
  --card-ember-rgb: 255, 134, 231;
}

.package-list > .reveal-fade-up:nth-child(4n + 4) .package-card-shell,
#similar-packages-slider .keen-slider__slide:nth-child(4n + 4) .package-card-shell {
  --card-accent-rgb: 28, 255, 197;
  --card-ember-rgb: 134, 255, 229;
}

.package-card-shell::before,
.package-card-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.package-card-shell::before {
  inset: -2px;
  padding: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(var(--card-accent-rgb), 0.26) 34%, rgba(var(--card-accent-rgb), 0.1) 100%);
  -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;
  opacity: 0.82;
  filter: drop-shadow(0 0 10px rgba(var(--card-accent-rgb), 0.12));
  animation: shell-frame-breathe 4.8s ease-in-out infinite;
}

.package-card-shell::after {
  inset: auto 12% -12px;
  height: 38px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(var(--card-accent-rgb), 0.32), transparent 72%);
  filter: blur(18px);
  opacity: 0.5;
  animation: underglow-breathe 3.2s ease-in-out infinite;
}

.package-card-shell.is-premium {
  transform: translateY(-2px);
}

.package-card-shell.is-premium::before {
  inset: -3px;
  padding: 3px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(var(--card-accent-rgb), 0.12) 16deg,
      rgba(var(--card-ember-rgb), 0.98) 34deg,
      rgba(255,255,255,0.96) 48deg,
      rgba(var(--card-accent-rgb), 0.96) 70deg,
      transparent 108deg,
      transparent 146deg,
      rgba(var(--card-ember-rgb), 0.92) 174deg,
      rgba(255,255,255,0.92) 190deg,
      rgba(var(--card-accent-rgb), 0.94) 212deg,
      transparent 246deg,
      transparent 304deg,
      rgba(var(--card-ember-rgb), 0.94) 324deg,
      transparent 356deg
    );
  -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;
  filter:
    drop-shadow(0 0 12px rgba(var(--card-accent-rgb), 0.38))
    drop-shadow(0 0 26px rgba(var(--card-ember-rgb), 0.34));
  opacity: 1;
  animation: premium-frame-breathe 1.9s ease-in-out infinite;
}

.package-card-shell.is-premium::after {
  inset: auto 10% -18px;
  height: 52px;
  background:
    radial-gradient(circle at center, rgba(var(--card-ember-rgb), 0.84), rgba(var(--card-accent-rgb), 0.5) 42%, transparent 74%);
  filter: blur(22px);
  opacity: 0.98;
  animation: premium-underglow 1.75s ease-in-out infinite;
}

.package-card-shell.is-featured,
.package-card-shell.is-ultimate-premium {
  transform: translateY(-3px);
}

.package-card-shell.is-premium.is-featured::before,
.package-card-shell.is-ultimate-premium::before {
  inset: -4px;
  animation-duration: 1.45s;
  opacity: 1;
}

.package-card-shell.is-premium.is-featured::after,
.package-card-shell.is-ultimate-premium::after {
  inset: auto 8% -18px;
  height: 60px;
  filter: blur(24px);
  opacity: 1;
  animation: premium-underglow 1.4s ease-in-out infinite;
}

.package-discount-balloon,
.package-highlight-badge {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.package-card-highlight-inline {
  display: none;
}

.package-discount-balloon {
  top: -1.15rem;
  left: 50%;
  transform: translate(-50%, 6px) scale(0.94);
  padding: 0.18rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--card-ember-rgb), 0.98), rgba(var(--card-accent-rgb), 0.94));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    0 14px 26px rgba(0,0,0,0.28),
    0 0 22px rgba(var(--card-accent-rgb), 0.22);
}

.package-discount-balloon::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(var(--card-ember-rgb), 0.4), transparent 72%);
  filter: blur(10px);
  z-index: -1;
}

.package-discount-balloon-label,
.package-highlight-badge-label {
  display: block;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.package-discount-balloon-label {
  padding: 0.48rem 0.88rem 0.45rem;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  white-space: nowrap;
}

.package-highlight-badge {
  top: -1.15rem;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, 6px) scale(0.94);
  padding: 0.18rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--card-ember-rgb), 0.96), rgba(var(--card-accent-rgb), 0.92));
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow:
    0 14px 26px rgba(0,0,0,0.3),
    0 0 24px rgba(var(--card-accent-rgb), 0.22);
}

.package-highlight-badge::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(var(--card-ember-rgb), 0.46), transparent 72%);
  filter: blur(10px);
  z-index: -1;
}

.package-highlight-badge-label {
  padding: 0.5rem 0.94rem 0.47rem;
  border-radius: inherit;
  white-space: nowrap;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-shadow: 0 0 14px rgba(255,255,255,0.22);
}

.package-card-shell.is-premium .package-discount-balloon {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  animation: discount-balloon-pulse 1.55s ease-in-out infinite;
}

.package-card-shell.is-ultimate-premium .package-discount-balloon {
  opacity: 0;
  transform: translate(-50%, 6px) scale(0.94);
}

.package-card-shell.is-ultimate-premium .package-highlight-badge {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  animation: chance-badge-pulse 1.35s ease-in-out infinite;
}

.package-card {
  --card-rotate-x: 0deg;
  --card-rotate-y: 0deg;
  --pointer-x: 50%;
  --pointer-y: 50%;
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(14, 20, 31, 0.98), rgba(5, 8, 14, 0.94));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 18px 42px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.02);
  transform: perspective(1200px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)) translateY(0) scale(1);
  transform-style: preserve-3d;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.package-card::before,
.package-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.package-card::before {
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,0.16), transparent 36%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.package-card::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 16%, transparent 70%, rgba(255,255,255,0.04));
  opacity: 0.7;
}

.package-card-shell:hover .package-card,
.package-card:focus-visible {
  border-color: rgba(var(--card-accent-rgb), 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 22px 54px rgba(0,0,0,0.46),
    0 0 0 1px rgba(var(--card-accent-rgb), 0.14);
}

.package-card-shell:hover .package-card::before,
.package-card:focus-visible::before {
  opacity: 1;
}

.package-card-shell.is-premium .package-card {
  border-color: rgba(var(--card-accent-rgb), 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 24px 48px rgba(0,0,0,0.44),
    0 0 0 1px rgba(var(--card-accent-rgb), 0.08),
    0 0 32px rgba(var(--card-accent-rgb), 0.08);
}

.package-card-shell.is-premium .package-card::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 14%, transparent 68%, rgba(var(--card-accent-rgb), 0.12)),
    radial-gradient(circle at 50% 0%, rgba(var(--card-accent-rgb), 0.1), transparent 58%);
  opacity: 0.95;
}

.package-card-shell.is-featured .package-card,
.package-card-shell.is-ultimate-premium .package-card {
  animation: featured-breathe 2.15s ease-in-out infinite;
}

.package-card-image {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}

.package-card-image::before,
.package-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.package-card-image::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.16), transparent 45%),
    linear-gradient(180deg, transparent 48%, rgba(4, 7, 13, 0.72) 100%);
  z-index: 1;
}

.package-card-shell.is-premium .package-card-image {
  box-shadow:
    inset 0 0 0 1px rgba(var(--card-accent-rgb), 0.14),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.package-card-shell.is-premium .package-card-image::before {
  background:
    linear-gradient(90deg, rgba(var(--card-accent-rgb), 0.16), rgba(255,255,255,0.88), rgba(var(--card-accent-rgb), 0.16)) top / 100% 1px no-repeat,
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.12), transparent 45%),
    linear-gradient(180deg, transparent 48%, rgba(4, 7, 13, 0.72) 100%);
}

.package-card-image::after {
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.25) 48%, transparent 76%);
  transform: translateX(-135%);
  opacity: 0;
  z-index: 2;
}

.package-card-shell:hover .package-card-image::after,
.package-card-shell.is-featured .package-card-image::after,
.package-card-shell.is-premium .package-card-image::after {
  opacity: 1;
  animation: image-sheen 2.8s ease-in-out infinite;
}

.package-card-image img {
  transition: transform 0.55s ease, filter 0.3s ease;
}

.package-card-shell.is-premium .package-card-image img {
  filter: var(--card-image-filter, saturate(1.08) contrast(1.04) brightness(1.01));
}

.package-card-shell:hover .package-card-image img,
.package-card-shell.is-featured .package-card-image img,
.package-card-shell.is-premium .package-card-image img {
  transform: scale(1.06);
}

.package-card-title {
  line-height: 1.14;
  text-wrap: balance;
}

.package-card-shell.is-premium .package-card-title {
  text-shadow: 0 0 10px rgba(var(--card-accent-rgb), 0.12);
}

.package-card-discount {
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(135deg, rgba(var(--card-accent-rgb), 0.22), rgba(var(--card-accent-rgb), 0.08));
  color: rgb(231, 248, 255);
  border-radius: 999px;
  padding: 0.26rem 0.58rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.package-card-shell.is-premium .package-card-discount {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 20px rgba(var(--card-accent-rgb), 0.14);
}

.package-card-price {
  text-shadow: 0 0 22px rgba(var(--card-accent-rgb), 0.2);
}

.package-card-gateway {
  background: linear-gradient(180deg, rgba(50,188,173,0.28), rgba(50,188,173,0.1));
  border: 1px solid rgba(50,188,173,0.34);
  box-shadow: 0 8px 16px rgba(0,0,0,0.18);
}

.package-card-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  color: rgb(255,255,255);
  background: linear-gradient(135deg, hsl(var(--primary) / 0.98), rgba(0, 162, 255, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 14px 28px hsl(var(--primary) / 0.3),
    0 8px 18px rgba(0,0,0,0.26);
  transition: transform 0.26s ease, box-shadow 0.26s ease, filter 0.26s ease;
}

.package-card-cta > * {
  position: relative;
  z-index: 1;
}

.package-card-cta:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 18px 34px hsl(var(--primary) / 0.4),
    0 10px 22px rgba(0,0,0,0.3);
  filter: saturate(1.12);
}

.package-card-shell.is-premium .package-card-cta {
  border-color: rgba(255,255,255,0.24);
  background: linear-gradient(135deg, rgba(var(--card-ember-rgb), 0.98), rgba(var(--card-accent-rgb), 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 16px 30px rgba(var(--card-accent-rgb), 0.34),
    0 10px 22px rgba(var(--card-ember-rgb), 0.18),
    0 0 30px rgba(var(--card-accent-rgb), 0.18);
  animation: premium-cta-breathe 1.6s ease-in-out infinite;
}

.package-card-shell.is-premium .package-card-cta::before {
  background:
    linear-gradient(
      112deg,
      transparent 12%,
      rgba(255,255,255,0.18) 40%,
      rgba(255,255,255,0.72) 50%,
      rgba(var(--card-ember-rgb), 0.55) 62%,
      transparent 86%
    );
}

.package-card-shell.is-premium .package-card-cta:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 20px 38px rgba(var(--card-accent-rgb), 0.44),
    0 12px 26px rgba(var(--card-ember-rgb), 0.26),
    0 0 38px rgba(var(--card-accent-rgb), 0.28);
  filter: saturate(1.18) brightness(1.06);
}

.package-card-shell.is-featured:not(.is-premium) .package-card-cta {
  animation: cta-breathe 1.85s ease-in-out infinite;
}

.package-detail-hero {
  --hero-pointer-x: 50%;
  --hero-pointer-y: 50%;
  --hero-rotate-x: 0deg;
  --hero-rotate-y: 0deg;
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.package-detail-description,
.package-detail-sidecard,
.package-detail-actions {
  --panel-pointer-x: 50%;
  --panel-pointer-y: 50%;
  --panel-rotate-x: 0deg;
  --panel-rotate-y: 0deg;
  --panel-shift-x: 0px;
  --panel-shift-y: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.package-detail-media,
.package-detail-actions {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.package-detail-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
}

.package-detail-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.5rem 0.9rem 0.47rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 12px 24px rgba(0,0,0,0.22);
}

.package-wrapper.is-premium-package .package-detail-hero {
  background:
    radial-gradient(circle at var(--hero-pointer-x) var(--hero-pointer-y), rgba(var(--card-accent-rgb), 0.18), transparent 30%),
    radial-gradient(circle at top right, rgba(var(--card-accent-rgb), 0.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(var(--card-ember-rgb), 0.08), transparent 26%),
    linear-gradient(180deg, rgba(11, 16, 27, 0.96), rgba(5, 8, 14, 0.96));
  border-color: rgba(var(--card-accent-rgb), 0.18);
  box-shadow:
    0 26px 52px rgba(0,0,0,0.34),
    0 0 0 1px rgba(var(--card-accent-rgb), 0.08),
    0 0 38px rgba(var(--card-accent-rgb), 0.1);
  transform:
    perspective(1600px)
    rotateX(var(--hero-rotate-x))
    rotateY(var(--hero-rotate-y))
    translateY(0);
  transform-style: preserve-3d;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.package-wrapper.is-premium-package .package-detail-hero::before,
.package-wrapper.is-premium-package .package-detail-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.package-wrapper.is-premium-package .package-detail-hero::before {
  inset: -1px;
  padding: 1px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 276deg,
      rgba(var(--card-accent-rgb), 0.12) 296deg,
      rgba(var(--card-ember-rgb), 0.92) 316deg,
      rgba(255,255,255,0.96) 326deg,
      rgba(var(--card-accent-rgb), 0.96) 338deg,
      rgba(var(--card-ember-rgb), 0.34) 350deg,
      transparent 360deg
    );
  -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;
  opacity: 0.92;
  animation: detail-spark-orbit 5.2s linear infinite, detail-frame-breathe 1.8s ease-in-out infinite;
}

.package-wrapper.is-premium-package .package-detail-hero::after {
  inset: auto 8% -42px;
  height: 140px;
  background: radial-gradient(circle at center, rgba(var(--card-accent-rgb), 0.22), transparent 70%);
  filter: blur(30px);
  opacity: 0.88;
  animation: premium-underglow 2.4s ease-in-out infinite;
}

.package-wrapper.is-premium-package .package-detail-hero > div {
  position: relative;
  z-index: 1;
}

.package-wrapper.is-premium-package .package-detail-media {
  padding: 3px;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(var(--card-accent-rgb), 0.5), rgba(var(--card-ember-rgb), 0.24));
  box-shadow:
    0 18px 34px rgba(0,0,0,0.28),
    0 0 0 1px rgba(var(--card-accent-rgb), 0.12),
    0 0 32px rgba(var(--card-accent-rgb), 0.18);
  transform:
    translate3d(
      calc(var(--hero-shift-x) * -0.22),
      calc(var(--hero-shift-y) * -0.22),
      28px
    );
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.package-wrapper.is-premium-package .package-detail-media::before,
.package-wrapper.is-premium-package .package-detail-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.package-wrapper.is-premium-package .package-detail-media::before {
  background:
    radial-gradient(circle at var(--hero-pointer-x) var(--hero-pointer-y), rgba(var(--card-accent-rgb), 0.16), transparent 34%),
    radial-gradient(circle at 50% 0%, rgba(var(--card-accent-rgb), 0.28), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 30%);
  opacity: 0.92;
}

.package-wrapper.is-premium-package .package-detail-media::after {
  inset: auto 12% -20px;
  height: 64px;
  background: radial-gradient(circle at center, rgba(var(--card-accent-rgb), 0.28), transparent 72%);
  filter: blur(24px);
  opacity: 0.72;
}

.package-wrapper.is-premium-package .package-detail-media img {
  position: relative;
  z-index: 1;
  border-radius: calc(1rem - 3px);
  filter: var(--card-image-filter, saturate(1.08) contrast(1.04) brightness(1.01));
  transform:
    scale(1.03)
    translate3d(
      calc(var(--hero-shift-x) * -0.14),
      calc(var(--hero-shift-y) * -0.14),
      0
    );
  transition: transform 0.24s ease, filter 0.24s ease;
}

.package-wrapper.is-premium-package .package-detail-summary {
  transform:
    translate3d(
      calc(var(--hero-shift-x) * 0.1),
      calc(var(--hero-shift-y) * 0.1),
      30px
    );
  transition: transform 0.22s ease;
}

.package-wrapper.is-premium-package #package-name {
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1.06;
  text-shadow: 0 0 18px rgba(var(--card-accent-rgb), 0.16);
}

.package-wrapper.is-premium-package #package-price {
  font-size: clamp(2.1rem, 3vw, 3rem);
  line-height: 0.95;
  text-shadow:
    0 0 16px rgba(var(--card-accent-rgb), 0.14),
    0 0 32px rgba(var(--card-accent-rgb), 0.08);
}

.package-wrapper.is-premium-package .package-detail-meta-pill {
  border: 1px solid rgba(var(--card-accent-rgb), 0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(var(--card-accent-rgb), 0.1));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 18px rgba(var(--card-accent-rgb), 0.08);
}

.package-wrapper.is-premium-package .package-detail-inline-discount {
  border-color: rgba(var(--card-accent-rgb), 0.24);
  background: linear-gradient(135deg, rgba(var(--card-ember-rgb), 0.22), rgba(var(--card-accent-rgb), 0.14));
  color: rgb(236, 248, 255);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 18px rgba(var(--card-accent-rgb), 0.12);
}

.package-wrapper.is-premium-package .package-detail-badge {
  background: linear-gradient(135deg, rgba(var(--card-ember-rgb), 0.98), rgba(var(--card-accent-rgb), 0.92));
  box-shadow:
    0 14px 26px rgba(0,0,0,0.28),
    0 0 26px rgba(var(--card-accent-rgb), 0.2);
  animation: detail-badge-float 1.8s ease-in-out infinite;
}

.package-wrapper.is-premium-package .package-detail-discount-badge {
  background: linear-gradient(135deg, rgba(var(--card-accent-rgb), 0.96), rgba(var(--card-ember-rgb), 0.88));
}

.package-wrapper.is-ultimate-premium-package .package-detail-special-badge {
  background: linear-gradient(135deg, rgba(var(--card-ember-rgb), 0.98), rgba(var(--card-accent-rgb), 0.94));
}

.package-wrapper.is-premium-package .package-detail-actions {
  border-color: rgba(var(--card-accent-rgb), 0.16);
  background:
    radial-gradient(circle at var(--panel-pointer-x) var(--panel-pointer-y), rgba(var(--card-accent-rgb), 0.14), transparent 34%),
    linear-gradient(180deg, rgba(var(--card-accent-rgb), 0.08), rgba(255,255,255,0.03));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(var(--card-accent-rgb), 0.08);
  transform:
    perspective(1200px)
    rotateX(var(--panel-rotate-x))
    rotateY(var(--panel-rotate-y))
    translate3d(calc(var(--panel-shift-x) * 0.08), calc(var(--panel-shift-y) * 0.08), 0);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.package-wrapper.is-premium-package #purchase-button {
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: linear-gradient(135deg, rgba(var(--card-ember-rgb), 0.98), rgba(var(--card-accent-rgb), 0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 16px 30px rgba(var(--card-accent-rgb), 0.28),
    0 8px 18px rgba(var(--card-ember-rgb), 0.18) !important;
}

.package-wrapper.is-premium-package #add-to-cart-button {
  border-color: rgba(var(--card-accent-rgb), 0.24) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(var(--card-accent-rgb), 0.08)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 24px rgba(var(--card-accent-rgb), 0.1);
}

.package-wrapper.is-premium-package .package-detail-description,
.package-wrapper.is-premium-package .package-detail-sidecard {
  background:
    radial-gradient(circle at var(--panel-pointer-x) var(--panel-pointer-y), rgba(var(--card-accent-rgb), 0.13), transparent 30%),
    linear-gradient(180deg, rgba(11, 16, 27, 0.9), rgba(7, 10, 18, 0.9));
  border-color: rgba(var(--card-accent-rgb), 0.16);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.22),
    0 0 0 1px rgba(var(--card-accent-rgb), 0.06);
  transform:
    perspective(1200px)
    rotateX(var(--panel-rotate-x))
    rotateY(var(--panel-rotate-y))
    translate3d(calc(var(--panel-shift-x) * 0.08), calc(var(--panel-shift-y) * 0.08), 0);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.package-wrapper.is-premium-package .package-detail-description::before,
.package-wrapper.is-premium-package .package-detail-sidecard::before,
.package-wrapper.is-premium-package .package-detail-actions::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 286deg,
      rgba(var(--card-accent-rgb), 0.08) 304deg,
      rgba(var(--card-ember-rgb), 0.88) 322deg,
      rgba(255,255,255,0.94) 332deg,
      rgba(var(--card-accent-rgb), 0.96) 342deg,
      rgba(var(--card-ember-rgb), 0.32) 352deg,
      transparent 360deg
    );
  -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;
  opacity: 0.92;
  animation: detail-panel-spark 6s linear infinite, detail-panel-flicker 1.7s ease-in-out infinite;
}

.package-wrapper.is-premium-package .package-detail-description::after,
.package-wrapper.is-premium-package .package-detail-sidecard::after,
.package-wrapper.is-premium-package .package-detail-actions::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--panel-pointer-x) var(--panel-pointer-y), rgba(255,255,255,0.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 24%, transparent 76%, rgba(var(--card-accent-rgb), 0.08));
  opacity: 0.95;
}

.package-wrapper.is-premium-package .package-detail-sidecard i {
  color: rgb(var(--card-accent-rgb)) !important;
}

.package-wrapper.is-premium-package #package-description a {
  color: rgb(var(--card-accent-rgb));
  font-weight: 700;
}

.category-banner-shell,
.category-spotlight-card {
  --category-pointer-x: 50%;
  --category-pointer-y: 50%;
  --category-rotate-x: 0deg;
  --category-rotate-y: 0deg;
  --category-shift-x: 0px;
  --category-shift-y: 0px;
  --category-accent-rgb: 94, 212, 255;
  --category-ember-rgb: 191, 114, 255;
  --category-image-filter: saturate(1.08) contrast(1.04) brightness(1.02);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.category-banner-shell {
  border: 1px solid rgba(var(--category-accent-rgb), 0.18);
  border-radius: 1rem;
  background:
    radial-gradient(circle at var(--category-pointer-x) var(--category-pointer-y), rgba(var(--category-accent-rgb), 0.16), transparent 34%),
    linear-gradient(180deg, rgba(11, 16, 27, 0.92), rgba(5, 8, 14, 0.94));
  box-shadow:
    0 24px 54px rgba(0,0,0,0.28),
    0 0 0 1px rgba(var(--category-accent-rgb), 0.08),
    0 0 36px rgba(var(--category-accent-rgb), 0.12);
  transform:
    perspective(1500px)
    rotateX(var(--category-rotate-x))
    rotateY(var(--category-rotate-y));
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.category-banner-shell::before,
.category-banner-shell::after,
.category-spotlight-card::before,
.category-spotlight-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.category-banner-shell::before {
  inset: -1px;
  padding: 1px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 278deg,
      rgba(var(--category-accent-rgb), 0.12) 298deg,
      rgba(var(--category-ember-rgb), 0.92) 318deg,
      rgba(255,255,255,0.94) 330deg,
      rgba(var(--category-accent-rgb), 0.98) 342deg,
      rgba(var(--category-ember-rgb), 0.28) 352deg,
      transparent 360deg
    );
  -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;
  opacity: 0.94;
  animation: category-spark-orbit 6.2s linear infinite, category-banner-breathe 1.9s ease-in-out infinite;
}

.category-banner-shell::after {
  inset: auto 8% -34px;
  height: 108px;
  background: radial-gradient(circle at center, rgba(var(--category-accent-rgb), 0.26), transparent 70%);
  filter: blur(28px);
  opacity: 0.82;
}

.category-banner-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  transform:
    scale(1.02)
    translate3d(
      calc(var(--category-shift-x) * -0.1),
      calc(var(--category-shift-y) * -0.1),
      0
    );
  filter: var(--category-image-filter);
  transition: transform 0.22s ease, filter 0.22s ease;
}

.category-spotlight-card {
  border-color: rgba(var(--category-accent-rgb), 0.18) !important;
  background:
    radial-gradient(circle at var(--category-pointer-x) var(--category-pointer-y), rgba(var(--category-accent-rgb), 0.18), transparent 34%),
    linear-gradient(180deg, rgba(12, 18, 28, 0.92), rgba(7, 10, 18, 0.94)) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,0.24),
    0 0 0 1px rgba(var(--category-accent-rgb), 0.08),
    0 0 28px rgba(var(--category-accent-rgb), 0.1);
  transform:
    perspective(1200px)
    rotateX(var(--category-rotate-x))
    rotateY(var(--category-rotate-y))
    translateY(0);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.category-spotlight-card::before {
  inset: -1px;
  padding: 1px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 286deg,
      rgba(var(--category-accent-rgb), 0.08) 304deg,
      rgba(var(--category-ember-rgb), 0.9) 322deg,
      rgba(255,255,255,0.94) 332deg,
      rgba(var(--category-accent-rgb), 0.96) 342deg,
      rgba(var(--category-ember-rgb), 0.26) 352deg,
      transparent 360deg
    );
  -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;
  opacity: 0.9;
  animation: category-spark-orbit 7.4s linear infinite, category-banner-breathe 2.4s ease-in-out infinite;
}

.category-spotlight-card::after {
  inset: auto 12% -22px;
  height: 60px;
  background: radial-gradient(circle at center, rgba(var(--category-accent-rgb), 0.26), transparent 72%);
  filter: blur(20px);
  opacity: 0.72;
}

.category-spotlight-image {
  transform:
    scale(1.03)
    translate3d(
      calc(var(--category-shift-x) * -0.12),
      calc(var(--category-shift-y) * -0.12),
      0
    ) !important;
  filter: var(--category-image-filter);
  transition: transform 0.22s ease, filter 0.22s ease !important;
}

.category-spotlight-name {
  position: relative;
  z-index: 1;
  text-shadow:
    0 0 12px rgba(var(--category-accent-rgb), 0.2),
    0 0 22px rgba(0,0,0,0.3);
  transform: translateY(0);
  transition: transform 0.22s ease, text-shadow 0.22s ease;
}

.category-banner-shell:hover,
.category-spotlight-card:hover {
  border-color: rgba(var(--category-accent-rgb), 0.28) !important;
  box-shadow:
    0 24px 46px rgba(0,0,0,0.32),
    0 0 0 1px rgba(var(--category-accent-rgb), 0.12),
    0 0 42px rgba(var(--category-accent-rgb), 0.18);
}

.category-spotlight-card:hover {
  transform:
    perspective(1200px)
    rotateX(var(--category-rotate-x))
    rotateY(var(--category-rotate-y))
    translateY(-6px);
}

.category-spotlight-card:hover .category-spotlight-name {
  transform: translateY(-2px);
}

.category-banner-shell.is-premium-category-banner::before,
.category-spotlight-card.is-premium-category-banner::before {
  animation-duration: 5.2s, 1.7s;
}

#top-announce {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 10px 24px hsl(var(--primary) / 0.22);
}

#top-announce::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,0.28) 50%, transparent 82%);
  transform: translateX(-130%);
  animation: marquee-sheen 6.2s ease-in-out infinite;
}

header {
  box-shadow: 0 10px 32px rgba(0,0,0,0.2);
}

@keyframes shell-frame-breathe {
  0%, 100% {
    opacity: 0.72;
    filter: drop-shadow(0 0 8px rgba(var(--card-accent-rgb), 0.1));
  }
  50% {
    opacity: 0.92;
    filter: drop-shadow(0 0 12px rgba(var(--card-accent-rgb), 0.16));
  }
}

@keyframes premium-frame-breathe {
  0%, 100% {
    opacity: 0.9;
    filter:
      drop-shadow(0 0 10px rgba(var(--card-accent-rgb), 0.24))
      drop-shadow(0 0 18px rgba(var(--card-ember-rgb), 0.2));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 14px rgba(var(--card-accent-rgb), 0.34))
      drop-shadow(0 0 24px rgba(var(--card-ember-rgb), 0.28));
  }
}

@keyframes detail-frame-breathe {
  0%, 100% {
    opacity: 0.88;
    filter:
      drop-shadow(0 0 12px rgba(var(--card-accent-rgb), 0.24))
      drop-shadow(0 0 22px rgba(var(--card-ember-rgb), 0.16));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 16px rgba(var(--card-accent-rgb), 0.34))
      drop-shadow(0 0 30px rgba(var(--card-ember-rgb), 0.24));
  }
}

@keyframes detail-spark-orbit {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes detail-panel-spark {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes detail-panel-flicker {
  0%, 100% {
    opacity: 0.86;
    filter:
      drop-shadow(0 0 8px rgba(var(--card-accent-rgb), 0.22))
      drop-shadow(0 0 16px rgba(var(--card-ember-rgb), 0.14));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 12px rgba(var(--card-accent-rgb), 0.34))
      drop-shadow(0 0 22px rgba(var(--card-ember-rgb), 0.24));
  }
}

@keyframes underglow-breathe {
  0%, 100% { opacity: 0.48; transform: scaleX(0.94); }
  50% { opacity: 1; transform: scaleX(1.05); }
}

@keyframes premium-underglow {
  0%, 100% { opacity: 0.65; transform: scaleX(0.92) scaleY(0.96); }
  50% { opacity: 1; transform: scaleX(1.08) scaleY(1.08); }
}

@keyframes image-sheen {
  0% { transform: translateX(-135%); }
  44% { transform: translateX(125%); }
  100% { transform: translateX(125%); }
}

@keyframes featured-breathe {
  0%, 100% { transform: perspective(1200px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)) translateY(0) scale(1); }
  50% { transform: perspective(1200px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)) translateY(-4px) scale(1.01); }
}

@keyframes cta-breathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 28px hsl(var(--primary) / 0.3), 0 8px 18px rgba(0,0,0,0.26); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 22px 36px hsl(var(--primary) / 0.48), 0 10px 24px rgba(0,0,0,0.34); }
}

@keyframes premium-cta-breathe {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      0 16px 30px rgba(var(--card-accent-rgb), 0.34),
      0 10px 22px rgba(var(--card-ember-rgb), 0.18),
      0 0 30px rgba(var(--card-accent-rgb), 0.18);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 22px 40px rgba(var(--card-accent-rgb), 0.46),
      0 14px 28px rgba(var(--card-ember-rgb), 0.28),
      0 0 42px rgba(var(--card-accent-rgb), 0.3);
  }
}

@keyframes badge-pulse {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 10px 25px rgba(255, 128, 44, 0.35); }
  50% { transform: translateY(-2px) scale(1.035); box-shadow: 0 15px 34px rgba(255, 128, 44, 0.55); }
}

@keyframes discount-balloon-pulse {
  0%, 100% {
    transform: translate(-50%, 0) scale(1);
  }
  50% {
    transform: translate(-50%, -2px) scale(1.035);
  }
}

@keyframes chance-badge-pulse {
  0%, 100% {
    transform: translate(-50%, 0) scale(1);
    box-shadow:
      0 14px 26px rgba(0,0,0,0.3),
      0 0 24px rgba(var(--card-accent-rgb), 0.22);
  }
  50% {
    transform: translate(-50%, -2px) scale(1.04);
    box-shadow:
      0 16px 28px rgba(0,0,0,0.34),
      0 0 30px rgba(var(--card-accent-rgb), 0.28);
  }
}

@keyframes detail-badge-float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.03);
  }
}

@keyframes category-spark-orbit {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes category-banner-breathe {
  0%, 100% {
    opacity: 0.88;
    filter:
      drop-shadow(0 0 8px rgba(var(--category-accent-rgb), 0.22))
      drop-shadow(0 0 18px rgba(var(--category-ember-rgb), 0.16));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 12px rgba(var(--category-accent-rgb), 0.34))
      drop-shadow(0 0 26px rgba(var(--category-ember-rgb), 0.24));
  }
}

@keyframes marquee-sheen {
  0%, 12% { transform: translateX(-130%); }
  24%, 100% { transform: translateX(130%); }
}

@media (max-width: 768px) {
  .package-card-shell::before {
    animation-duration: 5.8s;
  }

  .package-card-shell.is-premium::before {
    animation-duration: 2.25s;
  }

  .package-card-shell.is-featured .package-card,
  .package-card-shell.is-ultimate-premium .package-card {
    animation-duration: 2.45s;
  }
}
/* === Premium store visuals === */