/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/

/* Product fade-in animation */
[data-scroll-fade]:not(.scroll-indicator):not(.group-banner-card-wrapper) {
  opacity: 0 !important;
  transform: translateY(40px) !important;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out !important;
}

[data-scroll-fade].is-visible:not(.scroll-indicator):not(.group-banner-card-wrapper) {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Group banner card wrapper - preserve scale while animating */
[data-scroll-fade].group-banner-card-wrapper {
  opacity: 0 !important;
  transform: translateY(40px) scale(1.1) !important;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out !important;
}

[data-scroll-fade].is-visible.group-banner-card-wrapper {
  opacity: 1 !important;
  transform: translateY(0) scale(1.1) !important;
}

/* CRITICAL: Exclude .banner-colored from scroll-fade opacity so it can control its own */
[data-scroll-fade] .banner-colored,
[data-scroll-fade].is-visible .banner-colored {
  opacity: 0 !important;
  transform: none !important;
  transition: opacity 0.6s ease, transform 0.6s ease !important;
}

/* Allow hover to override opacity */
[data-scroll-fade] .group-banner-card:hover .banner-colored,
[data-scroll-fade].is-visible .group-banner-card:hover .banner-colored {
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-scroll-fade] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.cheat-menu {
  position: fixed;
  width: 336px;
  background: rgba(10, 11, 15, 0.95);
  border: 1px solid rgba(59, 25, 142, 0.5);
  border-radius: 9.6px;
  box-shadow: 0 0 0 1px rgba(59, 25, 142, 0.3), 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(59, 25, 142, 0.2);
  backdrop-filter: blur(10px);
  z-index: 999999;
  font-family: 'Courier New', monospace;
  user-select: none;
  overflow-y: visible;
  pointer-events: auto;
  transform: scale(1.2);
  transform-origin: top left;
}

.cheat-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
  background: rgba(59, 25, 142, 0.15);
  border-bottom: 1px solid rgba(59, 25, 142, 0.3);
  cursor: move;
}

.cheat-menu-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 1.2px;
}

.cheat-menu-title svg {
  stroke: #3b198e;
}

.cheat-menu-close {
  background: transparent;
  border: 1px solid rgba(59, 25, 142, 0.5);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  transition: all 0.2s;
}

.cheat-menu-close:hover {
  background: rgba(59, 25, 142, 0.3);
  border-color: #3b198e;
}

.cheat-menu-body {
  padding: 0.5rem;
}

.cheat-menu-item {
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.cheat-menu-item:last-child {
  margin-bottom: 0;
}

.cheat-menu-item label {
  display: flex;
  align-items: center;
  padding: 0.6rem 0.75rem;
  background: rgba(24, 24, 29, 0.6);
  border: 1px solid rgba(59, 25, 142, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  margin: 0;
}

.cheat-menu-item label:hover {
  background: rgba(24, 24, 29, 0.9);
  border-color: rgba(59, 25, 142, 0.5);
  box-shadow: 0 0 10px rgba(59, 25, 142, 0.2);
}

.cheat-menu-item input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(59, 25, 142, 0.5);
  border-radius: 3px;
  margin-right: 0.75rem;
  cursor: pointer;
  position: relative;
  background: rgba(10, 11, 15, 0.8);
  transition: all 0.2s;
  flex-shrink: 0;
}

.cheat-menu-item input[type="checkbox"]:checked {
  background: #3b198e;
  border-color: #3b198e;
  box-shadow: 0 0 8px rgba(59, 25, 142, 0.6);
}

.cheat-menu-item input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

.cheat-menu-label {
  flex: 1;
  color: #b8b8b8;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

.cheat-menu-status {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  color: #888;
  font-weight: bold;
  letter-spacing: 0.5px;
  min-width: 35px;
  text-align: center;
}

.cheat-menu-status.active {
  background: rgba(59, 25, 142, 0.3);
  color: #3b198e;
  text-shadow: 0 0 8px rgba(59, 25, 142, 0.5);
}

.cheat-menu-arrow {
  font-size: 0.6rem;
  color: #888;
  margin-left: 0.5rem;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.cheat-menu-arrow.open {
  transform: rotate(-180deg);
  color: #3b198e;
}

.cheat-menu-dropdown {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(10, 11, 15, 0.8);
  border: 1px solid rgba(59, 25, 142, 0.3);
  border-radius: 4px;
  overflow: visible;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out, margin-top 0.3s ease-out, padding 0.3s ease-out;
  padding: 0 0.5rem;
  margin-top: 0;
}

.cheat-menu-dropdown[x-show="true"],
.cheat-menu-dropdown[style*="display: block"],
.cheat-menu-dropdown:not([style*="display: none"]) {
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0);
  padding: 0.5rem;
  margin-top: 0.5rem;
}

.cheat-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.4rem;
  background: rgba(24, 24, 29, 0.4);
  border-radius: 3px;
  font-size: 0.75rem;
  color: #b8b8b8;
  gap: 0.5rem;
}

.cheat-dropdown-item:last-child {
  margin-bottom: 0;
}

.cheat-dropdown-item span:first-child {
  flex-shrink: 0;
  min-width: 70px;
}

.cheat-dropdown-item input[type="range"] {
  flex: 1;
  height: 4px;
  background: rgba(59, 25, 142, 0.2);
  border-radius: 2px;
  outline: none;
  appearance: none;
  cursor: pointer;
}

.cheat-dropdown-item input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  background: #3b198e;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(59, 25, 142, 0.6);
}

.cheat-dropdown-item input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #3b198e;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 4px rgba(59, 25, 142, 0.6);
}

.cheat-dropdown-item input[type="text"] {
  flex: 0 1 auto;
  max-width: 100px;
  min-width: 60px;
  background: rgba(10, 11, 15, 0.8);
  border: 1px solid rgba(59, 25, 142, 0.3);
  border-radius: 3px;
  padding: 0.3rem 0.5rem;
  color: #3b198e;
  font-size: 0.7rem;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cheat-dropdown-item input[type="text"]:focus {
  border-color: #3b198e;
  box-shadow: 0 0 0 2px rgba(59, 25, 142, 0.3);
}

.cheat-dropdown-item input[type="text"].listening {
  color: #fff;
  border-color: #3b198e;
  box-shadow: 0 0 8px rgba(59, 25, 142, 0.6);
  animation: pulse 1.5s ease-in-out infinite;
}

.cheat-dropdown-item select,
.cheat-menu select,
select[x-model*="radar"] {
  flex: 1 !important;
  background: rgba(24, 24, 29, 0.6) !important;
  background-color: rgba(24, 24, 29, 0.6) !important;
  border: 1px solid rgba(59, 25, 142, 0.3) !important;
  border-radius: 3px !important;
  padding: 0.3rem 0.5rem !important;
  padding-right: 2rem !important;
  color: #b8b8b8 !important;
  font-size: 0.7rem !important;
  font-family: 'Courier New', monospace !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.2s !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b8b8b8' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.5rem center !important;
  background-size: 12px !important;
}

.cheat-dropdown-item select:hover,
.cheat-menu select:hover,
select[x-model*="radar"]:hover {
  border-color: rgba(59, 25, 142, 0.5) !important;
  background-color: rgba(24, 24, 29, 0.9) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233b198e' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
}

.cheat-dropdown-item select:focus,
.cheat-menu select:focus,
select[x-model*="radar"]:focus {
  border-color: #3b198e !important;
  box-shadow: 0 0 0 2px rgba(59, 25, 142, 0.3) !important;
  background-color: rgba(24, 24, 29, 0.9) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233b198e' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
}

.cheat-dropdown-item select option,
.cheat-menu select option,
select[x-model*="radar"] option {
  background: rgba(10, 11, 15, 0.95) !important;
  background-color: rgba(10, 11, 15, 0.95) !important;
  color: #b8b8b8 !important;
  padding: 0.5rem !important;
  font-family: 'Courier New', monospace !important;
  font-size: 0.7rem !important;
}

.cheat-dropdown-item select option:hover,
.cheat-menu select option:hover,
select[x-model*="radar"] option:hover {
  background: rgba(59, 25, 142, 0.5) !important;
  background-color: rgba(59, 25, 142, 0.5) !important;
  color: #fff !important;
}

.cheat-dropdown-item select option:checked,
.cheat-menu select option:checked,
select[x-model*="radar"] option:checked {
  background: rgba(59, 25, 142, 0.8) !important;
  background-color: rgba(59, 25, 142, 0.8) !important;
  color: #fff !important;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.cheat-dropdown-item label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.cheat-dropdown-item label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
}

.cheat-dropdown-item span:last-child {
  min-width: 40px;
  text-align: right;
  color: #3b198e;
  font-weight: bold;
}

.slider-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.slider-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(59, 25, 142, 0.95);
  color: #fff;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 1000;
}

.slider-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(59, 25, 142, 0.95);
}

.slider-wrapper:active .slider-tooltip,
.slider-wrapper input[type="range"]:active ~ .slider-tooltip {
  opacity: 1;
}

/* Menu pointer arrow decoration */
.menu-pointer-arrow {
  position: absolute;
  bottom: 21%;
  left: 66%;
  z-index: 10;
  pointer-events: none;
}

.menu-pointer-arrow svg {
  filter: none;
}

.menu-pointer-text {
  position: absolute;
  bottom: -19px;
  left: -40px;
  color: #b8b8b8;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  font-weight: normal;
  text-shadow: none;
  white-space: nowrap;
  animation: pulse 2s ease-in-out infinite;
}

/* Hero video background styles */
.hero {
  position: relative;
  overflow: visible;
  width: 100%;
  min-height: 36vw !important;
}

.hero-bg,
.hero-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.hero-bg {
  background-size: cover;
  background-position: center;
}

.hero-video-wrapper {
  background-color: #000;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-fallback {
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  padding: 20px;
  background: rgba(0,0,0,0.5);
  border-radius: 8px;
}

/* Video background styles */
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: fill;
  background-color: #000;
  display: block;
}

.hero-video::-webkit-media-controls {
  display: none !important;
}

.hero-grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-color: var(--bs-body-bg);
  background-image: 
    radial-gradient(ellipse at 20% 30%, rgba(59, 25, 142, 0.055) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(45, 20, 110, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(70, 30, 150, 0.04) 0%, transparent 60%),
    linear-gradient(rgba(59, 25, 142, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 25, 142, 0.25) 1px, transparent 1px);
  background-size: 
    100% 100%,
    100% 100%,
    100% 100%,
    50px 50px,
    50px 50px;
  background-position: 
    0 0,
    0 0,
    0 0,
    0 0,
    0 0;
  opacity: 1;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0) 100%);
}

/* Hero container - adjust padding as needed */
.hero .container {
  padding: 4rem 2rem; /* Reduced from 6rem */
  width: 100%;
}

/* Scroll indicator styling */
.scroll-indicator {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3rem 0 -1rem 0;
  padding: 0;
  z-index: 10;
  cursor: pointer;
  animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-indicator svg {
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@keyframes scrollBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Increase hero text and button size by 30% */
.hero .content h1 {
  font-size: 3.9rem; /* 30% larger than default 3rem */
  margin-bottom: 0.25rem; /* Further reduce spacing */
}

.hero .content p {
  font-size: 1.3rem; /* 30% larger than default 1rem */
  margin-bottom: 0.5rem; /* Further reduce spacing */
}

.hero .content a {
  margin-bottom: 1.25rem; /* Add small padding between description and button */
}

.hero .content .btn {
  font-size: 1.04rem; /* 20% smaller than current 1.3rem */
  padding: 0.75rem 2.08rem; /* Reduce vertical padding */
}

@media (min-width: 768px) {
  .hero {
    min-height: 36vw !important;
  }
  
  .hero.height-medium {
    min-height: 36vw !important;
  }
  
  .hero.height-short {
    min-height: 36vw !important;
  }
  
  .hero .content h1 {
    font-size: 3.9rem; /* 30% larger */
    margin-bottom: 0.25rem; /* Further reduce spacing */
  }
  
  .hero .content p {
    font-size: 1.3rem; /* 30% larger */
    margin-bottom: 0.5rem; /* Further reduce spacing */
  }
  
  .hero .content a {
    margin-bottom: -3rem; /* Add small padding between description and button */
  }
  
  .hero .content .btn {
    font-size: 1.04rem; /* 20% smaller than current 1.3rem */
    padding: 0.75rem 2.08rem; /* Reduce vertical padding */
  }
}

/* Adjust main navbar to work with secondary navbar */
.navbar {
  border-bottom: 1px solid #18181d !important; /* 1px bottom border */
}

/* Reduce size of primary navbar buttons */
.navbar .btn {
  padding: 0.25rem 0.75rem !important; /* Reduced padding */
  font-size: 0.9rem !important; /* Slightly smaller font */
}

.navbar .btn-outline-primary {
  padding: 0.25rem 0.75rem !important; /* Reduced padding */
  font-size: 0.9rem !important; /* Slightly smaller font */
}

/* Reduce size of currency selector */
.navbar .currency-selector {
  max-width: none !important; /* Remove max-width to allow dynamic sizing */
  width: auto !important; /* Auto width to fit content */
  min-width: 80px !important; /* Minimum width */
  /* Apply background to the main container as fallback */
  background: transparent !important;
  border: none !important;
  border-radius: 0.375rem !important;
  height: 31px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: visible !important;
  pointer-events: auto !important; /* Ensure hover events work */
}

/* Ensure all children allow pointer events to bubble up */
.navbar .currency-selector *:not(.symbol):not(.code) {
  pointer-events: auto !important;
}

/* Add arrow to main container */
.navbar .currency-selector::after {
  content: '▼' !important;
  position: absolute !important;
  right: 0.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: white !important;
  font-size: 0.7rem !important;
  line-height: 1 !important;
  transition: transform 0.3s ease !important;
  pointer-events: none !important;
  z-index: 1000 !important;
}

/* Rotate arrow when dropdown is open */
.navbar .currency-selector:has(.choices[aria-expanded="true"])::after {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* Style the dropdown menu */
.navbar .currency-selector .choices__list--dropdown,
.navbar .currency-selector .choices__list[aria-expanded] {
  background-color: #1a1a1a !important;
  border: 1px solid #333333 !important;
  border-radius: 0.375rem !important;
  margin-top: 0.25rem !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  padding: 0.25rem !important;
  z-index: 9999 !important; /* Ensure dropdown appears above everything */
  max-height: 300px !important; /* Set max height for scrolling */
  overflow-y: auto !important; /* Enable vertical scrolling */
  position: absolute !important; /* Ensure proper positioning */
}

/* Style dropdown items */
.navbar .currency-selector .choices__item,
.navbar .currency-selector .choices__list--dropdown .choices__item {
  color: white !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.25rem !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
}

/* Hover effects ONLY for items inside the dropdown list */
.navbar .currency-selector .choices__list--dropdown .choices__item--selectable:hover {
  background-color: var(--cl-accent) !important;
  color: white !important;
}

/* Highlighted item effects ONLY in dropdown list */
.navbar .currency-selector .choices__list--dropdown .choices__item--highlighted {
  background-color: var(--cl-accent) !important;
  color: white !important;
}

/* Prevent hover effects on the button itself */
.navbar .currency-selector .choices__inner .choices__item:hover,
.navbar .currency-selector .choices__inner .choices__item--selectable:hover {
  background-color: transparent !important;
  color: white !important;
}

/* Currently selected item indicator - no background on button */
.navbar .currency-selector .choices__item--selected {
  background-color: transparent !important;
  color: white !important;
}

/* Only show selected background in the dropdown list */
.navbar .currency-selector .choices__list--dropdown .choices__item--selected {
  background-color: rgba(var(--cl-accent-rgb), 0.13) !important;
  color: white !important;
}

.navbar .currency-selector select {
  width: 100% !important; /* Full width to fill container */
  height: 100% !important; /* Full height to fill container */
  font-size: 0.85rem !important; /* Slightly smaller font */
  padding: 0.15rem 1.5rem 0.15rem 0.5rem !important; /* Padding for arrow space */
  color: white !important; /* Make text white */
  background-color: transparent !important; /* Transparent background */
  border: none !important; /* Remove default border */
  appearance: none; /* Remove default appearance */
  -webkit-appearance: none; /* Safari support */
  -moz-appearance: none; /* Firefox support */
  position: relative !important;
  z-index: 1 !important;
}

/* Hide default dropdown arrow in different browsers */
.navbar .currency-selector select::-ms-expand {
  display: none !important;
}

.navbar .currency-selector select::-webkit-credentials-auto-fill-button {
  display: none !important;
}

.navbar .currency-selector .symbol {
  font-size: 0.85rem !important; /* Slightly smaller font */
  color: white !important; /* Make currency symbol white */
  display: inline-block !important; /* Ensure transform works */
  pointer-events: none !important; /* Don't block hover on parent */
  margin-right: -0.1rem !important; /* One space between symbol and code */
  padding-left: 0 !important; /* Remove any left padding */
}

/* Remove any hover effects on symbol */
.navbar .currency-selector .symbol:hover {
  color: white !important;
  background: none !important;
  box-shadow: none !important;
}

/* Prevent hover effects only on the items inside the button, not the button itself */
.navbar .currency-selector .choices__inner:hover .choices__item,
.navbar .currency-selector .choices__inner .choices__item:hover,
.navbar .currency-selector .choices__item--selectable.choices__item--selected:hover {
  background-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
}

.navbar .currency-selector .code {
  font-size: 0.85rem !important; /* Slightly smaller font */
  color: white !important; /* Make currency code white */
  display: inline-block !important; /* Make sure it's visible */
  margin-left: 0 !important; /* No extra margin - spacing handled by symbol */
  pointer-events: none !important; /* Prevent hover effects */
}

/* Ensure code is visible in the button */
.navbar .currency-selector .choices__inner .code {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force both symbol and code to show in button */
.navbar .currency-selector .choices__item .symbol,
.navbar .currency-selector .choices__item .code,
.navbar .currency-selector .choices__inner .symbol,
.navbar .currency-selector .choices__inner .code {
  display: inline !important;
  visibility: visible !important;
}

/* Hide the "Default" text in the button */
.navbar .currency-selector .choices__inner .default {
  display: none !important;
}

.navbar .currency-selector .choices__inner {
  height: 32px !important; /* 1px taller than cart button (31px + 1px) */
  min-height: 0 !important; /* Remove min-height restriction */
  min-width: auto !important; /* Auto width to fit content */
  width: max-content !important; /* Width based on content */
  max-width: none !important; /* No max width restriction */
  font-size: 0.9rem !important; /* Match button font size */
  padding: 0 1.25rem 1px 0 !important; /* 1px extra padding on bottom */
  line-height: 1 !important; /* Line height 1 for perfect vertical centering */
  white-space: nowrap !important; /* Prevent text wrapping */
  background: linear-gradient(to right, #555555, #333333) !important; /* Match cart button background */
  color: white !important; /* Make text white like cart button */
  transition: all 0.3s ease !important; /* Add transition like cart button */
  border: 1px solid #666666 !important; /* EXACT same as cart button */
  position: relative !important;
  display: inline-flex !important; /* Use inline-flex to allow natural width */
  align-items: center !important; /* Vertically center content */
  justify-content: flex-start !important; /* Align to left instead of center */
  z-index: 1 !important; /* Ensure it's above any blocking elements */
  pointer-events: all !important; /* Force hover to work */
}

/* Add hover effect matching cart button */
.navbar .currency-selector:hover .choices__inner,
.navbar .currency-selector .choices__inner:hover {
  background: linear-gradient(to right, #555555, #333333) !important; /* Keep same gradient on hover */
  border: 1px solid #777777 !important; /* Keep same border on hover */
  box-shadow: 0 0 0 1.5px #777777, 0 0 6px 3px rgba(119, 119, 119, 0.75), 0 0 12px 6px rgba(119, 119, 119, 0.375) !important; /* Amplified grey glow effect */
  transform: none !important; /* Prevent any transform effects */
}

/* Remove focus effect from choices__inner */
.navbar .currency-selector .choices__inner:focus {
  background: linear-gradient(to right, #555555, #333333) !important;
  border: 1px solid #666666 !important; /* EXACT same as cart button */
  box-shadow: none !important;
  outline: none !important;
}

/* Remove purple border on focus/active states and keep rounded corners */
.navbar .currency-selector .choices.is-focused .choices__inner,
.navbar .currency-selector .choices.is-open .choices__inner,
.navbar .currency-selector .choices[aria-expanded="true"] .choices__inner {
  border: 1px solid #666666 !important;
  border-radius: 0.375rem !important; /* Keep all corners rounded even when open */
  box-shadow: none !important;
  outline: none !important;
}

/* Remove the duplicate arrow on choices__inner - we use the one on currency-selector instead */

/* Hide the background arrow since we're using ::after */
.navbar .currency-selector .choices__inner::before {
  display: none !important;
}

.navbar .currency-selector .choices__list--dropdown {
  background-image: none !important;
}

/* Force border after Choices.js initialization */
.navbar .currency-selector.choices .choices__inner,
.navbar .currency-selector.choices.is-initialised .choices__inner,
.navbar .currency-selector.choices[data-type*="select-one"] .choices__inner {
  border: 1px solid #666666 !important; /* EXACT same as cart button */
  transition: all 0.3s ease !important; /* Smooth transition for hover effects */
}

/* Comprehensive hover rules for all possible states */
.navbar .currency-selector:hover .choices__inner,
.navbar .currency-selector .choices:hover .choices__inner,
.navbar .currency-selector.choices:hover .choices__inner,
.navbar .currency-selector.choices .choices__inner:hover,
.navbar .currency-selector.choices.is-initialised:hover .choices__inner,
.navbar .currency-selector.choices.is-initialised .choices__inner:hover,
.navbar .currency-selector:hover .choices.is-initialised .choices__inner,
.navbar .currency-selector .choices[data-type]:hover .choices__inner {
  background: linear-gradient(to right, #555555, #333333) !important; /* Keep same gradient on hover */
  border: 1px solid #777777 !important; /* Lighter border on hover */
  box-shadow: 0 0 0 1.5px #777777, 0 0 6px 3px rgba(119, 119, 119, 0.75), 0 0 12px 6px rgba(119, 119, 119, 0.375) !important; /* Amplified grey glow effect */
  transition: all 0.3s ease !important;
}

.navbar .currency-selector.choices .choices__inner:focus,
.navbar .currency-selector.choices.is-initialised .choices__inner:focus {
  border: 1px solid #666666 !important; /* EXACT same as cart button */
}

/* HIGHEST PRIORITY: Force hover effect on currency selector - must override everything */
div.navbar .currency-selector:hover .choices__inner[class],
div.navbar .currency-selector:hover > .choices.is-initialised .choices__inner[class],
div.navbar .currency-selector.choices[data-type*="select"]:hover .choices__inner[class],
div.navbar > * .currency-selector:hover .choices__inner[class*="choices"],
.navbar .currency-selector .choices__inner[class]:hover {
  background: linear-gradient(to right, #555555, #333333) !important;
  background-color: #555555 !important;
  border: 1px solid #777777 !important;
  border-color: #777777 !important;
  box-shadow: 0 0 0 1.5px #777777, 0 0 6px 3px rgba(119, 119, 119, 0.75), 0 0 12px 6px rgba(119, 119, 119, 0.375) !important;
}

/* Alternative approach: Apply hover effect to container with pointer wrapper */
.navbar .currency-selector {
  cursor: pointer !important;
}

/* Apply EXACT cart button hover effect - trigger on container hover AND when hovering items inside */
.navbar .currency-selector:hover .choices__inner,
.navbar .currency-selector .choices__inner:has(.choices__item:hover),
.navbar .currency-selector .choices__inner:has(*:hover) {
  background: linear-gradient(to right, #555555, #333333) !important;
  border: 1px solid #777777 !important;
  box-shadow: 0 0 0 1.5px #777777, 0 0 6px 3px rgba(119, 119, 119, 0.75), 0 0 12px 6px rgba(119, 119, 119, 0.375) !important;
  transform: none !important;
}

/* Additional pseudo-element targeting for dropdown arrows */
.navbar .currency-selector .choices__inner::-webkit-scrollbar {
  display: none !important;
}

.navbar .currency-selector .choices__inner::-webkit-inner-spin-button,
.navbar .currency-selector .choices__inner::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.navbar .currency-selector .choices__inner::-webkit-calendar-picker-indicator {
  display: none !important;
}

/* Additional pseudo-element targeting for dropdown arrows */
.navbar .currency-selector .choices__inner::-webkit-list-button,
.navbar .currency-selector .choices__inner::-webkit-meter-inner-element,
.navbar .currency-selector .choices__inner::-webkit-meter-bar {
  -webkit-appearance: none !important;
  display: none !important;
}

/* Override any potential background images from choices.js */
.navbar .currency-selector .choices[data-type*='select']::after,
.navbar .currency-selector .choices__list--dropdown::after,
.navbar .currency-selector .choices__inner::after {
  background-image: none !important;
  border: none !important;
  content: '' !important;
  display: none !important;
}

/* Make cart button text and icon white */
.navbar .cart .btn {
  color: white !important;
  background: linear-gradient(to right, #555555, #333333) !important; /* Slightly lighter grey gradient from left to right */
  border: 1px solid #666666 !important; /* Slightly lighter dark grey outline */
  transition: all 0.3s ease !important;
}

.navbar .cart .btn:hover {
  background: linear-gradient(to right, #555555, #333333) !important; /* Keep same gradient on hover */
  border: 1px solid #777777 !important; /* Keep same border on hover */
  box-shadow: 0 0 0 1.5px #777777, 0 0 6px 3px rgba(119, 119, 119, 0.75), 0 0 12px 6px rgba(119, 119, 119, 0.375) !important; /* Amplified grey glow effect */
  transform: none !important; /* Prevent any transform effects */
}

.navbar .cart .btn svg {
  stroke: white !important;
}

/* Make customer dashboard button text and icon white with theme color background */
.navbar .user .btn {
  color: white !important;
  background-color: var(--cl-accent) !important; /* Theme color background */
  border: 1px solid var(--cl-accent) !important; /* Theme color border */
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important; /* Amplified passive glow effect */
  transition: all 0.3s ease !important;
}

.navbar .user .btn:hover {
  color: white !important;
  background-color: var(--cl-accent) !important; /* Keep theme color background on hover */
  border: 1px solid var(--cl-accent) !important; /* Keep theme color border on hover */
  box-shadow: 0 0 0 2.25px var(--cl-accent), 0 0 9px 4.5px rgba(var(--cl-accent-rgb), 1.125), 0 0 18px 9px rgba(var(--cl-accent-rgb), 0.5625) !important; /* 1.5x amplified glow effect */
  transform: none !important; /* Prevent any transform effects */
}

.navbar .user .btn svg {
  stroke: white !important;
}

.navbar .user a.btn {
  color: white !important;
  background-color: var(--cl-accent) !important; /* Theme color background */
  border: 1px solid var(--cl-accent) !important; /* Theme color border */
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important; /* Amplified passive glow effect */
  transition: all 0.3s ease !important;
}

.navbar .user a.btn:hover {
  color: white !important;
  background-color: var(--cl-accent) !important; /* Keep theme color background on hover */
  border: 1px solid var(--cl-accent) !important; /* Keep theme color border on hover */
  box-shadow: 0 0 0 2.25px var(--cl-accent), 0 0 9px 4.5px rgba(var(--cl-accent-rgb), 1.125), 0 0 18px 9px rgba(var(--cl-accent-rgb), 0.5625) !important; /* 1.5x amplified glow effect */
  transform: none !important; /* Prevent any transform effects */
}

.navbar .user a.btn svg {
  stroke: white !important;
}

/* Overlay for better text readability */
.bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: -1;
}

/* Hero View Products button - same glow as customer dashboard */
.hero .btn.btn-primary {
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important; /* Amplified passive glow effect */
  transition: all 0.3s ease !important;
}

.hero .btn.btn-primary:hover {
  box-shadow: 0 0 0 2.25px var(--cl-accent), 0 0 9px 4.5px rgba(var(--cl-accent-rgb), 1.125), 0 0 18px 9px rgba(var(--cl-accent-rgb), 0.5625) !important; /* 1.5x amplified glow effect */
  transform: none !important; /* Prevent any transform effects */
}

/* Secondary navbar - match main navbar */
.navbar-secondary {
  background: var(--bs-body-bg); /* Match main navbar background */
  /* Add top border with specified color */
  border-top: 1px solid #18181d; /* 1px top border */
  /* Add faint purple glow matching background orbs - extends further */
  box-shadow: 0 8px 40px rgba(59, 25, 142, 0.15), 0 4px 20px rgba(59, 25, 142, 0.1), 0 2px 10px rgba(59, 25, 142, 0.08);
}

.navbar-secondary .container {
  padding-top: 0.5rem !important; /* py-2 */
  padding-bottom: 0.5rem !important; /* py-2 */
}

/* Adjust positioning to stack under main navbar */
.navbar-secondary {
  margin-top: 0; /* Remove negative margin */
}

/* Secondary navbar navigation items styling */
.navbar-secondary-nav {
  gap: 1.5rem; /* Match the spacing from primary navbar */
}

.navbar-secondary .nav-link {
  position: relative;
  transition: all 0.3s ease;
  border-radius: 0.5rem; /* Add rounded corners */
  padding: 0.25rem 0.75rem; /* Reduced padding for smaller buttons */
  border: none;
  font-size: 0.9rem; /* Slightly smaller font */
}

/* Home button - default state (not active) */
.navbar-secondary .nav-link.home-button:not(.active) {
  color: inherit !important; /* Use the same color as other nav items */
  background-color: transparent !important;
  opacity: 0.75; /* Slightly muted to match other nav items */
  
  

}

/* Hover effect with theme color and fading solid border for non-home buttons */
.navbar-secondary .nav-link:not(.home-button):hover {
  color: var(--cl-accent) !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important;
  background-color: rgba(var(--cl-accent-rgb), 0.065) !important; /* Light background on hover */
  position: relative;
}

/* FAQ button specific styling */
.navbar-secondary .nav-link[href*='faq']:hover {
  color: var(--cl-accent) !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important;
  background-color: rgba(var(--cl-accent-rgb), 0.065) !important; /* Light background on hover */
  position: relative;
}

/* Discord button styling */
.navbar-secondary .nav-link[href*='discord']:hover,
.navbar-secondary .nav-link[href='#']:hover {
  color: var(--cl-accent) !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important;
  background-color: rgba(var(--cl-accent-rgb), 0.065) !important; /* Light background on hover */
  position: relative;
}

/* Active/current page effect - full background theme color with glow and fading solid border */
.navbar-secondary .nav-link.active {
  color: white !important;
  background-color: var(--cl-accent) !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important;
  position: relative;
}

/* Home button active state - with glow and fading solid border */
.navbar-secondary .nav-link.home-button.active {
  color: white !important;
  background-color: var(--cl-accent) !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important;
  position: relative;
}

/* FAQ button active state */
.navbar-secondary .nav-link[href*='faq'].active {
  color: white !important;
  background-color: var(--cl-accent) !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important;
  position: relative;
}

/* Home button hover state - when not active with fading solid border */
.navbar-secondary .nav-link.home-button:not(.active):hover {
  color: var(--cl-accent) !important;
  background-color: rgba(var(--cl-accent-rgb), 0.065) !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important;
  position: relative;
}

/* Focus effect to match hover for non-home buttons with fading solid border */
.navbar-secondary .nav-link:not(.home-button):focus {
  color: var(--cl-accent) !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important;
  background-color: rgba(var(--cl-accent-rgb), 0.065) !important;
  position: relative;
}

/* Focus effect for home button when not active with fading solid border */
.navbar-secondary .nav-link.home-button:not(.active):focus {
  color: var(--cl-accent) !important;
  background-color: rgba(var(--cl-accent-rgb), 0.065) !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important;
  position: relative;
}

/* Focus effect for FAQ button */
.navbar-secondary .nav-link[href*='faq']:focus {
  color: var(--cl-accent) !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important;
  background-color: rgba(var(--cl-accent-rgb), 0.065) !important;
  position: relative;
}

/* Active state for Discord button */
.navbar-secondary .nav-link[href='#'].active {
  color: white !important;
  background-color: var(--cl-accent) !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important;
  position: relative;
}

/* Focus effect for Discord button */
.navbar-secondary .nav-link[href='#']:focus {
  color: var(--cl-accent) !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important;
  background-color: rgba(var(--cl-accent-rgb), 0.065) !important;
  position: relative;
}

/* Fix price alignment on product cards and group cards */
.products .card .info {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.products .card .info .price {
  text-align: left !important;
  order: 1 !important;
}

.products .card .info p:not(.price) {
  order: 2 !important;
  text-align: right !important;
}

/* Information badge styling */
.information-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background: color-mix(in srgb, var(--bs-body-bg) 96%, white 4%) !important; /* 1/4 lighter than original (4% white) */
  border: 1px solid #323232 !important; /* Darker grey border */
  border-radius: 50px !important; /* Pill shape */
  padding: 0.4rem 1rem !important; /* Reduced vertical padding by 20% */
  margin: 0 auto 1rem auto !important; /* Center and add margin below */
  width: fit-content !important;
  font-size: 0.875rem !important;
  font-weight: bold !important; /* Make text bold */
  color: #adb5bd !important; /* Greyer text */
  position: relative !important;
}

/* Make badge SVGs use theme color */
.information-badge svg {
  color: var(--cl-accent) !important;
}

.information-badge svg path,
.information-badge svg circle {
  fill: var(--cl-accent) !important;
  stroke: var(--cl-accent) !important;
}

/* Add purple glow to information badge */
.information-badge::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 180px !important;
  height: 80px !important;
  background: radial-gradient(ellipse, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.144) 15%, rgba(139, 92, 246, 0.096) 30%, rgba(139, 92, 246, 0.064) 45%, rgba(139, 92, 246, 0.04) 60%, rgba(139, 92, 246, 0.024) 70%, rgba(139, 92, 246, 0.012) 80%, rgba(139, 92, 246, 0.0064) 90%, rgba(139, 92, 246, 0.0032) 95%, transparent 100%) !important;
  border-radius: 50px !important;
  pointer-events: none !important;
  z-index: 0 !important; /* Above background but below text */
  filter: blur(8px) !important; /* Same blur as footer badge */
}

/* Ensure badge content appears above the glow */
.information-badge svg,
.information-badge span,
.information-badge * {
  position: relative !important;
  z-index: 1 !important;
}

/* Center align products section title and description */
.component .section-title {
  justify-content: center !important;
  text-align: center !important;
  margin-bottom: 1rem !important; /* Medium gap between title and description */
  position: relative !important;
}

.component .section-title h2 {
  font-weight: bold !important;
  position: relative !important;
  z-index: 1 !important;
}

.component .section-subtitle {
  justify-content: center !important;
  text-align: center !important;
  margin-top: -0.5rem !important; /* Medium reduction from title */
  margin-bottom: 2rem !important; /* Medium gap to content below */
  position: relative !important;
}

.component .section-subtitle p {
  position: relative !important;
  z-index: 1 !important;
}

/* Add oval purple glow with grid behind home page products title and subtitle - centered on parent container */
.products-section > div[style*="text-align: center"]::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 600px !important;
  height: 225px !important;
  background-image: 
    radial-gradient(ellipse, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.108) 15%, rgba(139, 92, 246, 0.073) 30%, rgba(139, 92, 246, 0.048) 45%, rgba(139, 92, 246, 0.03) 60%, rgba(139, 92, 246, 0.018) 70%, rgba(139, 92, 246, 0.009) 80%, rgba(139, 92, 246, 0.0048) 90%, rgba(139, 92, 246, 0.0024) 95%, transparent 100%),
    linear-gradient(rgba(59, 25, 142, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 25, 142, 0.3) 1px, transparent 1px) !important;
  background-size: 
    100% 100%,
    50px 50px,
    50px 50px !important;
  background-position: 
    0 0,
    0 0,
    0 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
  -webkit-mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
}

/* Ensure parent container has relative positioning */
.products-section > div[style*="text-align: center"] {
  position: relative !important;
}

/* Add oval purple glow with grid behind Experience Our Products title and subtitle */
.experience-preview > .container > div[style*="text-align: center"]::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 600px !important;
  height: 225px !important;
  background-image: 
    radial-gradient(ellipse, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.108) 15%, rgba(139, 92, 246, 0.073) 30%, rgba(139, 92, 246, 0.048) 45%, rgba(139, 92, 246, 0.03) 60%, rgba(139, 92, 246, 0.018) 70%, rgba(139, 92, 246, 0.009) 80%, rgba(139, 92, 246, 0.0048) 90%, rgba(139, 92, 246, 0.0024) 95%, transparent 100%),
    linear-gradient(rgba(59, 25, 142, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 25, 142, 0.3) 1px, transparent 1px) !important;
  background-size: 
    100% 100%,
    50px 50px,
    50px 50px !important;
  background-position: 
    0 0,
    0 0,
    0 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
  -webkit-mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
}

/* Ensure parent container has relative positioning for Experience Our Products */
.experience-preview > .container > div[style*="text-align: center"] {
  position: relative !important;
}

/* Add oval purple glow with grid behind Media Program title and subtitle */
.media-page .py-5-nav > div[style*="text-align: center"]::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 600px !important;
  height: 225px !important;
  background-image: 
    radial-gradient(ellipse, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.108) 15%, rgba(139, 92, 246, 0.073) 30%, rgba(139, 92, 246, 0.048) 45%, rgba(139, 92, 246, 0.03) 60%, rgba(139, 92, 246, 0.018) 70%, rgba(139, 92, 246, 0.009) 80%, rgba(139, 92, 246, 0.0048) 90%, rgba(139, 92, 246, 0.0024) 95%, transparent 100%),
    linear-gradient(rgba(59, 25, 142, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 25, 142, 0.3) 1px, transparent 1px) !important;
  background-size: 
    100% 100%,
    50px 50px,
    50px 50px !important;
  background-position: 
    0 0,
    0 0,
    0 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
  -webkit-mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
}

/* Ensure parent container has relative positioning for Media Program */
.media-page .py-5-nav > div[style*="text-align: center"] {
  position: relative !important;
}

/* Add oval purple glow with grid behind FAQ title and subtitle */
.faq > .container > div[style*="text-align: center"]::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 600px !important;
  height: 225px !important;
  background-image: 
    radial-gradient(ellipse, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.108) 15%, rgba(139, 92, 246, 0.073) 30%, rgba(139, 92, 246, 0.048) 45%, rgba(139, 92, 246, 0.03) 60%, rgba(139, 92, 246, 0.018) 70%, rgba(139, 92, 246, 0.009) 80%, rgba(139, 92, 246, 0.0048) 90%, rgba(139, 92, 246, 0.0024) 95%, transparent 100%),
    linear-gradient(rgba(59, 25, 142, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 25, 142, 0.3) 1px, transparent 1px) !important;
  background-size: 
    100% 100%,
    50px 50px,
    50px 50px !important;
  background-position: 
    0 0,
    0 0,
    0 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
  -webkit-mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
}

/* Ensure parent container has relative positioning for FAQ */
.faq > .container > div[style*="text-align: center"] {
  position: relative !important;
}

/* Add oval purple glow with grid behind products listing page title and subtitle */
.products-page .py-5-nav > div[style*="text-align: center"]::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 600px !important;
  height: 225px !important;
  background-image: 
    radial-gradient(ellipse, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.108) 15%, rgba(139, 92, 246, 0.073) 30%, rgba(139, 92, 246, 0.048) 45%, rgba(139, 92, 246, 0.03) 60%, rgba(139, 92, 246, 0.018) 70%, rgba(139, 92, 246, 0.009) 80%, rgba(139, 92, 246, 0.0048) 90%, rgba(139, 92, 246, 0.0024) 95%, transparent 100%),
    linear-gradient(rgba(59, 25, 142, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 25, 142, 0.3) 1px, transparent 1px) !important;
  background-size: 
    100% 100%,
    50px 50px,
    50px 50px !important;
  background-position: 
    0 0,
    0 0,
    0 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
  -webkit-mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
}

/* Ensure parent container has relative positioning for products listing page */
.products-page .py-5-nav > div[style*="text-align: center"] {
  position: relative !important;
}

/* Ensure products listing page title and subtitle appear above the glow */
.products-page .section-title,
.products-page .section-subtitle {
  position: relative !important;
  z-index: 1 !important;
}

/* Add oval purple glow with grid behind products page title and subtitle - UPDATED v4 */
.products-page-header section div[style*="text-align: center"]::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 600px !important;
  height: 225px !important;
  background-image: 
    radial-gradient(ellipse, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.108) 15%, rgba(139, 92, 246, 0.073) 30%, rgba(139, 92, 246, 0.048) 45%, rgba(139, 92, 246, 0.03) 60%, rgba(139, 92, 246, 0.018) 70%, rgba(139, 92, 246, 0.009) 80%, rgba(139, 92, 246, 0.0048) 90%, rgba(139, 92, 246, 0.0024) 95%, transparent 100%),
    linear-gradient(rgba(59, 25, 142, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 25, 142, 0.3) 1px, transparent 1px) !important;
  background-size: 
    100% 100%,
    50px 50px,
    50px 50px !important;
  background-position: 
    0 0,
    0 0,
    0 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
  -webkit-mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
}

/* Ensure parent container has relative positioning for products page */
.products-page-header section div[style*="text-align: center"] {
  position: relative !important;
}

/* Ensure products page title and subtitle appear above the glow */
.products-page-header .section-title,
.products-page-header .section-subtitle {
  position: relative !important;
  z-index: 1 !important;
}

/* Add oval purple glow with grid behind status page title and subtitle */
.status-page .py-5-nav > div[style*="text-align: center"]::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 600px !important;
  height: 225px !important;
  background-image: 
    radial-gradient(ellipse, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.108) 15%, rgba(139, 92, 246, 0.073) 30%, rgba(139, 92, 246, 0.048) 45%, rgba(139, 92, 246, 0.03) 60%, rgba(139, 92, 246, 0.018) 70%, rgba(139, 92, 246, 0.009) 80%, rgba(139, 92, 246, 0.0048) 90%, rgba(139, 92, 246, 0.0024) 95%, transparent 100%),
    linear-gradient(rgba(59, 25, 142, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 25, 142, 0.3) 1px, transparent 1px) !important;
  background-size: 
    100% 100%,
    50px 50px,
    50px 50px !important;
  background-position: 
    0 0,
    0 0,
    0 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
  -webkit-mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
}

/* Ensure parent container has relative positioning for status page */
.status-page .py-5-nav > div[style*="text-align: center"] {
  position: relative !important;
}

/* Ensure status page title and subtitle appear above the glow */
.status-page .section-title,
.status-page .section-subtitle {
  position: relative !important;
  z-index: 1 !important;
}

/* Add oval purple glow with grid behind feedbacks/reviews page title and subtitle - UPDATED v5 MULTI-SELECTOR */
section.feedbacks .container > div[style*="text-align: center"]::before,
section.feedbacks div[style*="text-align: center"]::before,
.feedbacks .container > div[style*="text-align: center"]::before,
.feedbacks div[style*="text-align: center"]::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 600px !important;
  height: 225px !important;
  background-image: 
    radial-gradient(ellipse, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.108) 15%, rgba(139, 92, 246, 0.073) 30%, rgba(139, 92, 246, 0.048) 45%, rgba(139, 92, 246, 0.03) 60%, rgba(139, 92, 246, 0.018) 70%, rgba(139, 92, 246, 0.009) 80%, rgba(139, 92, 246, 0.0048) 90%, rgba(139, 92, 246, 0.0024) 95%, transparent 100%),
    linear-gradient(rgba(59, 25, 142, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 25, 142, 0.3) 1px, transparent 1px) !important;
  background-size: 
    100% 100%,
    50px 50px,
    50px 50px !important;
  background-position: 
    0 0,
    0 0,
    0 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
  -webkit-mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
}

/* Ensure parent container has relative positioning for feedbacks/reviews page */
section.feedbacks .container > div[style*="text-align: center"],
section.feedbacks div[style*="text-align: center"],
.feedbacks .container > div[style*="text-align: center"],
.feedbacks div[style*="text-align: center"] {
  position: relative !important;
}

/* Ensure feedbacks page title and subtitle appear above the glow */
.feedbacks .section-title,
.feedbacks .section-subtitle {
  position: relative !important;
  z-index: 1 !important;
}

/* Ensure text-image-block title and subtitle appear above the glow */
.text-image-block .section-title,
.text-image-block .section-subtitle {
  position: relative !important;
  z-index: 1 !important;
}

/* Add oval purple glow with grid behind text-image-block title and subtitle */
.text-image-block > .container > .row > .col-12 > div[style*="text-align: center"]::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(50% - 0.25rem) !important;
  transform: translate(-50%, -50%) !important;
  width: 600px !important;
  height: 225px !important;
  background-image: 
    radial-gradient(ellipse, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.108) 15%, rgba(139, 92, 246, 0.073) 30%, rgba(139, 92, 246, 0.048) 45%, rgba(139, 92, 246, 0.03) 60%, rgba(139, 92, 246, 0.018) 70%, rgba(139, 92, 246, 0.009) 80%, rgba(139, 92, 246, 0.0048) 90%, rgba(139, 92, 246, 0.0024) 95%, transparent 100%),
    linear-gradient(rgba(59, 25, 142, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 25, 142, 0.3) 1px, transparent 1px) !important;
  background-size: 
    100% 100%,
    50px 50px,
    50px 50px !important;
  background-position: 
    0 0,
    0 0,
    0 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
  -webkit-mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
}

/* Ensure text-image-block title and subtitle appear above the glow */
.text-image-block .section-title,
.text-image-block .section-subtitle {
  position: relative !important;
  z-index: 1 !important;
}

/* Reduce gap between FAQ description and first question by 40% total */
.faq .section-subtitle {
  margin-bottom: calc(1.7rem * 0.6) !important; /* 40% less gap (1.02rem) */
}

/* Match products description gap to FAQ description gap */
.component:has(.products) .section-subtitle {
  margin-bottom: calc(1.7rem * 0.6) !important; /* Same as FAQ (1.02rem) */
}

.component .section-subtitle p {
  color: #6c757d !important; /* Grey color for description */
}

/* Make scroll indicator arrow non-clickable */
.scroll-indicator {
  pointer-events: none !important;
  cursor: default !important;
}

/* Product card hover effect - enlarge cover image (exclude group-banner-card) */
.products .card:not(.group-banner-card) {
  overflow: hidden !important; /* Hide overflowing parts of enlarged image */
  transform-origin: bottom !important; /* Scale from bottom so it only expands upward */
  transition: box-shadow 0.3s ease !important; /* Smooth transition for glow */
}

/* Allow Buy Now button glow to show properly */
.products .card .card-body {
  overflow: visible !important;
  padding-left: 1.5rem !important; /* Match right padding */
  padding-right: 1.5rem !important; /* Extra padding for button glow */
  padding-bottom: 1.5rem !important; /* Extra padding for button glow */
}

.products .card .card-body .info {
  overflow: visible !important;
}

.products .card .card-img-top {
  transition: transform 0.3s ease !important; /* Smooth transition */
  transform-origin: center !important; /* Scale from center */
}

.products .card:not(.group-banner-card):hover .card-img-top {
  transform: scale(1.03) !important; /* Enlarge by 3% on hover */
}

/* Add theme-colored glow around card on hover that sticks out from center of each side (exclude group-banner-card) */
.products .card:not(.group-banner-card):hover {
  box-shadow: 
    0 0 12px 4px rgba(var(--cl-accent-rgb), 0.35),
    0 0 20px 8px rgba(var(--cl-accent-rgb), 0.13),
    0 0 30px 12px rgba(var(--cl-accent-rgb), 0.065) !important;
}

/* Hide View Details button on product/group cards */
.products .card .overlay {
  display: none !important;
}

/* Decrease the PRIMARY navbar (with brand and cart) height by 50% */
.navbar[data-component-id="navbar"] {
  min-height: calc(4.5rem * 0.75) !important; /* Reduce primary navbar by 50% */
  padding-top: calc(0.5rem * 0.75) !important;
  padding-bottom: calc(0.5rem * 0.75) !important;
}

.navbar[data-component-id="navbar"] .container {
  padding-top: calc(0.5rem * 0.75) !important;
  padding-bottom: calc(0.5rem * 0.75) !important;
}

/* Make the View Products button in hero 7% smaller vertically */
.hero .btn {
  padding-top: calc(0.5rem * 0.95) !important; /* Reduce vertical padding by 5% */
  padding-bottom: calc(0.5rem * 0.95) !important; /* Reduce vertical padding by 5% */
  height: auto !important;
  line-height: calc(1.5 * 0.95) !important; /* Reduce line height by 5% */
}

/* Make cart and currency buttons darker grey with gradient */
.navbar .cart .btn,
.navbar .currency-selector .choices__inner {
  background: linear-gradient(to right, #2a2a2a, #1a1a1a) !important; /* Much darker grey gradient */
  border: 1px solid #323232 !important; /* Darker border */
  color: white !important;
}

/* Darker hover effects for cart and currency buttons */
.navbar .cart .btn:hover,
.navbar .currency-selector:hover .choices__inner {
  background: linear-gradient(to right, #333333, #222222) !important; /* Slightly lighter on hover */
  border: 1px solid #4a4a4a !important; /* Lighter border on hover */
  box-shadow: 0 0 0 1.5px #4a4a4a, 0 0 6px 3px rgba(74, 74, 74, 0.75), 0 0 12px 6px rgba(74, 74, 74, 0.375) !important; /* Adjusted glow */
}

/* Navbar status badge styling - increased vertical height for spacing */
.navbar-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: calc(0.4rem * 1.15) !important; /* Keep gap same */
  background: color-mix(in srgb, var(--bs-body-bg) 96%, white 4%) !important; /* 1/4 lighter than original (4% white) */
  border: 1px solid #323232 !important; /* Darker border */
  border-radius: calc(1rem * 1.15) !important;
  padding: calc(0.25rem * 1.15 * 1.1 * 1.1) calc(0.75rem * 1.15) !important;
  font-size: calc(0.75rem * 1.15) !important;
  font-weight: 600 !important;
  color: #b8b8b8 !important;
  position: relative !important;
  height: calc(1.5rem * 1.15 * 1.1 * 1.1) !important;
}

/* Add pill-shaped purple glow to navbar badge */
.navbar-status-badge::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 200px !important; /* Slightly larger than footer badge */
  height: 90px !important; /* Slightly larger than footer badge */
  background: radial-gradient(ellipse, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.144) 15%, rgba(139, 92, 246, 0.096) 30%, rgba(139, 92, 246, 0.064) 45%, rgba(139, 92, 246, 0.04) 60%, rgba(139, 92, 246, 0.024) 70%, rgba(139, 92, 246, 0.012) 80%, rgba(139, 92, 246, 0.0064) 90%, rgba(139, 92, 246, 0.0032) 95%, transparent 100%) !important;
  border-radius: 50px !important; /* Pill-shaped border radius */
  pointer-events: none !important;
  z-index: 0 !important; /* Above background but below text */
  filter: blur(8px) !important; /* More blur for longer fade */
}

/* Ensure navbar badge content appears above the glow */
.navbar-status-badge .fade-dot,
.navbar-status-badge span {
  position: relative !important;
  z-index: 1 !important;
}

/* Ensure navbar-brand has relative positioning for pseudo-element */
.navbar-brand {
  position: relative !important;
}

/* Add large purple glow between brand name and navbar badge - only visible over background */
.navbar-brand::after {
  content: '' !important;
  position: absolute !important;
  right: 56px !important; /* Position between brand and badge */
  top: -290px !important; /* Position above navbar */
  transform: none !important;
  width: 480px !important; /* 300% bigger (120px * 4 = 480px) */
  height: 480px !important;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0.08) 20%, rgba(139, 92, 246, 0.05) 40%, rgba(139, 92, 246, 0.0224) 60%, rgba(139, 92, 246, 0.012) 75%, rgba(139, 92, 246, 0.0064) 85%, rgba(139, 92, 246, 0.0032) 90%, rgba(139, 92, 246, 0.0016) 94%, rgba(139, 92, 246, 0.0008) 97%, rgba(139, 92, 246, 0.00024) 99%, rgba(139, 92, 246, 0.00008) 99.5%, transparent 100%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 2 !important; /* Above secondary navbar but below everything else */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 72%,
    rgba(0, 0, 0, 0) 85%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 72%,
    rgba(0, 0, 0, 0) 85%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  filter: blur(8px) !important; /* More blur for ultra-soft edges */
}

/* Ensure primary navbar (and its glow) sits above the secondary navbar and hero media */
.navbar {
  position: relative !important;
  z-index: 12 !important;
}

/* Ensure background video appears on top of the glow */
.hero-video,
.bg-image {
  z-index: 10 !important; /* Much higher than glows */
  position: relative !important;
}

/* Secondary navbar with glow - clickable but below primary glow */
.navbar-secondary {
  z-index: 11 !important; /* Above hero media, below primary navbar */
  position: relative !important;
  box-shadow: 
    0 12px 80px rgba(59, 25, 142, 0.18), 
    0 8px 60px rgba(59, 25, 142, 0.14), 
    0 4px 35px rgba(59, 25, 142, 0.1), 
    0 2px 18px rgba(59, 25, 142, 0.07) !important; /* Faint purple glow extending far into hero, fades horizontally at 25% from ends */
}

/* Make separator line between Discord and FAQ 4px taller on top and 3px on bottom */
.navbar-secondary .vr {
  height: calc(1.5rem + 7px) !important;
  margin-top: -2px !important;
  margin-bottom: -5px !important;
}

/* Remove sticky positioning from both navbars */
header.sticky-top {
  position: static !important; /* Remove sticky positioning */
  top: auto !important;
}

/* Ensure navbar buttons and cart are above glows */
.navbar .btn,
.navbar .cart {
  z-index: 10 !important; /* Above glows */
  position: relative !important;
}

/* Bigger fading green dot to match scaled badge */
.fade-dot {
  width: calc(6px * 1.15) !important; /* 15% bigger dot */
  height: calc(6px * 1.15) !important;
  background-color: #22c55e !important; /* Green color */
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  animation: fade-in-out 2s ease-in-out infinite !important;
}

/* Fading animation that never goes fully transparent */
@keyframes fade-in-out {
  0%, 100% { opacity: 0.4; } /* Never fully transparent */
  50% { opacity: 1; } /* Full opacity at peak */
}

/* Reduce gap between products section and FAQ section */
.component:has(.products) {
  padding-bottom: 3rem !important; /* Reduce bottom padding */
}

.faq {
  padding-top: 3rem !important; /* Reduce top padding */
}

/* Narrow FAQ accordion by 36% total (18% padding on each side) */
.faq .accordion {
  max-width: 64% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Increase vertical height of FAQ questions by 35%, then reduce by 15% total */
.faq .accordion-button {
  padding-top: calc(1rem * 1.35 * 0.85) !important; /* 15% reduction from 1.35 */
  padding-bottom: calc(1rem * 1.35 * 0.85) !important; /* 15% reduction from 1.35 */
}

/* Reduce gap between FAQ questions */
.faq .accordion-item {
  margin-bottom: 0.55rem !important; /* Slightly increased from 0.5rem */
}

/* Replace FAQ arrows with theme color plus signs */
.faq .accordion-button::after {
  background-image: none !important;
  content: '+' !important;
  font-size: 1.5rem !important;
  font-weight: 120 !important; /* 40% thinner (200 * 0.6 = 120) */
  color: var(--cl-accent) !important; /* Theme color */
  transform: rotate(0deg) scale(1.4) !important; /* 40% larger using scale */
  transition: transform 0.3s ease !important;
  width: auto !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

/* Rotate plus to X when accordion is open */
.faq .accordion-button:not(.collapsed)::after {
  transform: rotate(-45deg) scale(1.4) !important; /* Counter-clockwise rotation, 40% larger */
}

/* Keep question text white instead of changing to accent color */
.faq .accordion {
  --bs-accordion-active-color: #ffffff !important;
}

/* Remove purple border and box-shadow when clicking on questions */
.faq .accordion {
  --bs-accordion-btn-focus-border-color: transparent !important;
  --bs-accordion-btn-focus-box-shadow: none !important;
}

/* Make the question background expand with the answer */
.faq .accordion-item {
  background: var(--bs-gray-bg) !important;
  overflow: hidden !important;
  transition: box-shadow 0.3s ease !important;
  border: 1px solid #2a2a2a !important; /* Subtle dark grey border */
  border-radius: 0.625rem !important; /* Softer corners (10px) */
}

/* Add glow border when FAQ question is clicked/opened */
.faq .accordion-item:has(.accordion-button:not(.collapsed)) {
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important;
}

/* Ensure accordion button background is transparent so item background shows */
.faq .accordion-button {
  background: transparent !important;
}

/* Ensure accordion button background stays transparent when not collapsed */
.faq .accordion-button:not(.collapsed) {
  background: transparent !important;
}

/* Ensure answer area has transparent background so item background shows */
.faq .accordion-collapse {
  background: transparent !important;
}

/* Ensure answer body has transparent background */
.faq .accordion-body {
  background: transparent !important;
  padding-top: 0.1rem !important; /* Reduce gap between question and answer by 2x (default is 1rem) */
  color: #a0a0a0 !important; /* Slightly darker grey text for answers */
}

/* Make cursor pointer when hovering over answer area */
.faq .accordion-collapse {
  cursor: pointer !important;
}

/* Make cursor pointer for all text and elements inside answer area */
.faq .accordion-collapse * {
  cursor: pointer !important;
}

/* FAQ support message below accordion */
.faq .support-message {
  text-align: center !important;
  margin-top: 1.156rem !important; /* 50% less than 2rem (1.36 * 0.85) */
  color: #6c757d !important; /* Grey text */
  font-size: 1rem !important;
}

.faq .support-message a {
  color: var(--cl-accent) !important; /* Theme color for link */
  text-decoration: none !important;
  transition: opacity 0.3s ease !important;
}

.faq .support-message a:hover {
  opacity: 0.8 !important;
  text-decoration: underline !important;
}

/* Media Program Section - Custom Layout */
.text-image-block .container {
  position: relative !important;
}

.text-image-block .row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important; /* Prevent wrapping */
  align-items: flex-end !important;
  gap: 2rem !important;
  position: relative !important;
  margin-top: 6rem !important; /* Reduced space - closer to description */
}

/* Hide the original title/subtitle wrapper in the column */
.text-image-block .col-12 > div[style*="text-align: center"] {
  position: absolute !important;
  top: -5.5rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100vw - 2 * 8.5rem) !important;
  max-width: 1140px !important;
  margin: 0 !important;
  z-index: 1 !important;
}

/* Extract title from column and position above row, centered between text and image */
.text-image-block .section-title {
  position: relative !important;
  top: 0 !important;
  text-align: center !important;
  justify-content: center !important;
  margin-bottom: 1rem !important;
  z-index: 1 !important;
}

/* Extract subtitle from column and position below title, centered between text and image */
.text-image-block .section-subtitle {
  position: relative !important;
  top: 0 !important;
  text-align: center !important;
  justify-content: center !important;
  margin-top: -0.5rem !important;
  margin-bottom: 2rem !important;
  z-index: 1 !important;
}

/* Text column - left side */
.text-image-block .row > div:first-child {
  flex: 0 0 50% !important; /* Fixed 50% width */
  max-width: 50% !important;
  min-width: 0 !important;
  text-align: left !important;
  padding-left: 8.5rem !important; /* Move text inward */
}

/* Image column - right side */
.text-image-block .row > div:last-child {
  flex: 0 0 50% !important; /* Fixed 50% width */
  max-width: 50% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  max-height: 300px !important;
  padding-right: 8.5rem !important; /* Move image inward */
}

.text-image-block .row > div:last-child img {
  width: 105% !important;
  height: auto !important;
  max-height: 300px !important;
  object-fit: contain !important;
  border-radius: 0.5rem !important;
  position: relative !important;
  top: -15px !important;
  left: -10px !important;
}

/* Left align the main text content */
.text-image-block .whitespace-pre-line {
  text-align: left !important;
  font-size: 0.9rem !important;
  color: #6c757d !important;
  padding-left: 1rem !important;
}

/* Keep specific title lines white and bold */
.text-image-block .whitespace-pre-line strong,
.text-image-block .whitespace-pre-line b {
  color: white !important;
  font-weight: bold !important;
  font-size: 1rem !important;
  display: block !important;
  margin-bottom: -1rem !important;
  position: relative !important;
  margin-left: -1rem !important;
  padding-left: 1rem !important;
}

/* Pulsing dot before bold text */
.text-image-block .whitespace-pre-line strong::before,
.text-image-block .whitespace-pre-line b::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: 6px !important;
  background-color: var(--cl-accent) !important;
  border-radius: 50% !important;
  animation: pulse-dot 2s ease-in-out infinite !important;
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(var(--cl-accent-rgb), 0.8);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-50%) scale(1.3);
    box-shadow: 0 0 0 6px rgba(var(--cl-accent-rgb), 0);
  }
}

/* Left align the CTA button */
.text-image-block .btn {
  text-align: left !important;
  margin-top: 1rem !important; /* Reduce gap from text */
}

/* Add glow effect to CTA button matching customer dashboard button */
.text-image-block .btn-primary {
  color: white !important;
  background-color: var(--cl-accent) !important;
  border: 1px solid var(--cl-accent) !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.75), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.375) !important;
  transition: all 0.3s ease !important;
}

.text-image-block .btn-primary:hover {
  color: white !important;
  background-color: var(--cl-accent) !important;
  border: 1px solid var(--cl-accent) !important;
  box-shadow: 0 0 0 2.25px var(--cl-accent), 0 0 9px 4.5px rgba(var(--cl-accent-rgb), 1.125), 0 0 18px 9px rgba(var(--cl-accent-rgb), 0.5625) !important;
  transform: none !important;
}

/* Responsive adjustments - Progressive breakpoints */
/* Medium screens: Reduce padding but keep horizontal layout */
@media (max-width: 900px) and (min-width: 768px) {
  .text-image-block .row > div:first-child {
    padding-right: 2rem !important;
  }
  
  .text-image-block .row > div:last-child {
    padding-right: 4rem !important;
  }
  
  .text-image-block .row > div:last-child img {
    max-height: 280px !important;
  }
}

/* Tablet: Further reduce padding, keep horizontal */
@media (max-width: 767px) and (min-width: 576px) {
  .text-image-block .row > div:first-child {
    padding-right: 1rem !important;
  }
  
  .text-image-block .row > div:last-child {
    padding-right: 2rem !important;
  }
  
  .text-image-block .row > div:last-child img {
    max-height: 250px !important;
    width: 100% !important;
  }
  
  .text-image-block .whitespace-pre-line {
    font-size: 0.85rem !important;
  }
}

/* Mobile: Stack image on top, text below */
@media (max-width: 575px) {
  .text-image-block .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .text-image-block .row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  
  .text-image-block .row > div:first-child {
    order: 1 !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .text-image-block .row > div:last-child {
    order: 0 !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 2rem !important;
    max-height: none !important;
  }
  
  .text-image-block .row > div:last-child img {
    max-width: 100% !important;
    max-height: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    top: 0 !important;
    left: 0 !important;
    position: relative !important;
  }
  
  .text-image-block .whitespace-pre-line {
    font-size: 0.85rem !important;
    padding-left: 0 !important;
  }
  
  .text-image-block .whitespace-pre-line strong,
  .text-image-block .whitespace-pre-line b {
    margin-left: 0 !important;
    padding-left: 1rem !important;
  }
  
  .text-image-block .section-title h2 {
    font-size: 1.5rem !important;
  }
  
  .text-image-block .section-subtitle p {
    font-size: 0.9rem !important;
  }
}

/* Media page specific spacing - increase top padding */
.text-image-block.media-header-spacing {
  padding-top: 8rem !important;
}

/* Status page - reduce product status boxes width by 25% on each side */
.status-cards {
  max-width: 72% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Align status group names with the left edge of the status boxes */
.status-group h2 {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 1px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Add background box around entire status group including name */
.status-group {
  background: #0D0E11 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--bs-border-radius) !important;
  padding: 1.5rem !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Media tiles styling */
.media-tiles-section {
  padding-top: 2rem !important;
  padding-bottom: 0rem !important;
  position: relative !important;
}

/* Tiers section title and subtitle */
.media-tiles-section::before {
  content: 'Tiers' !important;
  position: absolute !important;
  top: -3.5rem !important;
  left: 50% !important;
  transform: translateX(-575px) !important;
  color: white !important;
  font-size: 1.7rem !important;
  font-weight: bold !important;
  font-family: var(--bs-font-sans-serif) !important;
  z-index: 2 !important;
  white-space: nowrap !important;
}

.media-tiles-section::after {
  content: 'Different creator rankings each with unique requirements and rewards' !important;
  position: absolute !important;
  top: -1rem !important;
  left: 50% !important;
  transform: translateX(-575px) !important;
  color: #adb5bd !important;
  font-size: 1rem !important;
  font-family: var(--bs-font-sans-serif) !important;
  z-index: 2 !important;
  white-space: nowrap !important;
}

.media-tiles-section .media-info-box {
  max-width: 1150px !important;
  margin: 0 auto 2rem auto !important;
  background-color: #2c1a6665 !important;
  background: #2c1a6665 !important;
  border: 1px solid #4a2d8ad5 !important;
  border-color: #4a2d8ad5 !important;
  border-radius: 0.75rem !important;
  padding: 0.7rem 1rem !important;
  text-align: left !important;
}

.media-info-title {
  color: #4919af !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  margin: 0 0 0.5rem 0 !important;
  display: flex !important;
  align-items: center !important;
}

.media-info-title::before {
  content: '' !important;
  width: 1rem !important;
  height: 1rem !important;
  margin-right: 0.5rem !important;
  background-color: #593e98 !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='1rem' height='1rem' viewBox='0 -3 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M251.988432,7291.58588 L251.988432,7285.97425 C253.980638,7286.91168 255.523602,7287.8172 257.348463,7288.79353 C255.843351,7289.62824 253.980638,7290.56468 251.988432,7291.58588 M263.090998,7283.18289 C262.747343,7282.73013 262.161634,7282.37809 261.538073,7282.26141 C259.705243,7281.91336 248.270974,7281.91237 246.439141,7282.26141 C245.939097,7282.35515 245.493839,7282.58153 245.111335,7282.93357 C243.49964,7284.42947 244.004664,7292.45151 244.393145,7293.75096 C244.556505,7294.31342 244.767679,7294.71931 245.033639,7294.98558 C245.376298,7295.33761 245.845463,7295.57995 246.384355,7295.68865 C247.893451,7296.0008 255.668037,7296.17532 261.506198,7295.73552 C262.044094,7295.64178 262.520231,7295.39147 262.895762,7295.02447 C264.385932,7293.53455 264.28433,7285.06174 263.090998,7283.18289' transform='translate(-244.000000, -7281.000000)' fill='currentColor'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg width='1rem' height='1rem' viewBox='0 -3 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M251.988432,7291.58588 L251.988432,7285.97425 C253.980638,7286.91168 255.523602,7287.8172 257.348463,7288.79353 C255.843351,7289.62824 253.980638,7290.56468 251.988432,7291.58588 M263.090998,7283.18289 C262.747343,7282.73013 262.161634,7282.37809 261.538073,7282.26141 C259.705243,7281.91336 248.270974,7281.91237 246.439141,7282.26141 C245.939097,7282.35515 245.493839,7282.58153 245.111335,7282.93357 C243.49964,7284.42947 244.004664,7292.45151 244.393145,7293.75096 C244.556505,7294.31342 244.767679,7294.71931 245.033639,7294.98558 C245.376298,7295.33761 245.845463,7295.57995 246.384355,7295.68865 C247.893451,7296.0008 255.668037,7296.17532 261.506198,7295.73552 C262.044094,7295.64178 262.520231,7295.39147 262.895762,7295.02447 C264.385932,7293.53455 264.28433,7285.06174 263.090998,7283.18289' transform='translate(-244.000000, -7281.000000)' fill='currentColor'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

.media-info-subtitle {
  color: #846db2fd !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.media-tiles {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
  justify-content: center !important;
  max-width: 1150px !important;
  margin: 0 auto !important;
  position: relative !important;
}

.media-tile {
  background: #0D0E11 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.75rem !important;
  height: 308px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.media-tile::before {
  content: '' !important;
  position: absolute !important;
  top: calc(20% - 1.5px) !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  z-index: 2 !important;
  transition: height 0.3s ease, top 0.3s ease !important;
}

.media-tile::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 20% !important;
  background-image: url('https://www.dropbox.com/scl/fi/69t34w0siv2odjnoq5zbc/topographic-map-background_23-2148596457.avif?rlkey=kuertwg6qyx8t4ohqc2wbkhg0&st=b3hjyfar&dl=1') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0.1 !important;
  z-index: 1 !important;
  border-radius: 0.75rem 0.75rem 0 0 !important;
}

.media-tile:hover::before {
  height: 2px !important;
  top: calc(20% - 0.5px) !important;
}

/* Individual tile colors with gradients and upward glow */
.media-tile:nth-child(1)::before {
  border-bottom: none !important;
  background: linear-gradient(to right, #ffbb55, #b35f00) !important; /* Orange gradient */
  box-shadow: 0 -20px 40px rgba(255, 140, 0, 0.3), 0 -10px 20px rgba(255, 140, 0, 0.2) !important;
}

.media-tile:nth-child(2)::before {
  border-bottom: none !important;
  background: linear-gradient(to right, #ffed70, #b39500) !important; /* Yellow gradient */
  box-shadow: 0 -20px 40px rgba(255, 215, 0, 0.3), 0 -10px 20px rgba(255, 215, 0, 0.2) !important;
}

.media-tile:nth-child(3)::before {
  border-bottom: none !important;
  background: linear-gradient(to right, #55ebee, #008b8e) !important; /* Cyan-green gradient */
  box-shadow: 0 -20px 40px rgba(0, 206, 209, 0.3), 0 -10px 20px rgba(0, 206, 209, 0.2) !important;
}

.media-tile:nth-child(4)::before {
  border-bottom: none !important;
  background: linear-gradient(to right, #70b8ff, #0d5cb3) !important; /* Blue gradient */
  box-shadow: 0 -20px 40px rgba(30, 144, 255, 0.3), 0 -10px 20px rgba(30, 144, 255, 0.2) !important;
}

.media-tile:nth-child(5)::before {
  border-bottom: none !important;
  background: linear-gradient(to right, rgba(var(--cl-accent-rgb), 0.85), rgba(var(--cl-accent-rgb), 0.35)) !important; /* Theme color gradient */
  box-shadow: 0 -20px 40px rgba(var(--cl-accent-rgb), 0.3), 0 -10px 20px rgba(var(--cl-accent-rgb), 0.2) !important;
}

.media-tile:nth-child(6)::before {
  border-bottom: none !important;
  background: linear-gradient(to right, #ff7777, #b32020) !important; /* Red gradient */
  box-shadow: 0 -20px 40px rgba(255, 68, 68, 0.3), 0 -10px 20px rgba(255, 68, 68, 0.2) !important;
}

.media-tile:hover {
  transform: translateY(-4px) !important;
}

/* Individual tile hover effects with respective colors */
.media-tile:nth-child(1):hover {
  box-shadow: 
    0 0 12px 4px rgba(255, 140, 0, 0.25),
    0 0 20px 8px rgba(255, 140, 0, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 140, 0, 0.3) !important;
}

.media-tile:nth-child(2):hover {
  box-shadow: 
    0 0 12px 4px rgba(255, 215, 0, 0.25),
    0 0 20px 8px rgba(255, 215, 0, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 215, 0, 0.3) !important;
}

.media-tile:nth-child(3):hover {
  box-shadow: 
    0 0 12px 4px rgba(0, 206, 209, 0.25),
    0 0 20px 8px rgba(0, 206, 209, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(0, 206, 209, 0.3) !important;
}

.media-tile:nth-child(4):hover {
  box-shadow: 
    0 0 12px 4px rgba(30, 144, 255, 0.25),
    0 0 20px 8px rgba(30, 144, 255, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(30, 144, 255, 0.3) !important;
}

.media-tile:nth-child(5):hover {
  box-shadow: 
    0 0 12px 4px rgba(var(--cl-accent-rgb), 0.25),
    0 0 20px 8px rgba(var(--cl-accent-rgb), 0.1),
    0 8px 32px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(var(--cl-accent-rgb), 0.3) !important;
}

.media-tile:nth-child(6):hover {
  box-shadow: 
    0 0 12px 4px rgba(255, 68, 68, 0.25),
    0 0 20px 8px rgba(255, 68, 68, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 68, 68, 0.3) !important;
}

.media-tile-content {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 0.875rem !important;
}

.media-tile-label {
  position: absolute !important;
  top: calc(10% - 23px) !important;
  left: calc(50% + 20px) !important;
  transform: translateX(-50%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  font-family: 'Trebuchet MS', 'Verdana', 'Helvetica Neue', sans-serif !important;
  z-index: 3 !important;
  white-space: nowrap !important;
}

.media-tile-top-icon {
  position: absolute !important;
  top: calc(9.5% - 23px) !important;
  width: 3rem !important;
  height: 3rem !important;
  object-fit: contain !important;
  z-index: 3 !important;
}

/* Individual icon positioning for each tile based on text width */
.media-tile:nth-child(1) .media-tile-top-icon {
  left: calc(42% - 3rem) !important; /* "Media" - shortest text */
}

.media-tile:nth-child(2) .media-tile-top-icon {
  left: calc(32% - 5.5rem) !important; /* "Media Graduate" - longer text */
}

.media-tile:nth-child(3) .media-tile-top-icon {
  left: calc(38% - 4rem) !important; /* "Media Pro" - medium text */
}

.media-tile:nth-child(4) .media-tile-top-icon {
  left: calc(38% - 4.5rem) !important; /* "Media Elite" - medium text */
}

.media-tile:nth-child(5) .media-tile-top-icon {
  left: calc(35% - 5rem) !important; /* "Media Master" - longer text */
}

.media-tile:nth-child(6) .media-tile-top-icon {
  left: calc(33% - 6rem) !important; /* "Media Champion" - longest text */
}

/* Media tile titles positioned 1/4 from top, left aligned */
.media-tile-title {
  position: absolute !important;
  top: calc(27% - 5px) !important; /* Match media-tile-label vertical position, moved 5px up */
  left: 1.5rem !important;
  color: white !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  font-family: 'Trebuchet MS', 'Verdana', 'Helvetica Neue', sans-serif !important;
  z-index: 3 !important;
  white-space: nowrap !important;
}

/* Separator line beneath titles with fade effect */
.media-tile-separator {
  position: absolute !important;
  top: calc(7rem + 5px) !important;
  left: 1.5rem !important;
  right: 1.5rem !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent 0%, #495057 40%, #0D0E11 95%, transparent 100%) !important;
  z-index: 8 !important;
}

/* Top-right glow orb inside tiles where separator meets right wall */
.media-tile-separator::after {
  content: '' !important;
  position: absolute !important;
  top: calc(50% - 120px) !important; /* Adjust the px value to nudge orb up/down */
  right: -200px !important; /* Center orb on tile right edge; overflow:hidden on tile clips it */
  transform: translateY(0) !important; /* Keep entire orb below the line */
  width: 400px !important;
  height: 200px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 10 !important; /* Above everything inside tile */
  filter: blur(8px) !important; /* Match title background glow softness */
}

/* Per-tile orb colors matching tile accents */
.media-tile:nth-child(1) .media-tile-separator::after {
  background: radial-gradient(ellipse,
    rgba(255, 187, 85, 0.2) 0%,
    rgba(255, 187, 85, 0.144) 15%,
    rgba(255, 187, 85, 0.096) 30%,
    rgba(255, 187, 85, 0.064) 45%,
    rgba(255, 187, 85, 0.04) 60%,
    rgba(255, 187, 85, 0.024) 70%,
    rgba(255, 187, 85, 0.012) 80%,
    rgba(255, 187, 85, 0.0064) 90%,
    rgba(255, 187, 85, 0.0032) 95%,
    transparent 100%
  ) !important; /* Orange */
}

.media-tile:nth-child(2) .media-tile-separator::after {
  background: radial-gradient(ellipse,
    rgba(255, 237, 112, 0.2) 0%,
    rgba(255, 237, 112, 0.144) 15%,
    rgba(255, 237, 112, 0.096) 30%,
    rgba(255, 237, 112, 0.064) 45%,
    rgba(255, 237, 112, 0.04) 60%,
    rgba(255, 237, 112, 0.024) 70%,
    rgba(255, 237, 112, 0.012) 80%,
    rgba(255, 237, 112, 0.0064) 90%,
    rgba(255, 237, 112, 0.0032) 95%,
    transparent 100%
  ) !important; /* Yellow */
}

.media-tile:nth-child(3) .media-tile-separator::after {
  background: radial-gradient(ellipse,
    rgba(85, 235, 238, 0.2) 0%,
    rgba(85, 235, 238, 0.144) 15%,
    rgba(85, 235, 238, 0.096) 30%,
    rgba(85, 235, 238, 0.064) 45%,
    rgba(85, 235, 238, 0.04) 60%,
    rgba(85, 235, 238, 0.024) 70%,
    rgba(85, 235, 238, 0.012) 80%,
    rgba(85, 235, 238, 0.0064) 90%,
    rgba(85, 235, 238, 0.0032) 95%,
    transparent 100%
  ) !important; /* Cyan */
}

.media-tile:nth-child(4) .media-tile-separator::after {
  background: radial-gradient(ellipse,
    rgba(112, 184, 255, 0.2) 0%,
    rgba(112, 184, 255, 0.144) 15%,
    rgba(112, 184, 255, 0.096) 30%,
    rgba(112, 184, 255, 0.064) 45%,
    rgba(112, 184, 255, 0.04) 60%,
    rgba(112, 184, 255, 0.024) 70%,
    rgba(112, 184, 255, 0.012) 80%,
    rgba(112, 184, 255, 0.0064) 90%,
    rgba(112, 184, 255, 0.0032) 95%,
    transparent 100%
  ) !important; /* Blue */
}

.media-tile:nth-child(5) .media-tile-separator::after {
  background: radial-gradient(ellipse,
    rgba(var(--cl-accent-rgb), 0.2) 0%,
    rgba(var(--cl-accent-rgb), 0.144) 15%,
    rgba(var(--cl-accent-rgb), 0.096) 30%,
    rgba(var(--cl-accent-rgb), 0.064) 45%,
    rgba(var(--cl-accent-rgb), 0.04) 60%,
    rgba(var(--cl-accent-rgb), 0.024) 70%,
    rgba(var(--cl-accent-rgb), 0.012) 80%,
    rgba(var(--cl-accent-rgb), 0.0064) 90%,
    rgba(var(--cl-accent-rgb), 0.0032) 95%,
    transparent 100%
  ) !important; /* Theme accent */
}

.media-tile:nth-child(6) .media-tile-separator::after {
  background: radial-gradient(ellipse,
    rgba(255, 119, 119, 0.2) 0%,
    rgba(255, 119, 119, 0.144) 15%,
    rgba(255, 119, 119, 0.096) 30%,
    rgba(255, 119, 119, 0.064) 45%,
    rgba(255, 119, 119, 0.04) 60%,
    rgba(255, 119, 119, 0.024) 70%,
    rgba(255, 119, 119, 0.012) 80%,
    rgba(255, 119, 119, 0.0064) 90%,
    rgba(255, 119, 119, 0.0032) 95%,
    transparent 100%
  ) !important; /* Red */
}

/* Requirements title below separator line */
.media-tile-requirements {
  position: absolute !important;
  top: calc(7rem + 20px) !important;
  left: 1.5rem !important;
  color: white !important;
  font-size: 0.95rem !important;
  font-weight: bold !important;
  font-family: var(--bs-font-sans-serif) !important;
  z-index: 3 !important;
  white-space: nowrap !important;
}

/* Separator line to the right of Requirements title that fades out */
.media-tile-requirements::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: calc(100% + 0.6rem) !important;
  transform: translateY(-50%) !important;
  width: 225px !important;
  height: 1px !important;
  background: linear-gradient(to right, #586068 0%, #0D0E11 95%, transparent 100%) !important;
  z-index: 3 !important;
}

/* Subtitle below Requirements title */
.media-tile-subtitle {
  position: absolute !important;
  top: calc(7rem + 45px) !important;
  left: 1.5rem !important;
  right: 1.5rem !important;
  color: #adb5bd !important;
  font-size: 0.85rem !important;
  font-weight: normal !important;
  font-family: var(--bs-font-sans-serif) !important;
  line-height: 1.3 !important;
  z-index: 3 !important;
}

/* Pill badge inside media tiles, aligned to right of the tile title */
.media-tile-badge {
  position: absolute !important;
  top: calc(27% - 5px) !important; /* Match media-tile-title vertical position, moved 5px up */
  right: 1.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.2rem 0.7rem !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, #0D0E11 92%, white 8%) !important;
  border: 1px solid #323232 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  font-family: var(--bs-font-sans-serif) !important;
  z-index: 4 !important; /* Above separator and tile background */
  overflow: hidden !important;
}

/* Generic glow behind the badge content (disabled for tiles) */
.media-tile-badge::before {
  content: '' !important;
  display: none !important;
}

/* Ensure badge dot and text sit above the glow */
.media-tile-badge .fade-dot,
.media-tile-badge span {
  position: relative !important;
  z-index: 1 !important;
}

/* Hide pulsing dot inside tile badges only (keep navbar/footer dots) */
.media-tile-badge .fade-dot {
  display: none !important;
}

/* Default badge dot size inside tiles (inherit animation from .fade-dot) */
.media-tile-badge .fade-dot {
  width: calc(6px * 1.1) !important;
  height: calc(6px * 1.1) !important;
}

/* Per-tile badge text, orb, and glow colors matching existing tile accents */
.media-tile:nth-child(1) .media-tile-badge span {
  color: #ffbb55 !important; /* Orange */
}

.media-tile:nth-child(1) .media-tile-badge .fade-dot {
  background-color: #ffbb55 !important;
}

.media-tile:nth-child(1) .media-tile-badge::before {
  background: radial-gradient(ellipse, rgba(255, 187, 85, 0.22) 0%, rgba(255, 187, 85, 0.14) 25%, rgba(255, 187, 85, 0.07) 55%, transparent 100%) !important;
}

.media-tile:nth-child(2) .media-tile-badge span {
  color: #ffed70 !important; /* Yellow */
}

.media-tile:nth-child(2) .media-tile-badge .fade-dot {
  background-color: #ffed70 !important;
}

.media-tile:nth-child(2) .media-tile-badge::before {
  background: radial-gradient(ellipse, rgba(255, 237, 112, 0.22) 0%, rgba(255, 237, 112, 0.14) 25%, rgba(255, 237, 112, 0.07) 55%, transparent 100%) !important;
}

.media-tile:nth-child(3) .media-tile-badge span {
  color: #55ebee !important; /* Cyan */
}

.media-tile:nth-child(3) .media-tile-badge .fade-dot {
  background-color: #55ebee !important;
}

.media-tile:nth-child(3) .media-tile-badge::before {
  background: radial-gradient(ellipse, rgba(85, 235, 238, 0.22) 0%, rgba(85, 235, 238, 0.14) 25%, rgba(85, 235, 238, 0.07) 55%, transparent 100%) !important;
}

.media-tile:nth-child(4) .media-tile-badge span {
  color: #70b8ff !important; /* Blue */
}

.media-tile:nth-child(4) .media-tile-badge .fade-dot {
  background-color: #70b8ff !important;
}

.media-tile:nth-child(4) .media-tile-badge::before {
  background: radial-gradient(ellipse, rgba(112, 184, 255, 0.22) 0%, rgba(112, 184, 255, 0.14) 25%, rgba(112, 184, 255, 0.07) 55%, transparent 100%) !important;
}

.media-tile:nth-child(5) .media-tile-badge span {
  color: rgba(var(--cl-accent-rgb), 0.9) !important; /* Theme accent */
}

.media-tile:nth-child(5) .media-tile-badge .fade-dot {
  background-color: rgba(var(--cl-accent-rgb), 0.9) !important;
}

.media-tile:nth-child(5) .media-tile-badge::before {
  background: radial-gradient(ellipse, rgba(var(--cl-accent-rgb), 0.22) 0%, rgba(var(--cl-accent-rgb), 0.14) 25%, rgba(var(--cl-accent-rgb), 0.07) 55%, transparent 100%) !important;
}

.media-tile:nth-child(6) .media-tile-badge span {
  color: #ff7777 !important; /* Red */
}

.media-tile:nth-child(6) .media-tile-badge .fade-dot {
  background-color: #ff7777 !important;
}

.media-tile:nth-child(6) .media-tile-badge::before {
  background: radial-gradient(ellipse, rgba(255, 119, 119, 0.22) 0%, rgba(255, 119, 119, 0.14) 25%, rgba(255, 119, 119, 0.07) 55%, transparent 100%) !important;
}

/* Highlighted text in subtitles */
.media-tile-subtitle .highlight-text {
  font-weight: bold !important;
}

/* Individual tile subtitle highlight colors */
.media-tile:nth-child(1) .media-tile-subtitle .highlight-text {
  color: #ffbb55 !important; /* Orange color matching first tile gradient */
}

.media-tile:nth-child(2) .media-tile-subtitle .highlight-text {
  color: #ffed70 !important; /* Yellow for second tile */
}

.media-tile:nth-child(3) .media-tile-subtitle .highlight-text {
  color: #55ebee !important; /* Cyan for third tile */
}

.media-tile:nth-child(4) .media-tile-subtitle .highlight-text {
  color: #70b8ff !important; /* Blue for fourth tile */
}

.media-tile:nth-child(5) .media-tile-subtitle .highlight-text {
  color: rgba(var(--cl-accent-rgb), 0.85) !important; /* Theme color for fifth tile */
}

.media-tile:nth-child(6) .media-tile-subtitle .highlight-text {
  color: #ff7777 !important; /* Red for sixth tile */
}

/* Rewards title below subtitle */
.media-tile-rewards {
  position: absolute !important;
  top: calc(7rem + 70px) !important;
  left: 1.5rem !important;
  color: white !important;
  font-size: 0.95rem !important;
  font-weight: bold !important;
  font-family: var(--bs-font-sans-serif) !important;
  z-index: 3 !important;
  white-space: nowrap !important;
}

/* Move first tile Rewards title down more */
.media-tile:nth-child(1) .media-tile-rewards {
  top: calc(7rem + 70px) !important;
}

/* Rewards subtitle below Rewards title */
.media-tile-rewards-subtitle {
  position: absolute !important;
  top: calc(7rem + 95px) !important;
  left: 1.5rem !important;
  right: 1.5rem !important;
  color: #adb5bd !important;
  font-size: 0.85rem !important;
  font-weight: normal !important;
  font-family: var(--bs-font-sans-serif) !important;
  line-height: 1.3 !important;
  z-index: 3 !important;
}

/* First tile rewards subtitle positioned lower */
.media-tile:nth-child(1) .media-tile-rewards-subtitle:nth-child(7) {
  top: calc(7rem + 95px) !important;
}

.media-tile:nth-child(1) .media-tile-rewards-subtitle:nth-child(8) {
  top: calc(7rem + 135px) !important;
}

/* Third tile multiple rewards subtitles positioning */
.media-tile:nth-child(3) .media-tile-rewards-subtitle:nth-child(7) {
  top: calc(7rem + 95px) !important;
}

.media-tile:nth-child(3) .media-tile-rewards-subtitle:nth-child(8) {
  top: calc(7rem + 115px) !important;
}

.media-tile:nth-child(3) .media-tile-rewards-subtitle:nth-child(9) {
  top: calc(7rem + 135px) !important;
}

/* Fourth tile multiple rewards subtitles positioning */
.media-tile:nth-child(4) .media-tile-rewards-subtitle:nth-child(7) {
  top: calc(7rem + 95px) !important;
}

.media-tile:nth-child(4) .media-tile-rewards-subtitle:nth-child(8) {
  top: calc(7rem + 115px) !important;
}

.media-tile:nth-child(4) .media-tile-rewards-subtitle:nth-child(9) {
  top: calc(7rem + 135px) !important;
}

/* Fifth tile multiple rewards subtitles positioning */
.media-tile:nth-child(5) .media-tile-rewards-subtitle:nth-child(7) {
  top: calc(7rem + 95px) !important;
}

.media-tile:nth-child(5) .media-tile-rewards-subtitle:nth-child(8) {
  top: calc(7rem + 115px) !important;
}

.media-tile:nth-child(5) .media-tile-rewards-subtitle:nth-child(9) {
  top: calc(7rem + 135px) !important;
}

.media-tile:nth-child(5) .media-tile-rewards-subtitle:nth-child(10) {
  top: calc(7rem + 155px) !important;
}

/* Sixth tile multiple rewards subtitles positioning */
.media-tile:nth-child(6) .media-tile-rewards-subtitle:nth-child(7) {
  top: calc(7rem + 95px) !important;
}

.media-tile:nth-child(6) .media-tile-rewards-subtitle:nth-child(8) {
  top: calc(7rem + 115px) !important;
}

.media-tile:nth-child(6) .media-tile-rewards-subtitle:nth-child(9) {
  top: calc(7rem + 135px) !important;
}

.media-tile:nth-child(6) .media-tile-rewards-subtitle:nth-child(10) {
  top: calc(7rem + 155px) !important;
}

/* White label for rewards labels */
.media-tile-rewards-subtitle .rewards-label {
  color: white !important;
  font-weight: normal !important;
}

/* Highlighted text in rewards subtitles */
.media-tile-rewards-subtitle .highlight-text {
  font-weight: bold !important;
}

/* Individual tile rewards subtitle highlight colors */
.media-tile:nth-child(1) .media-tile-rewards-subtitle .highlight-text {
  color: #ffbb55 !important; /* Orange for first tile */
}

.media-tile:nth-child(2) .media-tile-rewards-subtitle .highlight-text {
  color: #ffed70 !important; /* Yellow for second tile */
}

.media-tile:nth-child(3) .media-tile-rewards-subtitle .highlight-text {
  color: #55ebee !important; /* Cyan for third tile */
}

.media-tile:nth-child(4) .media-tile-rewards-subtitle .highlight-text {
  color: #70b8ff !important; /* Blue for fourth tile */
}

.media-tile:nth-child(5) .media-tile-rewards-subtitle .highlight-text {
  color: rgba(var(--cl-accent-rgb), 0.85) !important; /* Theme color for fifth tile */
}

.media-tile:nth-child(6) .media-tile-rewards-subtitle .highlight-text {
  color: #ff7777 !important; /* Red for sixth tile */
}

/* Separator line to the right of Rewards title that fades out */
.media-tile-rewards::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: calc(100% + 0.6rem) !important;
  transform: translateY(-50%) !important;
  width: 225px !important;
  height: 1px !important;
  background: linear-gradient(to right, #586068 0%, #0D0E11 95%, transparent 100%) !important;
  z-index: 3 !important;
}

/* Individual tile label colors matching their separator lines */
.media-tile:nth-child(1) .media-tile-label {
  background: linear-gradient(to right, #ffbb55, #b35f00) !important; /* Orange gradient */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.media-tile:nth-child(2) .media-tile-label {
  background: linear-gradient(to right, #ffed70, #b39500) !important; /* Yellow gradient */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.media-tile:nth-child(3) .media-tile-label {
  background: linear-gradient(to right, #55ebee, #008b8e) !important; /* Cyan-green gradient */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.media-tile:nth-child(4) .media-tile-label {
  background: linear-gradient(to right, #70b8ff, #0d5cb3) !important; /* Blue gradient */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.media-tile:nth-child(5) .media-tile-label {
  background: linear-gradient(to right, rgba(var(--cl-accent-rgb), 0.85), rgba(var(--cl-accent-rgb), 0.35)) !important; /* Theme color gradient */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.media-tile:nth-child(6) .media-tile-label {
  background: linear-gradient(to right, #ff7777, #b32020) !important; /* Red gradient */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Responsive adjustments for media tiles */
/* Maintain 3-column layout and full size until 900px */
@media (max-width: 900px) and (min-width: 769px) {
  /* Keep 3 columns but allow slight shrinking */
  .media-tiles {
    max-width: 100% !important;
    padding: 0 1rem !important;
  }
  
  .media-tile {
    height: 280px !important;
  }
}

/* Shrink more and go to 2 columns at medium-small screens */
@media (max-width: 768px) and (min-width: 576px) {
  .media-tiles {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
  }
  
  .media-tile {
    height: 260px !important;
  }
  
  /* Adjust font sizes for smaller tiles */
  .media-tile-title {
    font-size: 1.1rem !important;
  }
  
  .media-tile-label {
    font-size: 0.9rem !important;
  }
}

/* Stack to single column on mobile */
@media (max-width: 575px) {
  .media-tiles {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 1rem !important;
  }
  
  .media-tile {
    height: 240px !important;
  }
  
  /* Further adjust font sizes for mobile */
  .media-tile-title {
    font-size: 1rem !important;
  }
  
  .media-tile-label {
    font-size: 0.85rem !important;
  }
  
  .media-tile-subtitle {
    font-size: 0.75rem !important;
  }
  
  .media-tile-requirements,
  .media-tile-rewards {
    font-size: 0.85rem !important;
  }
  
  .media-tile-rewards-subtitle {
    font-size: 0.7rem !important;
  }
}

/* Progressive padding reduction for medium screens */
@media (max-width: 768px) and (min-width: 576px) {
  .media-tiles-section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .media-tile-title,
  .media-tile-requirements,
  .media-tile-subtitle,
  .media-tile-rewards {
    left: 1rem !important;
  }
  
  .media-tile-subtitle,
  .media-tile-rewards-subtitle {
    right: 1rem !important;
  }
  
  .media-tile-badge {
    right: 1rem !important;
  }
  
  .media-tile-separator {
    left: 1rem !important;
    right: 1rem !important;
  }
}

/* Stack to single column on mobile with minimal padding */
@media (max-width: 575px) {
  .media-tiles-section {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  .media-tiles {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 1rem !important;
  }
  
  .media-tile {
    height: 240px !important;
  }
  
  /* Reduce internal padding on mobile */
  .media-tile-title,
  .media-tile-requirements,
  .media-tile-subtitle,
  .media-tile-rewards {
    left: 0.75rem !important;
  }
  
  .media-tile-subtitle,
  .media-tile-rewards-subtitle {
    right: 0.75rem !important;
  }
  
  .media-tile-badge {
    right: 0.75rem !important;
  }
  
  .media-tile-separator {
    left: 0.75rem !important;
    right: 0.75rem !important;
  }
  
  /* Further adjust font sizes for mobile */
  .media-tile-title {
    font-size: 1rem !important;
  }
  
  .media-tile-label {
    font-size: 0.85rem !important;
  }
  
  .media-tile-subtitle {
    font-size: 0.75rem !important;
  }
  
  .media-tile-requirements,
  .media-tile-rewards {
    font-size: 0.85rem !important;
  }
  
  .media-tile-rewards-subtitle {
    font-size: 0.7rem !important;
  }
}

/* Extra small screens - further reduce padding */
@media (max-width: 400px) {
  .media-tiles-section {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  
  .media-tile-title,
  .media-tile-requirements,
  .media-tile-subtitle,
  .media-tile-rewards {
    left: 0.5rem !important;
  }
  
  .media-tile-subtitle,
  .media-tile-rewards-subtitle {
    right: 0.5rem !important;
  }
  
  .media-tile-badge {
    right: 0.5rem !important;
  }
  
  .media-tile-separator {
    left: 0.5rem !important;
    right: 0.5rem !important;
  }
  
  .media-tile {
    height: 220px !important;
  }
  
  .media-tile-title {
    font-size: 0.9rem !important;
  }
  
  .media-tile-subtitle {
    font-size: 0.7rem !important;
  }
  
  .media-tile-requirements,
  .media-tile-rewards {
    font-size: 0.8rem !important;
  }
  
  .media-tile-rewards-subtitle {
    font-size: 0.65rem !important;
  }
}

/* Requirements Section Component */
.requirements-section {
  padding: 4rem 0 !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  max-width: 1150px !important;
  margin: 0 auto !important;
}

/* Requirements section title */
.requirements-section-title {
  color: white !important;
  font-size: 1.7rem !important;
  font-weight: bold !important;
  font-family: var(--bs-font-sans-serif) !important;
  margin-bottom: 1rem !important;
  text-align: left !important;
}

/* Requirements content box */
.requirements-content-box {
  width: 100% !important;
  max-width: 1150px !important;
  background: #0D0E11 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--bs-border-radius) !important;
  padding: 1.5rem !important;
  color: #adb5bd !important;
  font-size: 0.95rem !important;
  font-weight: normal !important;
  font-family: var(--bs-font-sans-serif) !important;
  line-height: 1.3 !important;
  margin-bottom: 1.5rem !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Add glow orb to top right of each requirements content box */
.requirements-content-box::before {
  content: '' !important;
  position: absolute !important;
  top: -200px !important;
  right: -200px !important;
  width: 380px !important;
  height: 380px !important;
  background: radial-gradient(circle, rgba(var(--cl-accent-rgb), 0.12) 0%, rgba(var(--cl-accent-rgb), 0.08) 25%, rgba(var(--cl-accent-rgb), 0.04) 50%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

.requirements-content-box:last-child {
  margin-bottom: 0 !important;
}

/* Requirements content box title */
.requirements-content-title {
  color: white !important;
  font-weight: bold !important;
  font-size: 1.25rem !important;
  margin-bottom: 0.8rem !important;
  display: block !important;
}

/* Requirements subtitle */
.requirements-subtitle {
  color: #adb5bd !important;
  font-size: 0.95rem !important;
  font-weight: normal !important;
  font-family: var(--bs-font-sans-serif) !important;
  line-height: 1.3 !important;
  margin-bottom: 1rem !important;
}

/* Requirements list styling */
.requirements-list {
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.requirements-list li {
  margin-bottom: 0.5rem !important;
  padding-left: 1.5rem !important;
  position: relative !important;
}

.requirements-list li::before {
  content: '•' !important;
  position: absolute !important;
  left: 0 !important;
  color: #adb5bd !important;
}

/* Requirements text color styling */
.requirements-need {
  color: white !important;
}

.requirements-ft-reign {
  color: var(--cl-accent) !important;
}

.requirements-example-product {
  color: white !important;
}

.requirements-example-label {
  color: white !important;
}

.requirements-example-title {
  color: var(--cl-accent) !important;
}

.requirements-exact {
  color: white !important;
}

.requirements-dont {
  color: white !important;
}

/* Requirements description box */
.requirements-description-box {
  width: 100% !important;
  background: #16171A !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--bs-border-radius) !important;
  padding: 1.5rem !important;
  margin-top: 1rem !important;
  position: relative !important;
}

.requirements-description-content {
  color: #adb5bd !important;
  font-size: 0.9rem !important;
  font-weight: normal !important;
  font-family: var(--bs-font-sans-serif) !important;
  line-height: 1.4 !important;
  white-space: pre-wrap !important;
}

/* Requirements copy button */
.requirements-copy-btn {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;
  color: #adb5bd !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.requirements-copy-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: white !important;
}

.requirements-copy-btn:active {
  transform: scale(0.95) !important;
}

/* Requirements integrity box - matches media-info-box styling */
.requirements-integrity-box {
  max-width: 1150px !important;
  margin: 1rem auto 0 auto !important;
  background-color: #661a1a65 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--bs-border-radius) !important;
  padding: 1rem !important;
  text-align: left !important;
}

.requirements-integrity-title {
  color: #af1919 !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  margin: 0 0 0.5rem 0 !important;
  display: flex !important;
  align-items: center !important;
}

.requirements-integrity-subtitle {
  color: #b26d6dfd !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.requirements-integrity-darker {
  color: #af1919 !important;
  font-weight: bold !important;
}

/* Requirements video status box - blue color scheme */
.requirements-video-status-box {
  max-width: 1150px !important;
  margin: 1rem auto 0 auto !important;
  background-color: #1a2c6665 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--bs-border-radius) !important;
  padding: 1rem !important;
  text-align: left !important;
}

.requirements-video-status-title {
  color: #1947af !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  margin: 0 0 0.5rem 0 !important;
  display: flex !important;
  align-items: center !important;
}

.requirements-video-status-subtitle {
  color: #6d84b2fd !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.requirements-video-status-darker {
  color: #1947af !important;
  font-weight: bold !important;
}

/* Requirements stay in program section */
.requirements-stay-program {
  margin-top: 1rem !important;
}

.requirements-stay-program-title {
  color: white !important;
  font-size: 0.9rem !important;
  font-weight: bold !important;
  margin: 0 0 0.3rem 0 !important;
  display: flex !important;
  align-items: center !important;
  margin-left: -3px !important;
}

/* Requirements media tier conditions section */
.requirements-media-tier-conditions {
  margin-top: 1rem !important;
}

.requirements-media-tier-conditions-title {
  color: white !important;
  font-size: 0.9rem !important;
  font-weight: bold !important;
  margin: 0 0 0.3rem 0 !important;
  display: flex !important;
  align-items: center !important;
}

.requirements-media-tier-conditions-subtitle {
  color: #adb5bd !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.requirements-media-tier-orange {
  color: #ffbb55 !important;
  font-weight: bold !important;
}

/* Requirements video lengths section */
.requirements-video-lengths {
  margin-top: 1rem !important;
}

.requirements-video-lengths-title {
  color: white !important;
  font-size: 0.9rem !important;
  font-weight: bold !important;
  margin: 0 0 0.3rem 0 !important;
  display: flex !important;
  align-items: center !important;
}

.requirements-video-lengths-subtitle {
  color: #adb5bd !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.requirements-long-form {
  color: var(--cl-accent) !important;
  font-weight: bold !important;
}

.requirements-short-form {
  color: var(--cl-accent) !important;
  font-weight: bold !important;
}

.requirements-time-period {
  color: var(--cl-accent) !important;
  font-weight: bold !important;
}

/* Requirements video standards section */
.requirements-video-standards {
  margin-top: 1rem !important;
}

.requirements-video-standards-title {
  color: white !important;
  font-size: 0.9rem !important;
  font-weight: bold !important;
  margin: 0 0 0.3rem 0 !important;
  display: flex !important;
  align-items: center !important;
}

.requirements-video-standards-subtitle {
  color: #adb5bd !important;
  font-size: 0.8rem !important;
  margin: 0.4rem 0 0.3rem 0 !important;
  line-height: 1.2 !important;
}

.requirements-longform-standards-subtitle {
  color: #adb5bd !important;
  font-size: 0.8rem !important;
  margin: 0 0 1rem 0 !important;
  line-height: 1.2 !important;
}

.requirements-longform-standards {
  color: var(--cl-accent) !important;
  font-weight: bold !important;
}

.requirements-shortform-standards {
  color: var(--cl-accent) !important;
  font-weight: bold !important;
}

.requirements-shortform-subtitle {
  margin-top: 0.8rem !important;
}

.requirements-standards-list {
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.requirements-standards-list li {
  margin-bottom: 0.3rem !important;
  padding-left: 1.5rem !important;
  position: relative !important;
  color: #adb5bd !important;
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
}

.requirements-standards-list li::before {
  content: '•' !important;
  position: absolute !important;
  left: 0.5rem !important;
  color: #adb5bd !important;
}

.requirements-white-text {
  color: white !important;
}

/* Remove centering from nested status-cards so spacing matches on all sides */
.status-group .status-cards {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Add outline to individual status cards */
.status-card {
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: #16171A !important;
}

.status-page section.py-5-nav {
  position: relative !important;
}

.experience-preview .section-title {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

.experience-preview-slider {
  margin-top: 2.5rem !important;
  display: flex !important;
  justify-content: center !important;
}

.experience-preview-slider-inner {
  position: relative !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  border-radius: 1rem !important;
  background: var(--bs-body-bg) !important;
  border: 1px solid #18181d !important;
  padding: 0.625rem !important;
  box-sizing: border-box !important;
}

.experience-preview-slider-inner::before {
  content: 'Non Cheat' !important;
  position: absolute !important;
  top: -2.5rem !important;
  left: 25% !important;
  transform: translateX(-50%) !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  color: #adb5bd !important;
  pointer-events: none !important;
  z-index: 10 !important;
  white-space: nowrap !important;
}

.experience-preview-slider-inner::after {
  content: 'With Cheat' !important;
  position: absolute !important;
  top: -2.5rem !important;
  left: 75% !important;
  transform: translateX(-50%) !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  color: #adb5bd !important;
  pointer-events: none !important;
  z-index: 10 !important;
  white-space: nowrap !important;
}

.experience-preview-slider-glow {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 937.5px !important;
  height: 687.5px !important;
  background: radial-gradient(ellipse, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.144) 15%, rgba(139, 92, 246, 0.096) 30%, rgba(139, 92, 246, 0.064) 45%, rgba(139, 92, 246, 0.04) 60%, rgba(139, 92, 246, 0.024) 70%, rgba(139, 92, 246, 0.012) 80%, rgba(139, 92, 246, 0.0064) 90%, rgba(139, 92, 246, 0.0032) 95%, transparent 100%) !important;
  border-radius: 50px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(10px) !important;
}

.experience-preview-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 0.625rem !important;
  position: relative !important;
  z-index: 1 !important;
}

.experience-preview-overlay {
  position: absolute !important;
  top: 0.625rem !important;
  left: 0.625rem !important;
  right: 0.625rem !important;
  bottom: 0.625rem !important;
  overflow: hidden !important;
  -webkit-clip-path: inset(0 50% 0 0);
  clip-path: inset(0 50% 0 0);
  border-radius: 0.625rem !important;
  z-index: 2 !important;
}

.experience-preview-overlay .experience-preview-image-top {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0.625rem !important;
}

.experience-preview-handle {
  position: absolute !important;
  top: 0.625rem !important;
  bottom: 0.625rem !important;
  width: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  cursor: ew-resize !important;
  pointer-events: none !important;
}

.experience-preview-handle-line {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -1px !important;
  width: 1px !important;
  background: linear-gradient(to bottom, transparent 0%, var(--cl-accent) 30%, var(--cl-accent) 70%, transparent 100%) !important;
}

.experience-preview-handle-grip {
  position: absolute !important;
  top: 50% !important;
  left: -21px !important;
  transform: translateY(-50%) !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: var(--cl-accent) !important;
  border: none !important;
  box-shadow: 0 0 15px rgba(var(--cl-accent-rgb), 0.7) !important;
  position: absolute !important;
  pointer-events: auto !important;
  cursor: default !important;
}

.experience-preview-handle-grip::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 32px !important;
  height: 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4L4 9L8 14' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 4L24 9L20 14' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.experience-preview-handle-grip::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
  width: 55px !important;
  height: 55px !important;
  border-radius: 999px !important;
  background: rgba(var(--cl-accent-rgb), 1) !important;
  pointer-events: none !important;
  animation: experience-preview-pulse 3s ease-in-out infinite !important;
}

.experience-preview-orbit-dot {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 7.5px !important;
  height: 7.5px !important;
  border-radius: 999px !important;
  background: rgba(var(--cl-accent-rgb), 0.98) !important;
  box-shadow: 0 0 12px rgba(var(--cl-accent-rgb), 0.9) !important;
  transform:
    translate(-50%, -50%)
    translate(var(--orbit-x, 0), var(--orbit-y, 0))
    scale(var(--orbit-scale, 1)) !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
  z-index: 999 !important;
  transition: opacity 0.2s ease-out !important;
}

@keyframes experience-preview-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.25);
    opacity: 0.3;
  }
}

.experience-preview-slider-inner,
.experience-preview-slider-inner * {
  user-select: none !important;
}

/* Feedback badge removed - replaced with glow/grid */

/* FORCE HIDE ALL BADGES ON PRODUCTS AND FEEDBACKS PAGES */
.products-page-header .section-title::before,
.products-page-header .section-title::after,
.feedbacks .section-title::before,
.feedbacks .section-title::after,
section.feedbacks::before,
section.feedbacks::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.feedback-page section.py-5-nav {
  position: relative !important;
}

.feedback-page .section-title {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

.feedback-page .section-title h1 {
  text-align: center !important;
  width: 100% !important;
  font-weight: bold !important;
}

.feedback-page .section-subtitle {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
}

.feedback-page .section-subtitle p {
  text-align: center !important;
  margin: 0 auto !important;
}

/* Add oval purple glow with grid behind feedback-page (reviews) title and subtitle */
.feedback-page .py-5-nav > div[style*="text-align: center"]::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 600px !important;
  height: 225px !important;
  background-image: 
    radial-gradient(ellipse, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.108) 15%, rgba(139, 92, 246, 0.073) 30%, rgba(139, 92, 246, 0.048) 45%, rgba(139, 92, 246, 0.03) 60%, rgba(139, 92, 246, 0.018) 70%, rgba(139, 92, 246, 0.009) 80%, rgba(139, 92, 246, 0.0048) 90%, rgba(139, 92, 246, 0.0024) 95%, transparent 100%),
    linear-gradient(rgba(59, 25, 142, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 25, 142, 0.3) 1px, transparent 1px) !important;
  background-size: 
    100% 100%,
    50px 50px,
    50px 50px !important;
  background-position: 
    0 0,
    0 0,
    0 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
  -webkit-mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.25) 32%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.01) 60%, transparent 68%) !important;
}

/* Ensure parent container has relative positioning for feedback-page */
.feedback-page .py-5-nav > div[style*="text-align: center"] {
  position: relative !important;
}

/* Ensure feedback-page title and subtitle appear above the glow */
.feedback-page .section-title,
.feedback-page .section-subtitle {
  position: relative !important;
  z-index: 1 !important;
}

/* Home page section glow orbs - exclude products and hero */
section.component.features,
section.component.experience-preview,
section.component.faq,
section.text-block.component,
section.text-image-block.component,
section.text-video-block.component,
section.requirements-section.component {
  position: relative !important;
}

/* Middle left glow orb */
section.component.features::before,
section.component.experience-preview::before,
section.component.faq::before,
section.text-block.component::before,
section.text-image-block.component::before,
section.text-video-block.component::before,
section.requirements-section.component::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: -180px !important;
  transform: translateY(-50%) !important;
  width: 350px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(var(--cl-accent-rgb), 0.13) 0%, rgba(var(--cl-accent-rgb), 0.0975) 20%, rgba(var(--cl-accent-rgb), 0.065) 40%, rgba(var(--cl-accent-rgb), 0.0325) 60%, transparent 80%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  filter: blur(40px) !important;
}

/* Top right glow orb */
section.component.features::after,
section.component.experience-preview::after,
section.component.faq::after,
section.text-block.component::after,
section.text-image-block.component::after,
section.text-video-block.component::after,
section.requirements-section.component::after {
  content: '' !important;
  position: absolute !important;
  top: -150px !important;
  right: -170px !important;
  width: 350px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(var(--cl-accent-rgb), 0.13) 0%, rgba(var(--cl-accent-rgb), 0.0975) 20%, rgba(var(--cl-accent-rgb), 0.065) 40%, rgba(var(--cl-accent-rgb), 0.0325) 60%, transparent 80%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  filter: blur(40px) !important;
}

/* Requirements section glow orbs - moved further off screen */
section.requirements-section.component::before {
  left: -540px !important; /* Halfway off screen on left */
}

section.requirements-section.component::after {
  right: -540px !important; /* Halfway off screen on right */
}

/* Prevent horizontal scrolling from glow orbs */
body {
  overflow-x: hidden !important;
}

/* Style Discord button in media program (text-image-block) to match cart button */
.text-image-block .discord-btn.btn-primary {
  color: white !important;
  background: linear-gradient(to right, #2a2a2a, #1a1a1a) !important;
  border: 1px solid #323232 !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}

.text-image-block .discord-btn.btn-primary:hover {
  background: linear-gradient(to right, #333333, #222222) !important;
  border: 1px solid #4a4a4a !important;
  box-shadow: 0 0 0 1.5px #4a4a4a, 0 0 6px 3px rgba(74, 74, 74, 0.75), 0 0 12px 6px rgba(74, 74, 74, 0.375) !important;
  transform: none !important;
}

.text-image-block .discord-btn.btn-primary svg {
  fill: white !important;
  stroke: white !important;
}

/* Group cards - completely separate from product cards */
.products.row:has(.group-banner-card) {
  justify-content: center !important;
  gap: 0.8rem !important;
  row-gap: 2rem !important;
  margin-top: 2rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

.products .group-banner-card .group-card-img {
  position: relative;
  margin: 0 !important;
  border-radius: var(--bs-border-radius) !important;
  aspect-ratio: 1080 / 1800 !important;
  overflow: hidden !important;
  border: 1px solid var(--cl-accent) !important;
  transform: scale(1.1) !important;
  transform-origin: center !important;
  box-shadow: 
    0 8px 16px -4px rgba(var(--cl-accent-rgb), 0.36),
    -4px 0 12px -6px rgba(var(--cl-accent-rgb), 0.18),
    4px 0 12px -6px rgba(var(--cl-accent-rgb), 0.18) !important;
  transition: box-shadow 0.3s ease !important;
}

/* Remove hover expansion effect for group cards */
.products .group-card:hover {
  transform: translateY(-4px) !important;
}

.products .group-card:hover .group-card-img {
  transform: scale(1.1) !important;
  box-shadow: 
    0 12px 24px -4px rgba(var(--cl-accent-rgb), 0.45),
    -6px 0 16px -6px rgba(var(--cl-accent-rgb), 0.15),
    6px 0 16px -6px rgba(var(--cl-accent-rgb), 0.15) !important;
}

/* Rainbow Six Siege - base image (always visible) */
.products .group-card[data-group-name*="Rainbow"] .group-card-img {
  background-image: url('https://www.dropbox.com/scl/fi/ixl8ypa0uw1zxhsrc6exl/r6siegecover.png?rlkey=h76osjzlt92mlzgxl9hwgs5ah&st=8opxqhwi&dl=1');
  background-size: cover;
  background-position: center;
}

/* Rainbow Six Siege - title image at bottom */
.products .group-card[data-group-name*="Rainbow"] .group-card-img::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-image: url('https://www.dropbox.com/scl/fi/4bm8zkfzchqkjetegx7om/rainbowsixtitle.png?rlkey=g6qqfkmvo4w827yjb627wv6b0&st=ppwf01by&dl=1');
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 3;
  pointer-events: none;
}

/* Rainbow Six Siege - colored image (fades in on hover) */
.products .group-card[data-group-name*="Rainbow"] .group-card-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.dropbox.com/scl/fi/o7j8r3eypnk4h57u9rlbf/r6siegecovercolored.png?rlkey=h8lwysa9nspw8d27ub6yjkb48&st=k7qb0h44&dl=1');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.products .group-card[data-group-name*="Rainbow"]:hover .group-card-img::before {
  opacity: 1;
}

/* Rust - base image (always visible) */
.products .group-card[data-group-name*="Rust"] .group-card-img {
  background-image: url('https://www.dropbox.com/scl/fi/l05a7vexzfthczvdjnc7o/rustcover.png?rlkey=61yo707qehlolrvui2r5inl6p&st=oa27waav&dl=1');
  background-size: cover;
  background-position: center;
}

/* Rust - title image at bottom */
.products .group-card[data-group-name*="Rust"] .group-card-img::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-image: url('https://www.dropbox.com/scl/fi/s0zdr5aia5g1o7fpf9e7x/rusttitle.png?rlkey=dw33faq24wz93gr4n89emj1wj&st=x1td2mj2&dl=1');
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 3;
  pointer-events: none;
}

/* Rust - colored image (fades in on hover) */
.products .group-card[data-group-name*="Rust"] .group-card-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.dropbox.com/scl/fi/ilf7n4lm5dx5goylu4t9q/rustcovercolored.png?rlkey=iivvzsw1c8p9d98m03079j42e&st=ggxxg2tv&dl=1');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.products .group-card[data-group-name*="Rust"]:hover .group-card-img::before {
  opacity: 1;
}

/* Fortnite - base image (always visible) */
.products .group-card[data-group-name*="Fortnite"] .group-card-img {
  background-image: url('https://www.dropbox.com/scl/fi/iz7eflw1gl268e77djj4h/fortnitecover.png?rlkey=9db5nmi1dhex8tonb6qd2mlxa&st=f80ceb6x&dl=1');
  background-size: cover;
  background-position: center;
}

/* Fortnite - title image at bottom */
.products .group-card[data-group-name*="Fortnite"] .group-card-img::after {
  content: '';
  position: absolute;
  bottom: 27px;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-image: url('https://www.dropbox.com/scl/fi/u5lbfd0unaej83l9a057e/fortnitetitle.png?rlkey=4676bc7z1eri9f2m9mnmogayc&st=ia739h9f&dl=1');
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 3;
  pointer-events: none;
}

/* Fortnite - colored image (fades in on hover) */
.products .group-card[data-group-name*="Fortnite"] .group-card-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.dropbox.com/scl/fi/monvb93joovg32hi5zezk/fortnitecovercolored.png?rlkey=u7v99lq4lg6emppbdtdbz54nb&st=l1moj3jo&dl=1');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.products .group-card[data-group-name*="Fortnite"]:hover .group-card-img::before {
  opacity: 1;
}

/* Software - base image (always visible) */
.products .group-card[data-group-name*="Software"] .group-card-img {
  background-image: url('https://www.dropbox.com/scl/fi/rbupi0pjw8m2v34tlq6ap/softwarecover.png?rlkey=2h967g33rhva56s7uz9mp0423&st=p3pv56fe&dl=1');
  background-size: cover;
  background-position: center;
}

/* Software - title image at bottom */
.products .group-card[data-group-name*="Software"] .group-card-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(85px);
  width: 450px;
  height: auto;
  aspect-ratio: 16 / 9;
  background-image: url('https://www.dropbox.com/scl/fi/typqqqrvtcjaqmhuz3g4i/softwaretitle.png?rlkey=luoxv417f5oa2d1w3sq59fnug&st=to0ub2tx&dl=1');
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 3;
  pointer-events: none;
}

/* Software - colored image (fades in on hover) */
.products .group-card[data-group-name*="Software"] .group-card-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.dropbox.com/scl/fi/9lqhx3e57hylag3qr6k8z/softwarecovercolored.png?rlkey=czlzhhmwa5wywx26egcdmnk7g&st=bs6h8z4w&dl=1');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.products .group-card[data-group-name*="Software"]:hover .group-card-img::before {
  opacity: 1;
}

/* Accounts - base image (always visible) */
.products .group-card[data-group-name*="Accounts"] .group-card-img {
  background-image: url('https://www.dropbox.com/scl/fi/et1mj0osc8rtwy6tljupu/accountscover.png?rlkey=tl1f8uygaie226zc6fg2g4m53&st=58j7wep6&dl=1');
  background-size: cover;
  background-position: center;
}

/* Accounts - title image at bottom */
.products .group-card[data-group-name*="Accounts"] .group-card-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(85px);
  width: 450px;
  height: auto;
  aspect-ratio: 16 / 9;
  background-image: url('https://www.dropbox.com/scl/fi/75cy9gu2c2qkm4niwuyic/accountstitle.png?rlkey=h5xseicx21qgnzph8ftx5wfmu&st=vomh03pf&dl=1');
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 3;
  pointer-events: none;
}

/* Accounts - colored image (fades in on hover) */
.products .group-card[data-group-name*="Accounts"] .group-card-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.dropbox.com/scl/fi/gc6pew7yxrmqecpr8qhj3/accountscovercolored.png?rlkey=ueyi0qy8rscn3a0da7xl65dm1&st=jh6n0phy&dl=1');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.products .group-card[data-group-name*="Accounts"]:hover .group-card-img::before {
  opacity: 1;
}

/* Valorant - base image (always visible) */
.products .group-card[data-group-name*="Valorant"] .group-card-img {
  background-image: url('https://www.dropbox.com/scl/fi/atm9j8dbw4a4jtuoq3spu/valorantcover.png?rlkey=4zw7c4avf8fqiwxr85dvhemau&st=dilpuze2&dl=1');
  background-size: cover;
  background-position: center;
}

/* Valorant - title image at bottom */
.products .group-card[data-group-name*="Valorant"] .group-card-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-image: url('https://www.dropbox.com/scl/fi/7ph3kl8my5ox19eoubt06/valoranttitle.png?rlkey=ft70s465b7o0yqz2fzsjn8pq9&st=15x5kef0&dl=1');
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 3;
  pointer-events: none;
}

/* Valorant - colored image (fades in on hover) */
.products .group-card[data-group-name*="Valorant"] .group-card-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.dropbox.com/scl/fi/kqiuul54arju0ihr8akt1/valorantcovercolored.png?rlkey=o5q481ug18e04dz8sbut4ohfz&st=484kb4a8&dl=1');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.products .group-card[data-group-name*="Valorant"]:hover .group-card-img::before {
  opacity: 1;
}

/* Fix group modal closing animation */
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out !important;
}

.modal.fade:not(.show) .modal-dialog {
  transform: translate(0, -50px) !important;
}

/* Fix product modal closing animation - disable product card hover animations inside modals */
.modal .products .card:hover .card-img-top,
.modal .products .card:hover .card-img-top img {
  transform: none !important;
  transition: none !important;
}

/* Products Page Header Styling - Similar to Status Page */
.products-page-header section.py-5-nav {
  position: relative !important;
}

/* Glow above badge removed */

.products-page-header .section-title {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

.products-page-header .section-title h1 {
  text-align: center !important;
  width: 100% !important;
  font-weight: bold !important;
  color: white !important;
  font-size: 2.5rem !important;
}

.products-page-header .section-subtitle {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
}

.products-page-header .section-subtitle p {
  text-align: center !important;
  margin: 0 auto !important;
  color: #6c757d !important;
  font-size: 1.1rem !important;
}

/* Products Page Container - Background Box like Status Groups */
.products-page-container {
  background: #0D0E11 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--bs-border-radius) !important;
  padding: 2rem !important;
  margin-top: 2rem !important;
}

/* Add background box to products-list component */
#products-list.products-section {
  background: #0D0E11 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--bs-border-radius) !important;
  padding: 2rem !important;
  padding-top: 2rem !important;
  margin-bottom: 6rem !important;
}

/* Add top margin to products row inside products-list */
#products-list .products {
  margin-top: 2rem !important;
}

/* Reduce margin when breadcrumb is visible (in subgroup view) */
#breadcrumb-container:not([style*="display: none"]) ~ .row.products,
#breadcrumb-container[style*="display: block"] ~ .row.products {
  margin-top: 0.25rem !important;
}

/* Products filter buttons */
.products-filter-buttons {
  display: flex !important;
  gap: 0.75rem !important;
  margin-bottom: 0.5rem !important;
  flex-wrap: wrap !important;
  position: relative !important;
  padding-bottom: 2rem !important;
}

/* Separator line between buttons and products */
.products-filter-buttons::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0rem !important;
  right: 0rem !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.products-filter-buttons .filter-btn {
  background: linear-gradient(to right, #1a1a1a, #0a0a0a) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--bs-border-radius) !important;
  padding: 0.75rem 1.5rem !important;
  color: white !important;
  font-size: 0.9375rem !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.products-filter-buttons .filter-btn:hover {
  background: linear-gradient(to right, #1f1f1f, #0f0f0f) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

.products-filter-buttons .filter-btn.active {
  background: #14072f !important;
  border: 1px solid #270468 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(39, 4, 104, 0.4), 
              4px 0 12px rgba(39, 4, 104, 0.15), 
              -4px 0 12px rgba(39, 4, 104, 0.15) !important;
}

/* Product item wrapper for filtering - uses standard Bootstrap column classes */
.product-item {
  transition: opacity 0.4s ease !important;
}

.product-item.fade-out {
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
}

/* Add same border as separator line to product cards on products page */
#products-list .product-item .card:not(.group-banner-card) {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Product name underline - extends on hover */
.products .card:hover .product-name-underline {
  width: 80px !important;
}

/* Bottom left glow orb on product cards only (not group cards) */
.products .card:not(.group-card) {
  position: relative !important;
  overflow: hidden !important;
}

.products .card:not(.group-card)::before {
  content: '' !important;
  position: absolute !important;
  bottom: -100px !important;
  left: -100px !important;
  width: 250px !important;
  height: 250px !important;
  background: radial-gradient(circle, rgba(var(--cl-accent-rgb), 0.143) 0%, rgba(var(--cl-accent-rgb), 0.10725) 20%, rgba(var(--cl-accent-rgb), 0.0715) 40%, rgba(var(--cl-accent-rgb), 0.03575) 60%, transparent 80%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(40px) !important;
}

/* Add spacing between products page and footer */
.products-page-section {
  margin-bottom: 3rem !important;
}

/* Products Page - 3 products per row layout */
.products-page-section .products > .col,
.products-page-section .products > [class*="col-"],
#products-list .products > .col,
#products-list .products > [class*="col-"] {
  flex: 0 0 auto !important;
  width: 33.333333% !important;
  max-width: 33.333333% !important;
}

/* Responsive: 2 per row on tablets */
@media (max-width: 991px) {
  .products-page-section .products > .col,
  .products-page-section .products > [class*="col-"],
  #products-list .products > .col,
  #products-list .products > [class*="col-"],
  .product-item {
    width: 50% !important;
    max-width: 50% !important;
  }
}

/* Responsive: 1 per row on mobile */
@media (max-width: 575px) {
  .products-page-section .products > .col,
  .products-page-section .products > [class*="col-"],
  #products-list .products > .col,
  #products-list .products > [class*="col-"],
  .product-item {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  
  /* Ensure products page container is visible on mobile */
  .products-page-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure products row is visible on mobile */
  .products-page-section .products {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  
  /* Ensure product cards are visible */
  .products .card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* CRITICAL: Disable scroll-fade animation on mobile - force all products visible */
  [data-scroll-fade]:not(.scroll-indicator):not(.group-banner-card-wrapper) {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important;
  }
  
  /* Force product items visible regardless of fade state */
  .product-item[data-scroll-fade],
  .product-item.fade-out[data-scroll-fade] {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  
  /* CRITICAL: Ensure hidden products don't take up space on mobile */
  .product-item[style*="display: none"],
  .product-item[style*="display:none"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* Force mobile dropdown to stay hidden on desktop - override Bootstrap navbar-expand-lg */
@media (min-width: 992px) {
  .navbar.navbar-expand-lg .navbar-collapse.d-lg-none {
    display: none !important;
  }
}

/* Mobile navbar - hamburger menu styling */
@media (max-width: 991px) {
  /* Hide secondary navbar on mobile */
  .navbar-secondary {
    display: none !important;
  }
  
  /* Hide the mobile cart button that appears before hamburger */
  .navbar .d-flex.gap-2 .cart.d-md-none {
    display: none !important;
  }
  
  /* Style the hamburger button */
  .navbar .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(to right, #2a2a2a, #1a1a1a) !important;
    padding: 0.5rem !important;
    border-radius: 0.375rem !important;
  }
  
  .navbar .navbar-toggler svg {
    fill: white !important;
    width: 20px !important;
    height: 20px !important;
  }
  
  .navbar .navbar-toggler:focus {
    box-shadow: none !important;
  }
  
  /* Hide navbar status badge on mobile */
  .navbar-status-badge {
    display: none !important;
  }
  
  /* Adjust brand size on mobile */
  .navbar .navbar-brand {
    font-size: 1rem !important;
  }
  
  .navbar .navbar-brand img {
    max-height: 2.5rem !important;
  }
  
  /* Style the dropdown menu */
  .navbar .navbar-collapse {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bs-body-bg) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 0.5rem !important;
    padding: 1rem !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Stack navbar items vertically in dropdown */
  .navbar .navbar-collapse .navbar-nav {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }
  
  .navbar .navbar-collapse .navbar-nav .nav-item {
    width: 100% !important;
  }
  
  /* Make all buttons full width in mobile dropdown */
  .navbar .navbar-collapse .btn,
  .navbar .navbar-collapse .nav-link {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }
  
  /* Currency selector full width on mobile */
  .navbar .navbar-collapse .currency-selector {
    width: 100% !important;
  }
  
  .navbar .navbar-collapse .currency-selector .choices__inner {
    width: 100% !important;
  }
  
  /* Cart button styling in dropdown */
  .navbar .navbar-collapse .cart {
    width: 100% !important;
  }
  
  .navbar .navbar-collapse .cart .btn {
    justify-content: center !important;
  }
  
  /* User button styling in dropdown */
  .navbar .navbar-collapse .user {
    width: 100% !important;
  }
  
  .navbar .navbar-collapse .user .btn {
    justify-content: center !important;
  }
}

/* Add 15px more vertical spacing between home page components */
/* Hero to Products/Groups */
.hero.component {
  margin-bottom: 15px !important;
}

/* Live Preview to Media Program */
.experience-preview.component {
  margin-bottom: 15px !important;
}

/* Media Program to FAQ */
.media-tiles-section.component {
  margin-bottom: 15px !important;
}

/* Hide scrollbar but keep scroll functionality */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Product image background box - same styling as status page */
.product-image-box {
  background: #0D0E11 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 1rem !important;
  padding: 1.85rem 1.5rem 1.85rem 1.85rem !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Top right glow orb on product image box */
.product-image-box::before {
  content: '' !important;
  position: absolute !important;
  top: -160px !important;
  right: -160px !important;
  width: 350px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(var(--cl-accent-rgb), 0.143) 0%, rgba(var(--cl-accent-rgb), 0.10725) 15%, rgba(var(--cl-accent-rgb), 0.0715) 30%, rgba(var(--cl-accent-rgb), 0.03575) 50%, rgba(var(--cl-accent-rgb), 0.01) 70%, transparent 100%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(40px) !important;
}

/* Ensure carousel inner and items maintain rounded corners */
.product-image-box .carousel-inner {
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  position: relative !important;
  background: #0D0E11 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.product-image-box .carousel-item {
  border-radius: 0.75rem !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.6s ease-in-out !important;
}

.product-image-box .carousel-item.active,
.product-image-box .carousel-item.carousel-item-next,
.product-image-box .carousel-item.carousel-item-prev {
  display: flex !important;
}

.product-image-box .carousel-item.active {
  transform: translateX(0) !important;
  z-index: 1 !important;
}

.product-image-box .carousel-item.carousel-item-next {
  transform: translateX(100%) !important;
  z-index: 2 !important;
}

.product-image-box .carousel-item.carousel-item-prev {
  transform: translateX(-100%) !important;
  z-index: 2 !important;
}

.product-image-box .carousel-item.carousel-item-next.carousel-item-start {
  transform: translateX(0) !important;
}

.product-image-box .carousel-item.carousel-item-prev.carousel-item-end {
  transform: translateX(0) !important;
}

.product-image-box .carousel-item.active.carousel-item-start {
  transform: translateX(-100%) !important;
}

.product-image-box .carousel-item.active.carousel-item-end {
  transform: translateX(100%) !important;
}

.product-image-box .carousel-item img {
  border-radius: 0.75rem !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Flex container for image and sidebar */
.product-image-box-content {
  display: flex !important;
  gap: 2.5rem !important;
  align-items: flex-start !important;
}

/* Left side with images */
.product-image-box-left {
  flex: 0 0 45% !important;
  max-width: 45% !important;
}

/* Increase spacing between carousel and thumbnails */
.product-image-box .thumbnails {
  margin-top: 1.25rem !important;
}

/* Lock thumbnail buttons to 16/9 aspect ratio */
.product-image-box .thumbnails button {
  aspect-ratio: 16 / 9 !important;
  background: #0D0E11 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.5rem !important;
}

/* Thumbnail images fit within aspect ratio container */
.product-image-box .thumbnails button img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Product info sidebar inside image box */
.product-info-sidebar {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

.product-info-sidebar .product-title {
  font-size: 2rem !important;
  font-weight: bold !important;
  margin: 0 !important;
  color: white !important;
  line-height: 1.2 !important;
}

/* Product badges inline container */
.product-badges-inline {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

/* Product description title - small bold title below badges */
.product-description-title {
  font-size: 0.9375rem !important;
  font-weight: bold !important;
  color: white !important;
  margin: 0 !important;
}

/* Product short description - text below Description title */
.product-short-description {
font-size: 1rem !important;
color: #9ca3af !important;
margin: 0 !important;
margin-top: -6px !important;
text-align: left !important;
line-height: 1.5 !important;
}

/* Product Discord button - Discord blue-teal color, no outline, no hover effects */
.product-discord-button {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.5rem 1rem !important;
background: #5865F2 !important;
border: none !important;
border-radius: 0.5rem !important;
color: white !important;
font-size: 0.9375rem !important;
font-weight: 600 !important;
text-decoration: none !important;
margin-top: 0.5rem !important;
width: fit-content !important;
cursor: pointer !important;
}

.product-discord-button:hover {
background: #5865F2 !important;
color: white !important;
text-decoration: none !important;
}

.product-discord-button svg {
flex-shrink: 0 !important;
transform: translateY(2px) !important;
}

/* Instant Delivery badge - dark green with lighter green outline - pill shape */
.badge-instant-delivery {
display: inline-flex !important;
align-items: center !important;
gap: 0.4rem !important;
padding: 0.5rem 0.875rem !important;
background: #061c0f !important;
border: 1px solid #1a6b3a !important;
border-radius: 50px !important;
color: #2ea75c !important;
font-size: 0.8125rem !important;
font-weight: 600 !important;
width: fit-content !important;
white-space: nowrap !important;
line-height: 1 !important;
  padding: 0.5rem 0.875rem !important;
  background: #061c0f !important;
  border: 1px solid #1a6b3a !important;
  border-radius: 50px !important;
  color: #2ea75c !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  width: fit-content !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.badge-instant-delivery span {
  transform: translateY(-1px) !important;
  display: inline-block !important;
}

/* Status badge - website background color with box outline - pill shape */
.badge-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.5rem 0.875rem !important;
  background: var(--bs-body-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 50px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  width: fit-content !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.badge-status span {
  color: #9ca3af !important;
  transform: translateY(-1px) !important;
  display: inline-block !important;
}

/* Group badge - matching active variant tab styling - pill shape */
.badge-group {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.5rem 0.875rem !important;
  background: #0f071f !important;
  border: 1px solid var(--cl-accent) !important;
  border-radius: 50px !important;
  color: var(--cl-accent) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  width: fit-content !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.badge-group span {
  transform: translateY(-1px) !important;
  display: inline-block !important;
}

/* Badge dots with pulsing animation */
.badge-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  position: relative !important;
  flex-shrink: 0 !important;
  animation: badge-fade 2s ease-in-out infinite !important;
}

.badge-dot-green {
  background: #2ea75c !important;
}

@keyframes badge-fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Responsive: stack sidebar below images on smaller screens */
@media (max-width: 991px) {
  .product-image-box-content {
    flex-direction: column !important;
  }
  
  .product-info-sidebar {
    width: 100% !important;
  }
}

/* Spoofer promo box - same styling as product image box */
.spoofer-promo-box {
  background: #0D0E11 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 1rem !important;
  padding: 1.5rem 1.5rem 1.5rem 1.75rem !important;
  margin-top: -1.2rem !important;
  margin-bottom: 1.85rem !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Top right glow orb on spoofer promo box */
.spoofer-promo-box::before {
  content: '' !important;
  position: absolute !important;
  top: -160px !important;
  right: -160px !important;
  width: 350px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(var(--cl-accent-rgb), 0.143) 0%, rgba(var(--cl-accent-rgb), 0.10725) 15%, rgba(var(--cl-accent-rgb), 0.0715) 30%, rgba(var(--cl-accent-rgb), 0.03575) 50%, rgba(var(--cl-accent-rgb), 0.01) 70%, transparent 100%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(40px) !important;
}

.spoofer-promo-content {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1.5rem !important;
  position: relative !important;
}

/* Get Spoofer CTA button */
.spoofer-cta-button {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1.25rem !important;
  background: var(--cl-accent) !important;
  border: 1px solid var(--cl-accent) !important;
  border-radius: 0.5rem !important;
  color: white !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
  z-index: 2 !important;
  box-shadow: 0 0 0 1px var(--cl-accent), 0 0 8px 2px rgba(var(--cl-accent-rgb), 0.25), 0 0 16px 4px rgba(var(--cl-accent-rgb), 0.15) !important;
}

.spoofer-cta-button:hover {
  background: var(--cl-accent) !important;
  border: 1px solid var(--cl-accent) !important;
  color: white !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 6px 3px rgba(var(--cl-accent-rgb), 0.6), 0 0 12px 6px rgba(var(--cl-accent-rgb), 0.3) !important;
  transform: translateY(-50%) !important;
}

.spoofer-cta-button svg {
  flex-shrink: 0 !important;
}

.spoofer-icon-box {
  flex-shrink: 0 !important;
  width: 55px !important;
  height: 55px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  margin-top: 5px !important;
  position: relative !important;
}

/* Centered glow orb on ban icon */
.spoofer-icon-box::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 120px !important;
  height: 120px !important;
  background: radial-gradient(circle, rgba(var(--cl-accent-rgb), 0.25) 0%, rgba(var(--cl-accent-rgb), 0.18) 15%, rgba(var(--cl-accent-rgb), 0.12) 30%, rgba(var(--cl-accent-rgb), 0.08) 50%, rgba(var(--cl-accent-rgb), 0.04) 70%, transparent 100%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(20px) !important;
}

.spoofer-icon-box svg {
  position: relative !important;
  z-index: 1 !important;
}

.spoofer-text-content {
  flex: 1 !important;
}

.spoofer-promo-title {
  font-size: 1.5rem !important;
  font-weight: bold !important;
  color: white !important;
  margin: 0 0 0.5rem 0 !important;
  line-height: 1.3 !important;
}

.spoofer-promo-title .group-name-placeholder {
  color: var(--cl-accent) !important;
}

.spoofer-promo-subtitle {
  font-size: 1.125rem !important;
  color: #9ca3af !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Product description box - background box around tab content only */
.product-description-box {
  background: #0D0E11 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 1rem !important;
  padding: 1.5rem !important;
  margin-bottom: 1.25rem !important;
  width: 113% !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Top right glow orb on description box */
.product-description-box::before {
  content: '' !important;
  position: absolute !important;
  top: -160px !important;
  right: -160px !important;
  width: 350px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(var(--cl-accent-rgb), 0.143) 0%, rgba(var(--cl-accent-rgb), 0.10725) 15%, rgba(var(--cl-accent-rgb), 0.0715) 30%, rgba(var(--cl-accent-rgb), 0.03575) 50%, rgba(var(--cl-accent-rgb), 0.01) 70%, transparent 100%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(40px) !important;
}

/* Product pricing box - background box around pricing and purchase form */
.product-pricing-box {
  background: #0D0E11 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 1rem !important;
  padding: 1.5rem 0.75rem !important;
  margin-left: 10% !important;
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Top right glow orb on pricing box */
.product-pricing-box::before {
  content: '' !important;
  position: absolute !important;
  top: -160px !important;
  right: -160px !important;
  width: 350px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(var(--cl-accent-rgb), 0.143) 0%, rgba(var(--cl-accent-rgb), 0.10725) 15%, rgba(var(--cl-accent-rgb), 0.0715) 30%, rgba(var(--cl-accent-rgb), 0.03575) 50%, rgba(var(--cl-accent-rgb), 0.01) 70%, transparent 100%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(40px) !important;
}

.product-pricing-box form {
  max-width: 95% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Durations label styling */
.product-pricing-box .form-label {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.75rem !important;
  width: 100% !important;
  text-align: left !important;
}

/* Center align all form rows in pricing box */
.product-pricing-box .row {
  width: 100% !important;
}

/* Variant tabs - solid background */
.product-pricing-box .variant.btn-primary {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid #323232 !important;
  color: white !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

/* Hover state - slightly brighter border */
.product-pricing-box .variant.btn-primary:hover:not(:disabled):not(.active) {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Active/click state - show the active styling */
.product-pricing-box .variant.btn-primary:active:not(:disabled) {
  background: #0f071f !important;
  border: 1px solid var(--cl-accent) !important;
  transform: scale(0.98) !important;
}

/* Active variant tab - slightly darker purple background */
.product-pricing-box .variant.btn-primary.active {
  background: #0f071f !important;
  border: 1px solid var(--cl-accent) !important;
  color: white !important;
}

/* Active variant tab on hover - keep accent border */
.product-pricing-box .variant.btn-primary.active:hover {
  background: #0f071f !important;
  border: 1px solid var(--cl-accent) !important;
  color: white !important;
}

/* Visual checkmark indicator in top right corner of active variant */
.product-pricing-box .variant.btn-primary.active::after {
  content: '✓' !important;
  position: absolute !important;
  top: -12px !important;
  right: -4px !important;
  width: 24px !important;
  height: 24px !important;
  background: var(--bs-gray-bg) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--cl-accent) !important;
  font-size: 14px !important;
  font-weight: bold !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Disabled/out-of-stock variant styling */
.product-pricing-box .variant.btn-primary:disabled,
.product-pricing-box .variant.btn-primary.out-of-stock {
  background: rgba(255, 255, 255, 0.02) !important;
  background-color: rgba(255, 255, 255, 0.02) !important;
  background-image: none !important;
  opacity: 0.4 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  filter: grayscale(50%) !important;
}

/* Extra aggressive override for best-seller variants */
.product-pricing-box .variant.btn-primary.best-seller-variant {
  background: rgba(255, 255, 255, 0.02) !important;
  background-color: rgba(255, 255, 255, 0.02) !important;
  background-image: none !important;
  background-attachment: unset !important;
  background-clip: unset !important;
  background-origin: unset !important;
  background-position: unset !important;
  background-position-x: unset !important;
  background-position-y: unset !important;
  background-repeat: unset !important;
  background-size: unset !important;
}

.product-pricing-box .variant.btn-primary.best-seller-variant:disabled {
  background: rgba(255, 255, 255, 0.02) !important;
  background-color: rgba(255, 255, 255, 0.02) !important;
  background-image: none !important;
  background-attachment: unset !important;
  background-clip: unset !important;
  background-origin: unset !important;
  background-position: unset !important;
  background-position-x: unset !important;
  background-position-y: unset !important;
  background-repeat: unset !important;
  background-size: unset !important;
}

/* Non-active variant tabs - background box outline color */
.product-pricing-box .variant.btn-primary:not(.active) {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: white !important;
}

/* Variant name and description inline styling */
.product-pricing-box .variant.btn-primary .name {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Variant bullet separator - subtitle color */
.product-pricing-box .variant.btn-primary .variant-bullet {
  color: #9ca3af !important;
}

/* Variant description as theme colored pill-shaped badge */
.product-pricing-box .variant.btn-primary .description {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.25rem 0.625rem !important;
  background: #1a0a2e !important;
  border: 1px solid var(--cl-accent) !important;
  border-radius: 50px !important;
  color: var(--cl-accent) !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
}

/* Stock paragraph spacing */
.product-pricing-box .variant.btn-primary .stock {
  margin-top: 0.25rem !important;
}

/* In stock text styling - green color matching instant delivery */
.product-pricing-box .variant.btn-primary .stock-in-stock {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  color: #2ea75c !important;
}

/* In stock pulsing dot - green matching instant delivery */
.product-pricing-box .variant.btn-primary .stock-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #2ea75c !important;
  flex-shrink: 0 !important;
  animation: badge-fade 2s ease-in-out infinite !important;
  transform: translateY(1px) !important;
}

/* Variant price container - Arial font for all prices */
.product-pricing-box .variant.btn-primary .price {
  font-family: Arial, sans-serif !important;
}

/* Variant main static price - white to match variant name */
.product-pricing-box .variant.btn-primary .price > div > span:first-child {
  color: white !important;
}

/* Variant slashed price - Arial (inherits from parent) */
.product-pricing-box .variant.btn-primary .price s {
  font-family: Arial, sans-serif !important;
}

/* Variant /day text - Arial (inherits from parent) */
.product-pricing-box .variant.btn-primary .price small {
  font-family: Arial, sans-serif !important;
}

/* Add to Cart button (btn-primary) - make it transparent */
.product-pricing-box .btn-primary:not(.variant) {
  background: transparent !important;
  border: 1px solid var(--cl-accent) !important;
  color: var(--cl-accent) !important;
  transition: all 0.3s ease !important;
}

.product-pricing-box .btn-primary:hover {
  background: rgba(var(--cl-accent-rgb), 0.1) !important;
  border-color: var(--cl-accent) !important;
  color: var(--cl-accent) !important;
}

/* Buy Now button (btn-outline-primary) - make it solid with hover effect */
.product-pricing-box .btn-outline-primary {
  background: var(--cl-accent) !important;
  border: 1px solid var(--cl-accent) !important;
  color: white !important;
  transition: all 0.3s ease !important;
}

.product-pricing-box .btn-outline-primary:hover {
  background: var(--cl-accent) !important;
  border: 1px solid var(--cl-accent) !important;
  color: white !important;
  box-shadow: 0 0 0 1.5px var(--cl-accent), 0 0 4px 2px rgba(var(--cl-accent-rgb), 0.55), 0 0 8px 4px rgba(var(--cl-accent-rgb), 0.3) !important;
  transform: none !important;
}

/* Description content text styling */
.product-description-box .content,
.product-description-box .editor {
  font-size: 0 !important;
  line-height: 0 !important;
  white-space: pre-line !important;
  display: block !important;
  margin-top: -0.9rem !important;
  margin-bottom: -0.15rem !important;
}

/* Allow emojis and symbols to display in their native colors */
.product-description-box .content,
.product-description-box .editor,
.product-description-box .content *,
.product-description-box .editor * {
  -webkit-text-fill-color: unset !important;
  text-fill-color: unset !important;
}

.product-description-box .content > *,
.product-description-box .editor > * {
  font-size: 1.125rem !important;
  line-height: 1.4 !important;
}

.product-description-box .content p,
.product-description-box .editor p {
  margin: 0 0 1rem 0 !important;
}

.product-description-box .content p:last-child,
.product-description-box .editor p:last-child {
  margin-bottom: 0 !important;
}

.product-description-box .content ul,
.product-description-box .editor ul,
.product-description-box .content ol,
.product-description-box .editor ol {
  margin: 0 0 1rem 0 !important;
  padding-left: 1.5rem !important;
}

.product-description-box .content ul:last-child,
.product-description-box .editor ul:last-child,
.product-description-box .content ol:last-child,
.product-description-box .editor ol:last-child {
  margin-bottom: 0 !important;
}

/* Product tab buttons - override all Bootstrap styles */
.product-tabs .btn.product-tab-btn {
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}

/* Active tab - accent color background */
.product-tabs .btn.product-tab-btn.btn-primary {
  background: var(--cl-accent) !important;
  background-color: var(--cl-accent) !important;
  border: 1px solid var(--cl-accent) !important;
  border-color: var(--cl-accent) !important;
  color: white !important;
  --bs-btn-bg: var(--cl-accent) !important;
  --bs-btn-border-color: var(--cl-accent) !important;
  --bs-btn-hover-bg: var(--cl-accent) !important;
  --bs-btn-hover-border-color: var(--cl-accent) !important;
}

.product-tabs .btn.product-tab-btn.btn-primary:hover {
  background: color-mix(in srgb, var(--cl-accent) 85%, white) !important;
  background-color: color-mix(in srgb, var(--cl-accent) 85%, white) !important;
  border-color: color-mix(in srgb, var(--cl-accent) 85%, white) !important;
}

/* Inactive tab - outline style */
.product-tabs .btn.product-tab-btn.btn-outline-primary {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--cl-accent) !important;
  border-color: var(--cl-accent) !important;
  color: var(--cl-accent) !important;
  --bs-btn-bg: transparent !important;
  --bs-btn-border-color: var(--cl-accent) !important;
  --bs-btn-color: var(--cl-accent) !important;
}

.product-tabs .btn.product-tab-btn.btn-outline-primary:hover {
  background: rgba(var(--cl-accent-rgb), 0.05) !important;
  background-color: rgba(var(--cl-accent-rgb), 0.05) !important;
  border-color: color-mix(in srgb, var(--cl-accent) 85%, white) !important;
  color: var(--cl-accent) !important;
}

/* Hide Commonly Bought Together section */
.section-title h2:contains("Commonly Bought Together"),
.section-title:has(h2:contains("Commonly Bought Together")) {
  display: none !important;
}

/* Hide entire upsells row */
.row.gx-4.gx-lg-5.mt-5:has(.section-title h2) {
  display: none !important;
}

/* Page fade transition - use wrapper to avoid affecting favicon */
body > .flex-wrapper {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

body.page-loaded > .flex-wrapper {
  opacity: 1;
}

body.page-transitioning > .flex-wrapper {
  opacity: 0;
}

/* Status page - Product Status header bold */
.status-page .section-title h1 {
  font-weight: bold !important;
}

/* Media page - reduce top padding to match reviews page */
.media-page .py-5-nav {
  padding-top: 2rem !important;
}

/* Media page - remove extra gap */
.media-page + div[style*="height: 5rem"] {
  display: none !important;
}

/* Home page titles - use Arial font like v1.42 Pro Theme */
.hero .content h1 {
  font-family: Arial, sans-serif !important;
}

.hero .content h5,
.card-title {
  font-family: 'Actor', sans-serif !important;
}

/* All component section titles - Arial font and bold like v1.42 */
.component .section-title h1,
.component .section-title h2 {
  font-family: Arial, sans-serif !important;
  font-weight: bold !important;
}

/* Group card title image adjustments */
/* Default size for all group title images */
.group-banner-card .group-title-image {
  max-height: 48px;
}

/* Software - sized to 26px and centered */
.group-banner-card[data-group-name*="Software"] .group-title-image {
  max-height: 26px !important;
}

.group-banner-card[data-group-name*="Software"] .group-title-image-wrapper {
  bottom: 31px !important;
}

/* Fortnite - shrink by 17% total and move up 3px */
.group-banner-card[data-group-name*="Fortnite"] .group-title-image {
  max-height: 40px !important;
}

.group-banner-card[data-group-name*="Fortnite"] .group-title-image-wrapper {
  bottom: 23px !important;
}

/* Rust - shrink by 17% total and move up 3px */
.group-banner-card[data-group-name*="Rust"] .group-title-image {
  max-height: 40px !important;
}

.group-banner-card[data-group-name*="Rust"] .group-title-image-wrapper {
  bottom: 23px !important;
}

/* CRITICAL: Group banner card overrides - MUST be at end of file to override Bootstrap */
.card.group-banner-card,
a.card.group-banner-card {
  border: 1px solid #2c178ead !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;
}

/* Override scroll-fade transition for group banner cards to include box-shadow */
[data-scroll-fade].card.group-banner-card,
[data-scroll-fade] a.card.group-banner-card {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.card.group-banner-card:hover,
a.card.group-banner-card:hover {
  box-shadow: 0 8px 20px rgba(44, 23, 142, 0.4), 0 0 30px rgba(44, 23, 142, 0.2) !important;
  border-color: rgba(44, 23, 142, 0.8) !important;
}