/* ==========================================================================
   MAX THEMES - PREMIUM STYLESHEET (SOVEREIGN ELITE 2026 SPEC)
   ========================================================================== */

:root {
  /* Colors */
  --mxt-color-primary: #6366f1;
  --mxt-color-primary-rgb: 99, 102, 241;
  --mxt-color-primary-hover: #4f46e5;
  --mxt-color-secondary: #06b6d4;
  --mxt-color-secondary-rgb: 6, 182, 212;
  --mxt-color-dark: #090d16;
  --mxt-color-dark-rgb: 9, 13, 22;
  --mxt-color-dark-accent: #0f172a;
  --mxt-color-dark-accent-rgb: 15, 23, 42;
  --mxt-color-light: #f8fafc;
  --mxt-color-light-rgb: 248, 250, 252;
  --mxt-color-light-accent: #f1f5f9;
  --mxt-color-light-accent-rgb: 241, 245, 249;
  --mxt-color-white: #ffffff;
  --mxt-color-white-rgb: 255, 255, 255;
  --mxt-color-success: #10b981;
  --mxt-color-success-rgb: 16, 185, 129;
  --mxt-color-warning: #f59e0b;
  --mxt-color-warning-rgb: 245, 158, 11;
  --mxt-color-error: #ef4444;
  --mxt-color-error-rgb: 239, 68, 68;

  /* Gradients */
  --mxt-gradient-primary: linear-gradient(135deg, var(--mxt-color-primary) 0%, #8b5cf6 100%);
  --mxt-gradient-dark: linear-gradient(135deg, #090d16 0%, #1e1b4b 100%);
  --mxt-gradient-glow: radial-gradient(circle, rgba(var(--mxt-color-primary-rgb), 0.15) 0%, rgba(var(--mxt-color-white-rgb), 0) 70%);

  /* Typography */
  --mxt-font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  /* Fluid Font Sizes (using clamp) */
  --mxt-font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --mxt-font-size-sm: clamp(0.875rem, 0.82rem + 0.27vw, 1rem);
  --mxt-font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --mxt-font-size-lg: clamp(1.125rem, 1.05rem + 0.38vw, 1.25rem);
  --mxt-font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --mxt-font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --mxt-font-size-3xl: clamp(1.875rem, 1.65rem + 1.13vw, 2.25rem);
  --mxt-font-size-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
  --mxt-font-size-5xl: clamp(3rem, 2.5rem + 2.5vw, 4.5rem);

  /* Fluid Margins / Paddings */
  --mxt-spacing-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --mxt-spacing-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
  --mxt-spacing-md: clamp(1rem, 0.85rem + 1vw, 1.5rem);
  --mxt-spacing-lg: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
  --mxt-spacing-xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --mxt-spacing-2xl: clamp(4rem, 3.25rem + 3.75vw, 6rem);

  /* Shadows */
  --mxt-shadow-sm: 0 1px 2px rgba(var(--mxt-color-dark-rgb), 0.05);
  --mxt-shadow-md: 0 4px 6px -1px rgba(var(--mxt-color-dark-rgb), 0.05), 0 2px 4px -1px rgba(var(--mxt-color-dark-rgb), 0.03);
  --mxt-shadow-lg: 0 10px 15px -3px rgba(var(--mxt-color-dark-rgb), 0.08), 0 4px 6px -2px rgba(var(--mxt-color-dark-rgb), 0.04);
  --mxt-shadow-xl: 0 20px 25px -5px rgba(var(--mxt-color-dark-rgb), 0.1), 0 10px 10px -5px rgba(var(--mxt-color-dark-rgb), 0.04);
  --mxt-shadow-glow: 0 0 40px rgba(var(--mxt-color-primary-rgb), 0.15);

  /* Transitions */
  --mxt-transition-fast: 0.2s ease;
  --mxt-transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --mxt-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Borders & Radius */
  --mxt-radius-sm: 6px;
  --mxt-radius-md: 12px;
  --mxt-radius-lg: 24px;
  --mxt-radius-xl: 32px;
  --mxt-radius-full: 9999px;
  --mxt-border-color: rgba(var(--mxt-color-dark-rgb), 0.08);
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
}

ul, ol {
  list-style: none;
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
}

body {
  font-family: var(--mxt-font-sans);
  font-size: var(--mxt-font-size-base);
  line-height: 1.6;
  color: var(--mxt-color-dark-accent);
  background-color: var(--mxt-color-light);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  transition: color var(--mxt-transition-fast);
}

img, picture, svg {
  max-width: 100%;
  display: block;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding-block: 0;
  padding-inline: 0;
}

button {
  cursor: pointer;
}

/* WP Resets for forward compatibility */
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}
.bypostauthor {}
.alignwide {
  max-width: 1200px;
  margin-inline: auto;
}

/* Container */
.mxt-container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--mxt-spacing-md);
}

/* ==========================================================================
   TYPOGRAPHY & UTILITIES
   ========================================================================== */

.mxt-title-gradient {
  background: var(--mxt-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mxt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(var(--mxt-color-primary-rgb), 0.08);
  color: var(--mxt-color-primary);
  font-size: var(--mxt-font-size-xs);
  font-weight: 600;
  padding-block: 6px;
  padding-inline: 14px;
  border-radius: var(--mxt-radius-full);
  margin-block-end: var(--mxt-spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Buttons */
.mxt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mxt-spacing-xs);
  padding-block: clamp(10px, 1.5vw, 14px);
  padding-inline: clamp(20px, 2.5vw, 32px);
  border-radius: var(--mxt-radius-md);
  font-weight: 600;
  font-size: var(--mxt-font-size-sm);
  transition: all var(--mxt-transition-fast);
}

.mxt-btn--primary {
  background: var(--mxt-gradient-primary);
  color: var(--mxt-color-white);
  box-shadow: 0 4px 14px rgba(var(--mxt-color-primary-rgb), 0.3);
}

.mxt-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--mxt-color-primary-rgb), 0.4);
}

.mxt-btn--secondary {
  background-color: var(--mxt-color-white);
  color: var(--mxt-color-dark);
  border: 1px solid var(--mxt-border-color);
  box-shadow: var(--mxt-shadow-sm);
}

.mxt-btn--secondary:hover {
  background-color: var(--mxt-color-light);
  transform: translateY(-2px);
}

/* ==========================================================================
   HEADER SECTION
   ========================================================================== */

.mxt-header {
  background-color: rgba(var(--mxt-color-white-rgb), 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--mxt-border-color);
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  z-index: 1000;
}

.mxt-header__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: clamp(64px, 8vh, 80px);
}

.mxt-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--mxt-font-size-xl);
  font-weight: 800;
  color: var(--mxt-color-dark);
}

.mxt-logo__icon {
  background: var(--mxt-gradient-primary);
  color: var(--mxt-color-white);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mxt-radius-md);
  font-weight: 900;
}

.mxt-nav__list {
  display: flex;
  align-items: center;
  gap: var(--mxt-spacing-lg);
}

.mxt-nav__link {
  font-size: var(--mxt-font-size-sm);
  font-weight: 500;
  color: var(--mxt-color-dark-accent);
  padding-block: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mxt-nav__link:hover {
  color: var(--mxt-color-primary);
}

.mxt-nav__dropdown {
  position: relative;
}

.mxt-nav__dropdown-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: var(--mxt-color-white);
  border: 1px solid var(--mxt-border-color);
  border-radius: var(--mxt-radius-md);
  box-shadow: var(--mxt-shadow-lg);
  padding-block: var(--mxt-spacing-sm);
  padding-inline: var(--mxt-spacing-sm);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all var(--mxt-transition-fast);
}

.mxt-nav__dropdown:hover .mxt-nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mxt-nav__dropdown-item a {
  display: block;
  padding-block: 8px;
  padding-inline: 12px;
  font-size: var(--mxt-font-size-sm);
  border-radius: var(--mxt-radius-sm);
}

.mxt-nav__dropdown-item a:hover {
  background-color: var(--mxt-color-light);
  color: var(--mxt-color-primary);
}

.mxt-header__actions {
  display: flex;
  align-items: center;
  gap: var(--mxt-spacing-md);
}

.mxt-header__search-btn {
  color: var(--mxt-color-dark-accent);
  font-size: var(--mxt-font-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--mxt-radius-full);
}

.mxt-header__search-btn:hover {
  background-color: var(--mxt-color-light-accent);
}

.mxt-header__sign-in {
  font-size: var(--mxt-font-size-sm);
  font-weight: 600;
  color: var(--mxt-color-dark-accent);
}

.mxt-header__sign-in:hover {
  color: var(--mxt-color-primary);
}

/* Mobile Nav Toggle */
.mxt-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  z-index: 1002;
}

.mxt-nav-toggle span {
  width: 100%;
  height: 2px;
  background-color: var(--mxt-color-dark);
  transition: all var(--mxt-transition-fast);
}

/* Mobile Navigation Drawer */
.mxt-mobile-menu {
  position: fixed;
  inset-block: 0;
  inset-inline-end: -100%;
  width: 80%;
  max-width: 400px;
  background-color: var(--mxt-color-white);
  box-shadow: var(--mxt-shadow-xl);
  z-index: 1001;
  padding-block: var(--mxt-spacing-xl);
  padding-inline: var(--mxt-spacing-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: inset-inline-end var(--mxt-transition-normal);
}

.mxt-mobile-menu--active {
  inset-inline-end: 0;
}

.mxt-mobile-menu__overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(var(--mxt-color-dark-rgb), 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  transition: all var(--mxt-transition-normal);
}

.mxt-mobile-menu__overlay--active {
  opacity: 1;
  visibility: visible;
}

.mxt-mobile-nav {
  margin-block-start: var(--mxt-spacing-lg);
}

.mxt-mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--mxt-spacing-md);
}

.mxt-mobile-nav__link {
  font-size: var(--mxt-font-size-lg);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mxt-mobile-nav__submenu {
  padding-inline-start: var(--mxt-spacing-md);
  margin-block-start: var(--mxt-spacing-xs);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mxt-mobile-nav__submenu-link {
  font-size: var(--mxt-font-size-sm);
  color: var(--mxt-color-text-muted);
}

.mxt-mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: var(--mxt-spacing-md);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.mxt-hero {
  padding-block-start: clamp(100px, 12vh, 160px);
  padding-block-end: var(--mxt-spacing-2xl);
  background-image: var(--mxt-gradient-glow);
  position: relative;
  overflow: hidden;
}

.mxt-hero::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to top, var(--mxt-color-white), rgba(var(--mxt-color-white-rgb), 0));
  z-index: 1;
  pointer-events: none;
}

.mxt-hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--mxt-spacing-xl);
  align-items: center;
  position: relative;
  z-index: 2;
}

.mxt-hero__title {
  font-size: var(--mxt-font-size-5xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--mxt-color-dark);
  margin-block-end: var(--mxt-spacing-md);
}

.mxt-hero__description {
  font-size: var(--mxt-font-size-lg);
  color: var(--mxt-color-text-muted);
  margin-block-end: var(--mxt-spacing-lg);
  max-width: 580px;
}

.mxt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mxt-spacing-md);
  margin-block-end: var(--mxt-spacing-xl);
}

/* Hero features bar */
.mxt-hero-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mxt-spacing-md);
  border-block-start: 1px solid var(--mxt-border-color);
  padding-block-start: var(--mxt-spacing-lg);
  margin-block-start: var(--mxt-spacing-lg);
}

.mxt-hero-feature {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mxt-hero-feature__icon {
  color: var(--mxt-color-primary);
  font-size: var(--mxt-font-size-lg);
  margin-block-end: 4px;
}

.mxt-hero-feature__title {
  font-weight: 700;
  font-size: var(--mxt-font-size-sm);
  color: var(--mxt-color-dark);
}

.mxt-hero-feature__desc {
  font-size: var(--mxt-font-size-xs);
  color: var(--mxt-color-text-muted);
}

/* Right side visuals */
.mxt-hero__visual {
  position: relative;
}

.mxt-hero__image-wrapper {
  position: relative;
  width: 120%;
  margin-inline-start: -10%;
  filter: drop-shadow(0 20px 40px rgba(var(--mxt-color-dark-rgb), 0.1));
}

.mxt-hero__showcase-img {
  width: 100%;
  height: auto;
  border-radius: var(--mxt-radius-lg);
}

.mxt-hero__badge-floating {
  position: absolute;
  inset-block-end: 20%;
  inset-inline-end: 5%;
  background: var(--mxt-gradient-primary);
  color: var(--mxt-color-white);
  padding-block: var(--mxt-spacing-md);
  padding-inline: var(--mxt-spacing-md);
  border-radius: var(--mxt-radius-full);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  box-shadow: 0 10px 25px rgba(var(--mxt-color-primary-rgb), 0.4);
  font-weight: 800;
  animation: float 6s ease-in-out infinite;
}

.mxt-hero__badge-floating span {
  font-size: var(--mxt-font-size-2xl);
}

.mxt-hero__badge-floating small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

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

/* ==========================================================================
   FEATURED PRODUCTS SECTION
   ========================================================================== */

.mxt-section {
  padding-block: var(--mxt-spacing-2xl);
  background-color: var(--mxt-color-white);
}

.mxt-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-block-end: var(--mxt-spacing-xl);
}

.mxt-section-header__title {
  font-size: var(--mxt-font-size-3xl);
  font-weight: 800;
  color: var(--mxt-color-dark);
}

.mxt-section-header__subtitle {
  color: var(--mxt-color-text-muted);
  max-width: 600px;
  margin-block-start: 8px;
}

.mxt-grid-themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mxt-spacing-lg);
}

/* Theme Card */
.mxt-card-theme {
  background-color: var(--mxt-color-white);
  border: 1px solid var(--mxt-border-color);
  border-radius: var(--mxt-radius-lg);
  overflow: hidden;
  box-shadow: var(--mxt-shadow-sm);
  transition: all var(--mxt-transition-normal);
  display: flex;
  flex-direction: column;
}

.mxt-card-theme:hover {
  transform: translateY(-6px);
  box-shadow: var(--mxt-shadow-xl);
  border-color: rgba(var(--mxt-color-primary-rgb), 0.2);
}

.mxt-card-theme__image-holder {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: var(--mxt-color-light);
}

.mxt-card-theme__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mxt-transition-slow);
}

.mxt-card-theme:hover .mxt-card-theme__image {
  transform: scale(1.05);
}

.mxt-card-theme__content {
  padding-block: var(--mxt-spacing-md);
  padding-inline: var(--mxt-spacing-md);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.mxt-card-theme__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 8px;
}

.mxt-card-theme__category {
  font-size: var(--mxt-font-size-xs);
  font-weight: 600;
  color: var(--mxt-color-primary);
  text-transform: uppercase;
}

.mxt-card-theme__title {
  font-size: var(--mxt-font-size-lg);
  font-weight: 700;
  color: var(--mxt-color-dark);
  margin-block-end: var(--mxt-spacing-xs);
}

.mxt-card-theme__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: auto;
  padding-block-start: var(--mxt-spacing-md);
  border-block-start: 1px solid var(--mxt-border-color);
}

.mxt-card-theme__price {
  font-size: var(--mxt-font-size-xl);
  font-weight: 800;
  color: var(--mxt-color-dark);
}

.mxt-card-theme__btn {
  background-color: var(--mxt-color-light);
  color: var(--mxt-color-dark);
  width: 40px;
  height: 40px;
  border-radius: var(--mxt-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--mxt-transition-fast);
}

.mxt-card-theme__btn:hover {
  background-color: var(--mxt-color-primary);
  color: var(--mxt-color-white);
}

/* ==========================================================================
   FEATURES / BENEFITS SECTION
   ========================================================================== */

.mxt-section--features {
  background-color: var(--mxt-color-light);
}

.mxt-features__wrapper {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--mxt-spacing-2xl);
  align-items: center;
}

.mxt-features__intro-title {
  font-size: var(--mxt-font-size-4xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--mxt-color-dark);
  margin-block-end: var(--mxt-spacing-md);
}

.mxt-features__intro-desc {
  color: var(--mxt-color-text-muted);
  margin-block-end: var(--mxt-spacing-lg);
}

.mxt-grid-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mxt-spacing-md);
}

.mxt-card-feature {
  background-color: var(--mxt-color-white);
  border: 1px solid var(--mxt-border-color);
  border-radius: var(--mxt-radius-md);
  padding-block: var(--mxt-spacing-md);
  padding-inline: var(--mxt-spacing-md);
  box-shadow: var(--mxt-shadow-sm);
  transition: all var(--mxt-transition-normal);
}

.mxt-card-feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--mxt-shadow-md);
  border-color: rgba(var(--mxt-color-primary-rgb), 0.2);
}

.mxt-card-feature__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--mxt-radius-md);
  background-color: rgba(var(--mxt-color-primary-rgb), 0.08);
  color: var(--mxt-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mxt-font-size-xl);
  margin-block-end: var(--mxt-spacing-md);
}

.mxt-card-feature__title {
  font-size: var(--mxt-font-size-base);
  font-weight: 700;
  color: var(--mxt-color-dark);
  margin-block-end: 8px;
}

.mxt-card-feature__desc {
  font-size: var(--mxt-font-size-sm);
  color: var(--mxt-color-text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   MEMBERSHIP / CLUB SECTION
   ========================================================================== */

.mxt-membership-block {
  background: var(--mxt-gradient-dark);
  border-radius: var(--mxt-radius-xl);
  padding-block: var(--mxt-spacing-xl);
  padding-inline: var(--mxt-spacing-xl);
  color: var(--mxt-color-white);
  position: relative;
  overflow: hidden;
  box-shadow: var(--mxt-shadow-xl);
}

.mxt-membership-block::before {
  content: '';
  position: absolute;
  inset-block-start: -50%;
  inset-inline-end: -20%;
  width: 70%;
  height: 150%;
  background: radial-gradient(circle, rgba(var(--mxt-color-primary-rgb), 0.15) 0%, rgba(var(--mxt-color-white-rgb), 0) 70%);
  pointer-events: none;
}

.mxt-membership-block__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--mxt-spacing-xl);
  align-items: center;
  position: relative;
  z-index: 2;
}

.mxt-membership-block__title {
  font-size: var(--mxt-font-size-4xl);
  font-weight: 800;
  line-height: 1.1;
  margin-block-end: var(--mxt-spacing-md);
}

.mxt-membership-block__desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--mxt-font-size-base);
  margin-block-end: var(--mxt-spacing-lg);
  max-width: 500px;
}

.mxt-membership-block__perks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mxt-spacing-sm);
  margin-block-end: var(--mxt-spacing-lg);
}

.mxt-membership-block__perk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--mxt-font-size-sm);
}

.mxt-membership-block__perk-icon {
  color: var(--mxt-color-secondary);
}

.mxt-membership-block__price-card {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: var(--mxt-radius-lg);
  padding-block: var(--mxt-spacing-lg);
  padding-inline: var(--mxt-spacing-lg);
  text-align: center;
  position: relative;
}

.mxt-membership-block__price-label {
  font-size: var(--mxt-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mxt-color-secondary);
}

.mxt-membership-block__price-amount {
  font-size: var(--mxt-font-size-5xl);
  font-weight: 800;
  margin-block: 8px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.mxt-membership-block__price-amount small {
  font-size: var(--mxt-font-size-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.mxt-membership-block__price-badge {
  background-color: var(--mxt-color-success);
  color: var(--mxt-color-white);
  font-size: var(--mxt-font-size-xs);
  font-weight: 700;
  padding-block: 4px;
  padding-inline: 10px;
  border-radius: var(--mxt-radius-full);
  display: inline-block;
  margin-block-end: var(--mxt-spacing-md);
}

.mxt-membership-block__visual {
  position: relative;
}

.mxt-membership-block__img-holder {
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3));
}

/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */

.mxt-section--testimonials {
  background-color: var(--mxt-color-white);
}

.mxt-grid-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--mxt-spacing-lg);
}

.mxt-card-testimonial {
  background-color: var(--mxt-color-light);
  border: 1px solid var(--mxt-border-color);
  border-radius: var(--mxt-radius-lg);
  padding-block: var(--mxt-spacing-lg);
  padding-inline: var(--mxt-spacing-lg);
  position: relative;
  display: flex;
  flex-direction: column;
}

.mxt-card-testimonial__stars {
  display: flex;
  gap: 4px;
  color: var(--mxt-color-warning);
  margin-block-end: var(--mxt-spacing-sm);
  font-size: 14px;
}

.mxt-card-testimonial__text {
  font-size: var(--mxt-font-size-sm);
  color: var(--mxt-color-dark-accent);
  line-height: 1.6;
  font-style: italic;
  margin-block-end: var(--mxt-spacing-md);
  flex-grow: 1;
}

.mxt-card-testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-start: auto;
}

.mxt-card-testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--mxt-radius-full);
  object-fit: cover;
}

.mxt-card-testimonial__name {
  font-weight: 700;
  font-size: var(--mxt-font-size-sm);
  color: var(--mxt-color-dark);
}

.mxt-card-testimonial__role {
  font-size: var(--mxt-font-size-xs);
  color: var(--mxt-color-text-muted);
}

/* ==========================================================================
   STATS SECTION
   ========================================================================== */

.mxt-stats {
  padding-block: var(--mxt-spacing-lg);
  background-color: var(--mxt-color-light);
  border-block: 1px solid var(--mxt-border-color);
}

.mxt-stats__wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mxt-spacing-md);
  text-align: center;
}

.mxt-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mxt-stat__icon {
  font-size: var(--mxt-font-size-2xl);
  color: var(--mxt-color-primary);
  margin-block-end: 4px;
}

.mxt-stat__number {
  font-size: var(--mxt-font-size-3xl);
  font-weight: 800;
  color: var(--mxt-color-dark);
}

.mxt-stat__label {
  font-size: var(--mxt-font-size-xs);
  color: var(--mxt-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   FOOTER SECTION
   ========================================================================== */

.mxt-footer {
  background-color: var(--mxt-color-dark);
  color: rgba(255, 255, 255, 0.7);
  padding-block-start: var(--mxt-spacing-2xl);
  padding-block-end: var(--mxt-spacing-lg);
  border-block-start: 1px solid rgba(255, 255, 255, 0.08);
}

.mxt-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: var(--mxt-spacing-xl);
  margin-block-end: var(--mxt-spacing-2xl);
}

.mxt-footer__about {
  display: flex;
  flex-direction: column;
  gap: var(--mxt-spacing-md);
}

.mxt-footer__logo {
  color: var(--mxt-color-white);
}

.mxt-footer__text {
  font-size: var(--mxt-font-size-sm);
  line-height: 1.6;
  max-width: 280px;
}

.mxt-footer__socials {
  display: flex;
  gap: 12px;
}

.mxt-footer__social-link {
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--mxt-color-white);
  border-radius: var(--mxt-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--mxt-transition-fast);
}

.mxt-footer__social-link:hover {
  background-color: var(--mxt-color-primary);
}

.mxt-footer__title {
  color: var(--mxt-color-white);
  font-size: var(--mxt-font-size-sm);
  font-weight: 700;
  margin-block-end: var(--mxt-spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mxt-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mxt-footer__link {
  font-size: var(--mxt-font-size-sm);
  transition: color var(--mxt-transition-fast);
}

.mxt-footer__link:hover {
  color: var(--mxt-color-white);
}

/* Bottom Bar */
.mxt-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block-start: var(--mxt-spacing-md);
  border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--mxt-font-size-xs);
}

.mxt-footer__payments {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mxt-footer__payments svg {
  opacity: 0.8;
}

/* ==========================================================================
   RESPONSIVENESS (MOBILE resets & cleanups)
   ========================================================================== */

@media (max-width: 1024px) {
  .mxt-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--mxt-spacing-lg);
  }

  .mxt-hero__visual {
    margin-block-start: var(--mxt-spacing-lg);
  }

  .mxt-hero__image-wrapper {
    width: 100%;
    margin-inline-start: 0;
  }

  .mxt-features__wrapper {
    grid-template-columns: 1fr;
    gap: var(--mxt-spacing-xl);
  }

  .mxt-membership-block__grid {
    grid-template-columns: 1fr;
    gap: var(--mxt-spacing-lg);
  }

  .mxt-footer__grid {
    grid-template-columns: 1fr repeat(2, 1fr);
    gap: var(--mxt-spacing-lg);
  }
}

@media (max-width: 768px) {
  .mxt-nav {
    display: none;
  }

  .mxt-header__sign-in,
  .mxt-header__actions .mxt-btn {
    display: none;
  }

  .mxt-nav-toggle {
    display: flex;
  }

  .mxt-hero-features {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mxt-spacing-sm);
  }

  .mxt-grid-features {
    grid-template-columns: 1fr;
  }

  .mxt-stats__wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mxt-spacing-sm);
  }

  .mxt-footer__grid {
    grid-template-columns: 1fr;
  }

  .mxt-footer__bottom {
    flex-direction: column;
    gap: var(--mxt-spacing-sm);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .mxt-hero-features {
    grid-template-columns: 1fr;
  }

  .mxt-hero__actions {
    flex-direction: column;
  }

  .mxt-hero__actions .mxt-btn {
    width: 100%;
  }

  .mxt-membership-block__perks {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================================== */

.mxt-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--mxt-transition-slow), transform var(--mxt-transition-slow);
}

.mxt-reveal--active {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   APPENDED STYLE VARIABLE OVERRIDES (APPEND-ONLY COMPLIANT)
   ========================================================================== */

:root {
  --mxt-color-text-muted: #64748b;
  --mxt-color-text-muted-rgb: 100, 116, 139;
}

/* ==========================================================================
   MARKETPLACE PAGES EXTENSIONS (APPEND-ONLY COMPLIANT)
   ========================================================================== */

/* 1. Themes Directory Page (.themes.html) */
.mxt-filter-nav {
  display: flex;
  justify-content: center;
  margin-block-end: var(--mxt-spacing-xl);
}

.mxt-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mxt-spacing-sm);
  background-color: var(--mxt-color-light-accent);
  padding-block: 6px;
  padding-inline: 6px;
  border-radius: var(--mxt-radius-full);
  list-style: none;
}

.mxt-filter-btn {
  background: transparent;
  border: none;
  color: var(--mxt-color-text-muted);
  font-family: var(--mxt-font-sans);
  font-size: var(--mxt-font-size-sm);
  font-weight: 600;
  padding-block: 8px;
  padding-inline: 18px;
  border-radius: var(--mxt-radius-full);
  cursor: pointer;
  transition: all var(--mxt-transition-fast);
}

.mxt-filter-btn:hover {
  color: var(--mxt-color-dark);
}

.mxt-filter-btn--active {
  background-color: var(--mxt-color-white);
  color: var(--mxt-color-primary);
  box-shadow: var(--mxt-shadow-sm);
}

/* 2. Theme Single details & Price Widget (.single-theme.html) */
.mxt-details-grid {
  display: grid;
  grid-template-columns: 2fr 1.1fr;
  gap: var(--mxt-spacing-xl);
  align-items: start;
}

.mxt-details-body {
  display: flex;
  flex-direction: column;
  gap: var(--mxt-spacing-lg);
}

.mxt-details-gallery {
  border-radius: var(--mxt-radius-lg);
  overflow: hidden;
  box-shadow: var(--mxt-shadow-md);
  border: 1px solid var(--mxt-border-color);
}

.mxt-details-gallery img {
  width: 100%;
  height: auto;
  display: block;
}

.mxt-details-section-title {
  font-size: var(--mxt-font-size-xl);
  font-weight: 700;
  color: var(--mxt-color-dark);
  border-block-end: 2px solid var(--mxt-color-light-accent);
  padding-block-end: 8px;
  margin-block-end: var(--mxt-spacing-sm);
}

.mxt-details-features-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-block-end: var(--mxt-spacing-md);
}

.mxt-details-features-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--mxt-font-size-sm);
  color: var(--mxt-color-dark-accent);
}

.mxt-details-features-list svg {
  color: var(--mxt-color-success);
  flex-shrink: 0;
}

.mxt-details-meta-box {
  background-color: var(--mxt-color-light);
  border: 1px solid var(--mxt-border-color);
  border-radius: var(--mxt-radius-md);
  padding-block: var(--mxt-spacing-md);
  padding-inline: var(--mxt-spacing-md);
}

.mxt-details-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mxt-spacing-md);
}

.mxt-details-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mxt-details-meta-label {
  font-size: var(--mxt-font-size-xs);
  color: var(--mxt-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mxt-details-meta-val {
  font-size: var(--mxt-font-size-sm);
  font-weight: 600;
  color: var(--mxt-color-dark);
}

/* Pricing Widget Sidebar */
.mxt-pricing-widget {
  background-color: var(--mxt-color-white);
  border: 1px solid var(--mxt-border-color);
  border-radius: var(--mxt-radius-lg);
  box-shadow: var(--mxt-shadow-lg);
  overflow: hidden;
  position: sticky;
  inset-block-start: 100px;
}

.mxt-pricing-widget__tabs {
  display: flex;
  border-block-end: 1px solid var(--mxt-border-color);
  background-color: var(--mxt-color-light);
  list-style: none;
}

.mxt-pricing-widget__tab-item {
  flex: 1;
}

.mxt-pricing-widget__tab-btn {
  width: 100%;
  background: transparent;
  border: none;
  border-block-end: 3px solid transparent;
  padding-block: var(--mxt-spacing-md);
  font-family: var(--mxt-font-sans);
  font-size: var(--mxt-font-size-xs);
  font-weight: 700;
  color: var(--mxt-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--mxt-transition-fast);
}

.mxt-pricing-widget__tab-btn:hover {
  color: var(--mxt-color-dark);
  background-color: var(--mxt-color-light-accent);
}

.mxt-pricing-widget__tab-btn--active {
  color: var(--mxt-color-primary);
  border-block-end-color: var(--mxt-color-primary);
  background-color: var(--mxt-color-white);
}

.mxt-pricing-widget__content {
  padding-block: var(--mxt-spacing-lg);
  padding-inline: var(--mxt-spacing-lg);
}

.mxt-pricing-widget__price {
  font-size: var(--mxt-font-size-4xl);
  font-weight: 800;
  color: var(--mxt-color-dark);
  margin-block-end: var(--mxt-spacing-sm);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.mxt-pricing-widget__price small {
  font-size: var(--mxt-font-size-sm);
  font-weight: 500;
  color: var(--mxt-color-text-muted);
}

.mxt-pricing-widget__description {
  font-size: var(--mxt-font-size-sm);
  color: var(--mxt-color-dark-accent);
  line-height: 1.5;
  margin-block-end: var(--mxt-spacing-md);
}

.mxt-pricing-widget__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block-end: var(--mxt-spacing-lg);
}

.mxt-pricing-widget__feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--mxt-font-size-sm);
  color: var(--mxt-color-dark-accent);
}

.mxt-pricing-widget__feature-item svg {
  color: var(--mxt-color-success);
  flex-shrink: 0;
}

/* Subscription Widget Promo */
.mxt-promo-sidebar-card {
  background: var(--mxt-gradient-dark);
  color: var(--mxt-color-white);
  border-radius: var(--mxt-radius-lg);
  padding-block: var(--mxt-spacing-lg);
  padding-inline: var(--mxt-spacing-lg);
  margin-block-start: var(--mxt-spacing-md);
  position: relative;
  overflow: hidden;
  box-shadow: var(--mxt-shadow-md);
}

.mxt-promo-sidebar-card__title {
  font-size: var(--mxt-font-size-lg);
  font-weight: 800;
  margin-block-end: var(--mxt-spacing-xs);
  color: var(--mxt-color-white);
}

.mxt-promo-sidebar-card__desc {
  font-size: var(--mxt-font-size-xs);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin-block-end: var(--mxt-spacing-md);
}

/* 3. Services Page Layout (.services.html) */
.mxt-services-category-title {
  font-size: var(--mxt-font-size-2xl);
  font-weight: 800;
  color: var(--mxt-color-dark);
  margin-block-start: var(--mxt-spacing-xl);
  margin-block-end: var(--mxt-spacing-md);
  position: relative;
  display: inline-block;
}

.mxt-services-category-title::after {
  content: '';
  position: absolute;
  inset-block-start: 110%;
  inset-inline-start: 0;
  width: 40px;
  height: 3px;
  background-color: var(--mxt-color-primary);
  border-radius: var(--mxt-radius-full);
}

.mxt-grid-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--mxt-spacing-lg);
  margin-block-end: var(--mxt-spacing-xl);
}

.mxt-card-service {
  background-color: var(--mxt-color-white);
  border: 1px solid var(--mxt-border-color);
  border-radius: var(--mxt-radius-lg);
  padding-block: var(--mxt-spacing-lg);
  padding-inline: var(--mxt-spacing-lg);
  display: flex;
  flex-direction: column;
  transition: transform var(--mxt-transition-fast), box-shadow var(--mxt-transition-fast);
}

.mxt-card-service:hover {
  transform: translateY(-5px);
  box-shadow: var(--mxt-shadow-lg);
}

.mxt-card-service__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--mxt-spacing-md);
}

.mxt-card-service__icon {
  width: 48px;
  height: 48px;
  background-color: rgba(99, 102, 241, 0.1);
  color: var(--mxt-color-primary);
  border-radius: var(--mxt-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mxt-card-service__badge {
  background-color: var(--mxt-color-light-accent);
  color: var(--mxt-color-primary);
  font-weight: 700;
  font-size: var(--mxt-font-size-sm);
  padding-block: 6px;
  padding-inline: 12px;
  border-radius: var(--mxt-radius-full);
}

.mxt-card-service__badge--success {
  background-color: rgba(16, 185, 129, 0.15);
  color: var(--mxt-color-success);
}

.mxt-card-service__title {
  font-size: var(--mxt-font-size-lg);
  font-weight: 700;
  color: var(--mxt-color-dark);
  margin-block-end: var(--mxt-spacing-xs);
}

.mxt-card-service__desc {
  font-size: var(--mxt-font-size-sm);
  color: var(--mxt-color-text-muted);
  line-height: 1.5;
  margin-block-end: var(--mxt-spacing-md);
  flex-grow: 1;
}

.mxt-card-service__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-end: var(--mxt-spacing-lg);
}

.mxt-card-service__list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--mxt-font-size-xs);
  color: var(--mxt-color-dark-accent);
}

.mxt-card-service__list-item svg {
  color: var(--mxt-color-success);
}

/* Service FAQ Accordion Grid */
.mxt-faq-grid {
  display: grid;
  grid-template-columns: 1.2fr;
  gap: 14px;
  margin-block-start: var(--mxt-spacing-md);
}

.mxt-faq-item {
  background-color: var(--mxt-color-light);
  border: 1px solid var(--mxt-border-color);
  border-radius: var(--mxt-radius-md);
  overflow: hidden;
}

.mxt-faq-item__trigger {
  width: 100%;
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--mxt-spacing-md);
  padding-inline: var(--mxt-spacing-md);
  font-family: var(--mxt-font-sans);
  font-size: var(--mxt-font-size-sm);
  font-weight: 700;
  color: var(--mxt-color-dark);
  text-align: inherit;
  cursor: pointer;
  transition: background-color var(--mxt-transition-fast);
}

.mxt-faq-item__trigger:hover {
  background-color: var(--mxt-color-light-accent);
}

.mxt-faq-item__trigger svg {
  color: var(--mxt-color-text-muted);
  transition: transform var(--mxt-transition-fast);
}

.mxt-faq-item__trigger--active svg {
  transform: rotate(180deg);
}

.mxt-faq-item__content {
  padding-inline: var(--mxt-spacing-md);
  padding-block-end: var(--mxt-spacing-md);
  font-size: var(--mxt-font-size-sm);
  color: var(--mxt-color-dark-accent);
  line-height: 1.6;
}

/* 4. Contact Page Form and Grid (.contact.html) */
.mxt-contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--mxt-spacing-xl);
  align-items: start;
}

.mxt-contact-box {
  background-color: var(--mxt-color-white);
  border: 1px solid var(--mxt-border-color);
  border-radius: var(--mxt-radius-lg);
  padding-block: var(--mxt-spacing-xl);
  padding-inline: var(--mxt-spacing-xl);
  box-shadow: var(--mxt-shadow-sm);
}

.mxt-form-group {
  margin-block-end: var(--mxt-spacing-md);
}

.mxt-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mxt-spacing-md);
}

.mxt-label {
  display: block;
  font-size: var(--mxt-font-size-xs);
  font-weight: 700;
  color: var(--mxt-color-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: 6px;
}

.mxt-input, .mxt-textarea {
  width: 100%;
  background-color: var(--mxt-color-light);
  border: 1px solid var(--mxt-border-color);
  font-family: var(--mxt-font-sans);
  font-size: var(--mxt-font-size-sm);
  color: var(--mxt-color-dark);
  padding-block: 12px;
  padding-inline: 14px;
  border-radius: var(--mxt-radius-md);
  transition: all var(--mxt-transition-fast);
  outline: none;
}

.mxt-input:focus, .mxt-textarea:focus {
  border-color: var(--mxt-color-primary);
  background-color: var(--mxt-color-white);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.mxt-textarea {
  min-height: 150px;
  resize: vertical;
}

.mxt-contact-info-block {
  background-color: var(--mxt-color-light);
  border: 1px solid var(--mxt-border-color);
  border-radius: var(--mxt-radius-lg);
  padding-block: var(--mxt-spacing-lg);
  padding-inline: var(--mxt-spacing-lg);
}

.mxt-contact-info-item {
  display: flex;
  gap: var(--mxt-spacing-md);
  margin-block-end: var(--mxt-spacing-lg);
}

.mxt-contact-info-item:last-child {
  margin-block-end: 0;
}

.mxt-contact-info-icon {
  width: 40px;
  height: 40px;
  background-color: var(--mxt-color-white);
  color: var(--mxt-color-primary);
  border-radius: var(--mxt-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--mxt-shadow-xs);
  border: 1px solid var(--mxt-border-color);
}

.mxt-contact-info-text h4 {
  font-size: var(--mxt-font-size-sm);
  font-weight: 700;
  color: var(--mxt-color-dark);
  margin-block-end: 4px;
}

.mxt-contact-info-text p, .mxt-contact-info-text a {
  font-size: var(--mxt-font-size-xs);
  color: var(--mxt-color-text-muted);
  line-height: 1.5;
}

.mxt-contact-info-text a:hover {
  color: var(--mxt-color-primary);
}

/* Responsiveness for new pages */
@media (max-width: 1024px) {
  .mxt-details-grid {
    grid-template-columns: 1fr;
    gap: var(--mxt-spacing-xl);
  }
  .mxt-pricing-widget {
    position: static;
  }
  .mxt-contact-grid {
    grid-template-columns: 1fr;
    gap: var(--mxt-spacing-lg);
  }
}

@media (max-width: 768px) {
  .mxt-form-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PREMIUM CARD & GRID OVERRIDES (3 PRODUCTS PER ROW & ELITE AESTHETICS)
   ========================================================================== */

/* 3-Column Grid Layout for Desktop & Tablet */
@media (min-width: 992px) {
  .mxt-grid-themes {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--mxt-spacing-lg) !important;
  }
}
@media (min-width: 641px) and (max-width: 991px) {
  .mxt-grid-themes {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--mxt-spacing-md) !important;
  }
}
@media (max-width: 640px) {
  .mxt-grid-themes {
    grid-template-columns: 1fr !important;
    gap: var(--mxt-spacing-md) !important;
  }
}

/* Premium Card Overrides */
.mxt-card-theme {
  position: relative;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  box-shadow: 0 10px 30px -15px rgba(var(--mxt-color-dark-rgb), 0.05) !important;
  background-color: var(--mxt-color-white);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.3s ease !important;
}

/* Top Gradient Accent Line */
.mxt-card-theme::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: var(--mxt-gradient-primary);
  z-index: 10;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mxt-card-theme:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px -15px rgba(var(--mxt-color-primary-rgb), 0.12), 
              0 1px 3px rgba(var(--mxt-color-primary-rgb), 0.02) !important;
  border-color: rgba(var(--mxt-color-primary-rgb), 0.3) !important;
}

.mxt-card-theme:hover::before {
  width: 100%;
}

/* Image Zoom & Vignette Overlay */
.mxt-card-theme__image-holder {
  position: relative;
  aspect-ratio: 590/300 !important; /* Force standard landscape ratio */
  overflow: hidden;
}

.mxt-card-theme__image-holder::after {
  content: "Live Preview";
  position: absolute;
  inset: 0;
  background: rgba(var(--mxt-color-dark-rgb), 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mxt-color-white);
  font-weight: 700;
  font-size: var(--mxt-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(0.95);
  pointer-events: none;
}

.mxt-card-theme:hover .mxt-card-theme__image-holder::after {
  opacity: 1;
  transform: scale(1);
}

.mxt-card-theme__image {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mxt-card-theme:hover .mxt-card-theme__image {
  transform: scale(1.08) !important;
}

/* Category Badge Styling */
.mxt-card-theme__category {
  background: rgba(var(--mxt-color-primary-rgb), 0.06);
  color: var(--mxt-color-primary) !important;
  padding: 4px 10px;
  border-radius: var(--mxt-radius-full);
  font-size: 11px !important;
  letter-spacing: 0.03em;
  font-weight: 700;
  display: inline-block;
  border: 1px solid rgba(var(--mxt-color-primary-rgb), 0.1);
  text-transform: uppercase;
  transition: all 0.3s ease;
}

/* Alternate HTML category badge color */
.mxt-card-theme[data-category*="html"] .mxt-card-theme__category {
  background: rgba(var(--mxt-color-secondary-rgb), 0.06) !important;
  color: var(--mxt-color-secondary) !important;
  border-color: rgba(var(--mxt-color-secondary-rgb), 0.1) !important;
}

.mxt-card-theme:hover .mxt-card-theme__category {
  background: var(--mxt-color-primary);
  color: var(--mxt-color-white) !important;
  border-color: var(--mxt-color-primary);
}

.mxt-card-theme:hover[data-category*="html"] .mxt-card-theme__category {
  background: var(--mxt-color-secondary);
  color: var(--mxt-color-white) !important;
  border-color: var(--mxt-color-secondary);
}

/* Title Hover Link Color */
.mxt-card-theme__title a {
  transition: color 0.3s ease;
}

.mxt-card-theme:hover .mxt-card-theme__title a {
  color: var(--mxt-color-primary) !important;
}

/* Soften the footer line */
.mxt-card-theme__footer {
  border-color: rgba(var(--mxt-color-dark-rgb), 0.04) !important;
  transition: border-color 0.3s ease;
}

.mxt-card-theme:hover .mxt-card-theme__footer {
  border-color: rgba(var(--mxt-color-primary-rgb), 0.15) !important;
}

/* Premium Cart Button */
.mxt-card-theme__btn {
  background: var(--mxt-color-light) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  color: var(--mxt-color-dark-accent) !important;
  border-radius: var(--mxt-radius-md) !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  transition: all var(--mxt-transition-fast) !important;
  cursor: pointer;
}

.mxt-card-theme__btn:hover {
  background: var(--mxt-color-primary) !important;
  border-color: var(--mxt-color-primary) !important;
  color: var(--mxt-color-white) !important;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(var(--mxt-color-primary-rgb), 0.25) !important;
}

.mxt-card-theme[data-category*="html"] .mxt-card-theme__btn:hover {
  background: var(--mxt-color-secondary) !important;
  border-color: var(--mxt-color-secondary) !important;
  box-shadow: 0 4px 12px rgba(var(--mxt-color-secondary-rgb), 0.25) !important;
}

/* ============================================================
   WEBFLOW TEMPLATES BADGE & FILTER OVERFLOW FIX (2026-07-16)
   ============================================================ */

.mxt-filter-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block-end: var(--mxt-spacing-xs);
}

.mxt-filter-tabs::-webkit-scrollbar {
  display: none;
}

/* Webflow badge purple accent */
.mxt-card-theme__category--webflow {
  background-color: rgba(99, 102, 241, 0.15);
  color: #6366f1;
}

/* Live Preview overlay on hover for Webflow cards too */
.mxt-card-theme[data-category*="webflow"] .mxt-card-theme__image-holder::after {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.85), rgba(139, 92, 246, 0.85));
}

/* ============================================================
   LANDSCAPE PREVIEW ENFORCEMENT (590x300 = 59:30 ratio)
   Ensures ALL card images display at proper landscape ratio
   regardless of original file dimensions — prevents CLS
   ============================================================ */

.mxt-card-theme__image-holder {
  aspect-ratio: 59 / 30;
  overflow: hidden;
  background-color: var(--mxt-color-light);
}

.mxt-card-theme__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}

.mxt-card-theme:hover .mxt-card-theme__image {
  transform: scale(1.04);
}

/* WordPress badge blue */
.mxt-card-theme__category--wp {
  background-color: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

/* ============================================================
   INFINITE SCROLL LOADER + CARD TRANSITION FIXES (2026-07-16)
   ============================================================ */

@keyframes mxt-dot-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%       { transform: translateY(-8px); opacity: 1; }
}

/* Grid section always visible — override any accidental reveal class */
#mxt-wp-block-themes-grid {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Cards start visible by default — JS will animate them in */
.mxt-card-theme {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* 3 columns on desktop, 2 tablet, 1 mobile */
.mxt-grid-themes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mxt-spacing-lg);
}

@media (max-width: 900px) {
  .mxt-grid-themes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .mxt-grid-themes { grid-template-columns: 1fr; }
}




/* ============================================================
   PREMIUM GLASSMORPHIC SEARCH OVERLAY STYLES (APPEND-ONLY)
   ============================================================ */

.mxt-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--mxt-transition-normal), visibility var(--mxt-transition-normal);
  padding-block: var(--mxt-spacing-lg);
  padding-inline: var(--mxt-spacing-md);
  box-sizing: border-box;
}

.mxt-search-overlay--active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.mxt-search-overlay__background {
  position: absolute;
  inset: 0;
  background-color: rgba(var(--mxt-color-dark-rgb), 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mxt-search-overlay__wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  background-color: rgba(var(--mxt-color-dark-accent-rgb), 0.8);
  border: 1px solid rgba(var(--mxt-color-white-rgb), 0.08);
  border-radius: var(--mxt-radius-lg);
  box-shadow: var(--mxt-shadow-xl), var(--mxt-shadow-glow);
  padding-block: var(--mxt-spacing-md);
  padding-inline: var(--mxt-spacing-md);
  transform: translateY(-20px);
  transition: transform var(--mxt-transition-normal);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.mxt-search-overlay--active .mxt-search-overlay__wrapper {
  transform: translateY(0);
}

.mxt-search-overlay__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-block-end: 1px solid rgba(var(--mxt-color-white-rgb), 0.08);
  padding-block-end: var(--mxt-spacing-sm);
  margin-block-end: var(--mxt-spacing-md);
}

.mxt-search-overlay__header .mxt-logo {
  color: var(--mxt-color-white);
}

.mxt-search-overlay__close {
  background: rgba(var(--mxt-color-white-rgb), 0.05);
  border: 1px solid rgba(var(--mxt-color-white-rgb), 0.1);
  color: var(--mxt-color-white);
  width: 40px;
  height: 40px;
  border-radius: var(--mxt-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--mxt-transition-fast);
}

.mxt-search-overlay__close:hover {
  background-color: var(--mxt-color-error);
  border-color: var(--mxt-color-error);
}

.mxt-search-overlay__content {
  display: flex;
  flex-direction: column;
  gap: var(--mxt-spacing-md);
  overflow-y: auto;
  flex-grow: 1;
  padding-inline-end: 4px;
}

/* Custom Scrollbar for results overlay */
.mxt-search-overlay__content::-webkit-scrollbar {
  width: 6px;
}
.mxt-search-overlay__content::-webkit-scrollbar-track {
  background: transparent;
}
.mxt-search-overlay__content::-webkit-scrollbar-thumb {
  background: rgba(var(--mxt-color-white-rgb), 0.1);
  border-radius: var(--mxt-radius-full);
}

.mxt-search-form__field {
  position: relative;
  display: flex;
  align-items: center;
}

.mxt-search-form__icon {
  position: absolute;
  inset-inline-start: var(--mxt-spacing-sm);
  color: rgba(var(--mxt-color-white-rgb), 0.4);
  pointer-events: none;
}

.mxt-search-input {
  width: 100%;
  background-color: rgba(var(--mxt-color-white-rgb), 0.04);
  border: 1px solid rgba(var(--mxt-color-white-rgb), 0.1);
  color: var(--mxt-color-white);
  font-family: var(--mxt-font-sans);
  font-size: var(--mxt-font-size-base);
  padding-block: 14px;
  padding-inline-start: 48px;
  padding-inline-end: var(--mxt-spacing-md);
  border-radius: var(--mxt-radius-md);
  outline: none;
  transition: all var(--mxt-transition-fast);
}

.mxt-search-input:focus {
  background-color: rgba(var(--mxt-color-white-rgb), 0.08);
  border-color: var(--mxt-color-primary);
  box-shadow: 0 0 0 3px rgba(var(--mxt-color-primary-rgb), 0.25);
}

.mxt-search-results__suggestions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mxt-search-results__title {
  color: rgba(var(--mxt-color-white-rgb), 0.6);
  font-size: var(--mxt-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mxt-search-results__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mxt-search-tag {
  background-color: rgba(var(--mxt-color-white-rgb), 0.05);
  border: 1px solid rgba(var(--mxt-color-white-rgb), 0.08);
  color: rgba(var(--mxt-color-white-rgb), 0.8);
  font-family: var(--mxt-font-sans);
  font-size: var(--mxt-font-size-xs);
  font-weight: 600;
  padding-block: 6px;
  padding-inline: 14px;
  border-radius: var(--mxt-radius-full);
  cursor: pointer;
  transition: all var(--mxt-transition-fast);
}

.mxt-search-tag:hover {
  background-color: var(--mxt-color-primary);
  border-color: var(--mxt-color-primary);
  color: var(--mxt-color-white);
  transform: translateY(-1px);
}

.mxt-search-results__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mxt-search-result-item {
  display: flex;
  align-items: center;
  gap: var(--mxt-spacing-sm);
  background-color: rgba(var(--mxt-color-white-rgb), 0.02);
  border: 1px solid rgba(var(--mxt-color-white-rgb), 0.05);
  border-radius: var(--mxt-radius-md);
  padding-block: 10px;
  padding-inline: var(--mxt-spacing-sm);
  transition: all var(--mxt-transition-fast);
}

.mxt-search-result-item:hover {
  background-color: rgba(var(--mxt-color-white-rgb), 0.06);
  border-color: rgba(var(--mxt-color-white-rgb), 0.12);
  transform: translateX(4px);
}

.mxt-search-result-item__img {
  border-radius: var(--mxt-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(var(--mxt-color-white-rgb), 0.08);
}

.mxt-search-result-item__info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mxt-search-result-item__title {
  font-size: var(--mxt-font-size-sm);
  font-weight: 700;
  color: var(--mxt-color-white);
}

.mxt-search-result-item__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--mxt-transition-fast);
}

.mxt-search-result-item__title a:hover {
  color: var(--mxt-color-primary);
}

.mxt-search-result-item__category {
  font-size: var(--mxt-font-size-xs);
  color: rgba(var(--mxt-color-white-rgb), 0.4);
}

.mxt-search-result-item__price {
  font-size: var(--mxt-font-size-sm);
  font-weight: 700;
  color: var(--mxt-color-success);
  flex-shrink: 0;
}

.mxt-search-results__empty {
  color: rgba(var(--mxt-color-white-rgb), 0.5);
  font-size: var(--mxt-font-size-sm);
  text-align: center;
  padding-block: var(--mxt-spacing-lg);
}

@media (max-width: 600px) {
  .mxt-search-overlay {
    padding-block: var(--mxt-spacing-sm);
    padding-inline: var(--mxt-spacing-xs);
  }
  .mxt-search-overlay__wrapper {
    max-height: 96vh;
    border-radius: var(--mxt-radius-md);
  }
  .mxt-search-result-item {
    gap: 8px;
  }
  .mxt-search-result-item__img {
    width: 48px;
    height: 32px;
  }
}

/* Logo Overhaul Styles */
.mxt-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.mxt-logo__symbol {
  height: 40px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.mxt-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.mxt-logo__title {
  font-family: var(--mxt-font-sans);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--mxt-color-dark);
  letter-spacing: -0.02em;
}

.mxt-logo__subtitle {
  display: flex;
  flex-direction: column;
  font-family: var(--mxt-font-sans);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--mxt-color-dark-accent);
  text-transform: uppercase;
  margin-block-start: 1px;
}

.mxt-logo__highlight {
  color: var(--mxt-color-primary);
}

/* Context Overrides for Dark Backgrounds (Footer & Search Overlay) */
.mxt-footer__logo .mxt-logo__title,
.mxt-search-overlay__header .mxt-logo .mxt-logo__title {
  color: var(--mxt-color-white);
}

.mxt-footer__logo .mxt-logo__subtitle,
.mxt-search-overlay__header .mxt-logo .mxt-logo__subtitle {
  color: rgba(var(--mxt-color-white-rgb), 0.7);
}

/* Floating Capsule Header Overhaul */
@media (min-width: 1024px) {
  .mxt-header {
    position: fixed;
    inset-block-start: 20px;
    inset-inline: 24px;
    width: calc(100% - 48px);
    margin-inline: auto;
    max-width: 1380px;
    border: 1px solid rgba(var(--mxt-color-white-rgb), 0.15);
    border-radius: var(--mxt-radius-md);
    box-shadow: 0 10px 30px rgba(var(--mxt-color-dark-rgb), 0.04);
    background-color: rgba(var(--mxt-color-white-rgb), 0.75);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: all var(--mxt-transition-normal);
  }

  .mxt-header.sticky {
    inset-block-start: 12px;
    background-color: rgba(var(--mxt-color-white-rgb), 0.85);
    box-shadow: 0 12px 36px rgba(var(--mxt-color-dark-rgb), 0.08);
    border: 1px solid rgba(var(--mxt-color-primary-rgb), 0.08);
  }

  .mxt-nav__link {
    position: relative;
    transition: color var(--mxt-transition-fast);
  }

  .mxt-nav__link::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 2px;
    background: var(--mxt-gradient-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--mxt-transition-fast);
  }

  .mxt-nav__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* Immersive Hero Section Overhaul */
.mxt-hero {
  position: relative;
  overflow: hidden;
  padding-block-start: clamp(140px, 16vh, 200px);
  padding-block-end: var(--mxt-spacing-2xl);
  background-image: var(--mxt-gradient-glow);
}

.mxt-hero__backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.mxt-hero__grid-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(var(--mxt-color-dark-rgb), 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--mxt-color-dark-rgb), 0.03) 1px, transparent 1px);
  background-size: 45px 45px;
  mask-image: radial-gradient(circle, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle, black 40%, transparent 80%);
  opacity: 0.85;
}

.mxt-hero__glow-1 {
  position: absolute;
  width: clamp(350px, 35vw, 550px);
  height: clamp(350px, 35vw, 550px);
  border-radius: var(--mxt-radius-full);
  background: radial-gradient(circle, rgba(var(--mxt-color-primary-rgb), 0.28) 0%, rgba(var(--mxt-color-primary-rgb), 0) 70%);
  inset-block-start: -10%;
  inset-inline-start: -5%;
  filter: blur(40px);
  animation: mxt-float-glow-1 14s ease-in-out infinite alternate;
}

.mxt-hero__glow-2 {
  position: absolute;
  width: clamp(400px, 40vw, 650px);
  height: clamp(400px, 40vw, 650px);
  border-radius: var(--mxt-radius-full);
  background: radial-gradient(circle, rgba(var(--mxt-color-secondary-rgb), 0.22) 0%, rgba(var(--mxt-color-secondary-rgb), 0) 70%);
  inset-block-end: -15%;
  inset-inline-end: -5%;
  filter: blur(50px);
  animation: mxt-float-glow-2 18s ease-in-out infinite alternate;
}

@keyframes mxt-float-glow-1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, 30px) scale(1.1); }
}

@keyframes mxt-float-glow-2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-60px, -40px) scale(0.9); }
}

/* Glassmorphic Mock Browser Card for Showcase Image */
.mxt-hero__mock-browser {
  background: rgba(var(--mxt-color-white-rgb), 0.4);
  border: 1px solid rgba(var(--mxt-color-white-rgb), 0.6);
  border-radius: var(--mxt-radius-lg);
  padding: 10px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px rgba(var(--mxt-color-dark-rgb), 0.12),
              0 0 0 1px rgba(var(--mxt-color-primary-rgb), 0.05);
  position: relative;
  overflow: hidden;
  transition: transform var(--mxt-transition-normal), box-shadow var(--mxt-transition-normal);
  z-index: 2;
}

.mxt-hero__mock-browser:hover {
  transform: translateY(-8px) rotate(0.5deg);
  box-shadow: 0 40px 80px rgba(var(--mxt-color-dark-rgb), 0.18),
              0 0 25px rgba(var(--mxt-color-primary-rgb), 0.15);
}

.mxt-hero__mock-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-end: 10px;
  padding-inline-start: 4px;
}

.mxt-hero__mock-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--mxt-radius-full);
}

.mxt-hero__mock-dot:nth-child(1) { background-color: var(--mxt-color-error); }
.mxt-hero__mock-dot:nth-child(2) { background-color: var(--mxt-color-warning); }
.mxt-hero__mock-dot:nth-child(3) { background-color: var(--mxt-color-success); }

/* Rotating Glow Floating Badge */
.mxt-hero__badge-floating {
  position: absolute;
  inset-block-end: 12%;
  inset-inline-end: -6%;
  background: rgba(var(--mxt-color-dark-rgb), 0.88);
  border: 1px solid rgba(var(--mxt-color-white-rgb), 0.15);
  color: var(--mxt-color-white);
  padding: var(--mxt-spacing-md);
  border-radius: var(--mxt-radius-full);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 800;
  animation: mxt-float-badge 5s ease-in-out infinite alternate;
  z-index: 10;
}

.mxt-hero__badge-floating span {
  font-size: var(--mxt-font-size-2xl);
  background: linear-gradient(135deg, var(--mxt-color-primary) 0%, var(--mxt-color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  line-height: 1;
}

.mxt-hero__badge-floating small {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--mxt-color-white-rgb), 0.7);
  margin-block-start: 4px;
  text-align: center;
  line-height: 1.2;
}

@keyframes mxt-float-badge {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(-12px) rotate(3deg); }
}

/* Shopping Cart Actions & Drawer */
.mxt-header__cart-btn {
  background: none;
  border: none;
  color: var(--mxt-color-dark);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: var(--mxt-radius-full);
  transition: background-color var(--mxt-transition-fast), color var(--mxt-transition-fast);
}

.mxt-header__cart-btn:hover {
  background-color: rgba(var(--mxt-color-dark-rgb), 0.05);
  color: var(--mxt-color-primary);
}

.mxt-header__cart-badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  background-color: var(--mxt-color-primary);
  color: var(--mxt-color-white);
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: var(--mxt-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 4px;
  border: 1px solid var(--mxt-color-white);
}

.mxt-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  visibility: hidden;
  transition: visibility var(--mxt-transition-normal);
}

.mxt-cart-drawer:not([aria-hidden="true"]) {
  visibility: visible;
}

.mxt-cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(var(--mxt-color-dark-rgb), 0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--mxt-transition-normal);
}

.mxt-cart-drawer:not([aria-hidden="true"]) .mxt-cart-drawer__overlay {
  opacity: 1;
}

.mxt-cart-drawer__wrapper {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 100%;
  max-width: 400px;
  background-color: var(--mxt-color-white);
  box-shadow: -10px 0 40px rgba(var(--mxt-color-dark-rgb), 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--mxt-transition-normal) cubic-bezier(0.16, 1, 0.3, 1);
}

.mxt-cart-drawer:not([aria-hidden="true"]) .mxt-cart-drawer__wrapper {
  transform: translateX(0);
}

.mxt-cart-drawer__header {
  padding: var(--mxt-spacing-md);
  border-block-end: 1px solid var(--mxt-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mxt-cart-drawer__title {
  font-family: var(--mxt-font-sans);
  font-size: var(--mxt-font-size-base);
  font-weight: 800;
  color: var(--mxt-color-dark);
}

.mxt-cart-drawer__close {
  background: none;
  border: none;
  color: var(--mxt-color-dark-accent);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--mxt-transition-fast);
}

.mxt-cart-drawer__close:hover {
  color: var(--mxt-color-error);
}

.mxt-cart-drawer__body {
  flex-grow: 1;
  padding: var(--mxt-spacing-md);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--mxt-spacing-sm);
}

.mxt-cart-drawer__empty {
  margin: auto;
  text-align: center;
  color: var(--mxt-color-dark-accent);
  font-size: var(--mxt-font-size-sm);
  padding: var(--mxt-spacing-lg);
}

.mxt-cart-item {
  display: flex;
  gap: var(--mxt-spacing-sm);
  padding-block-end: var(--mxt-spacing-sm);
  border-block-end: 1px solid var(--mxt-border-color);
  align-items: center;
}

.mxt-cart-item__img {
  width: 70px;
  height: 50px;
  object-fit: cover;
  border-radius: var(--mxt-radius-sm);
  border: 1px solid var(--mxt-border-color);
}

.mxt-cart-item__details {
  flex-grow: 1;
}

.mxt-cart-item__title {
  font-size: var(--mxt-font-size-xs);
  font-weight: 700;
  color: var(--mxt-color-dark);
  margin-block-end: 2px;
}

.mxt-cart-item__price {
  font-size: var(--mxt-font-size-xs);
  color: var(--mxt-color-primary);
  font-weight: 700;
}

.mxt-cart-item__remove {
  background: none;
  border: none;
  color: rgba(var(--mxt-color-dark-rgb), 0.5);
  cursor: pointer;
  font-size: 10px;
  text-decoration: underline;
  padding: 4px;
  transition: color var(--mxt-transition-fast);
}

.mxt-cart-item__remove:hover {
  color: var(--mxt-color-error);
}

.mxt-cart-drawer__footer {
  padding: var(--mxt-spacing-md);
  border-block-start: 1px solid var(--mxt-border-color);
  background-color: var(--mxt-color-light);
}

.mxt-cart-drawer__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  margin-block-end: var(--mxt-spacing-sm);
}

.mxt-cart-drawer__total-price {
  font-size: var(--mxt-font-size-base);
  color: var(--mxt-color-dark);
}

/* Authentication Login/Register Modal */
.mxt-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  transition: visibility var(--mxt-transition-normal);
}

.mxt-auth-modal:not([aria-hidden="true"]) {
  visibility: visible;
}

.mxt-auth-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(var(--mxt-color-dark-rgb), 0.5);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--mxt-transition-normal);
}

.mxt-auth-modal:not([aria-hidden="true"]) .mxt-auth-modal__overlay {
  opacity: 1;
}

.mxt-auth-modal__wrapper {
  position: relative;
  width: 90%;
  max-width: 440px;
  background-color: var(--mxt-color-white);
  border: 1px solid rgba(var(--mxt-color-white-rgb), 0.15);
  border-radius: var(--mxt-radius-lg);
  padding: var(--mxt-spacing-lg);
  box-shadow: var(--mxt-shadow-xl);
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  transition: transform var(--mxt-transition-normal) cubic-bezier(0.16, 1, 0.3, 1),
              opacity var(--mxt-transition-normal);
  z-index: 2;
}

.mxt-auth-modal:not([aria-hidden="true"]) .mxt-auth-modal__wrapper {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.mxt-auth-modal__close {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  background: none;
  border: none;
  color: var(--mxt-color-dark-accent);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--mxt-transition-fast);
}

.mxt-auth-modal__close:hover {
  color: var(--mxt-color-error);
}

.mxt-auth-modal__tabs {
  display: flex;
  gap: var(--mxt-spacing-sm);
  margin-block-end: var(--mxt-spacing-md);
  border-block-end: 1px solid var(--mxt-border-color);
  padding-block-end: 10px;
}

.mxt-auth-modal__tab-btn {
  background: none;
  border: none;
  font-family: var(--mxt-font-sans);
  font-size: var(--mxt-font-size-base);
  font-weight: 700;
  color: rgba(var(--mxt-color-dark-rgb), 0.5);
  cursor: pointer;
  padding-block: 4px;
  padding-inline: 8px;
  position: relative;
  transition: color var(--mxt-transition-fast);
}

.mxt-auth-modal__tab-btn:hover {
  color: var(--mxt-color-dark);
}

.mxt-auth-modal__tab-btn--active {
  color: var(--mxt-color-primary);
}

.mxt-auth-modal__tab-btn--active::after {
  content: '';
  position: absolute;
  inset-block-end: -11px;
  inset-inline: 0;
  height: 2px;
  background-color: var(--mxt-color-primary);
}

.mxt-auth-modal__pane {
  display: none;
}

.mxt-auth-modal__pane--active {
  display: block;
}

.mxt-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--mxt-spacing-sm);
}

.mxt-auth-form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mxt-auth-form__label {
  font-size: var(--mxt-font-size-xs);
  font-weight: 700;
  color: var(--mxt-color-dark-accent);
}

.mxt-auth-form__forgot {
  font-size: var(--mxt-font-size-xs);
  color: var(--mxt-color-primary);
  text-decoration: none;
  font-weight: 600;
}

.mxt-auth-form__input {
  font-family: var(--mxt-font-sans);
  padding: 10px 14px;
  border-radius: var(--mxt-radius-md);
  border: 1px solid var(--mxt-border-color);
  font-size: var(--mxt-font-size-sm);
  background-color: var(--mxt-color-light);
  color: var(--mxt-color-dark);
  transition: border-color var(--mxt-transition-fast), box-shadow var(--mxt-transition-fast);
}

.mxt-auth-form__input:focus {
  outline: none;
  border-color: var(--mxt-color-primary);
  box-shadow: 0 0 0 3px rgba(var(--mxt-color-primary-rgb), 0.15);
}

.mxt-auth-form__checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--mxt-font-size-xs);
  color: var(--mxt-color-dark-accent);
}

.mxt-auth-form__checkbox-group input {
  width: 16px;
  height: 16px;
  accent-color: var(--mxt-color-primary);
}

/* Showcase Image Overrides */
.mxt-hero__image-wrapper {
  position: relative;
  z-index: 2;
  transition: transform var(--mxt-transition-normal), box-shadow var(--mxt-transition-normal);
}

.mxt-hero__image-wrapper:hover {
  transform: translateY(-8px) rotate(0.5deg);
}

.mxt-hero__showcase-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   VIBE & PALETTE OVERRIDES (ROYAL BLUE VIBE)
   ========================================================================== */

:root {
  --mxt-color-primary: rgb(37, 99, 235);
  --mxt-color-primary-rgb: 37, 99, 235;
  --mxt-color-primary-hover: rgb(29, 78, 216);
  --mxt-color-secondary: rgb(59, 130, 246);
  --mxt-color-secondary-rgb: 59, 130, 246;
  --mxt-gradient-primary: linear-gradient(135deg, var(--mxt-color-primary) 0%, rgb(59, 130, 246) 100%);
  --mxt-gradient-glow: radial-gradient(circle, rgba(var(--mxt-color-primary-rgb), 0.12) 0%, rgba(var(--mxt-color-white-rgb), 0) 70%);
}

/* Directory Layout and Category Sidebar */
.mxt-directory__layout {
  display: flex;
  gap: var(--mxt-spacing-lg);
  margin-block-start: var(--mxt-spacing-md);
  align-items: flex-start;
}

.mxt-directory__sidebar {
  width: 260px;
  flex-shrink: 0;
  display: none;
  flex-direction: column;
  gap: var(--mxt-spacing-md);
}

.mxt-sidebar-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--mxt-spacing-sm);
  padding-inline: var(--mxt-spacing-sm);
  border-radius: var(--mxt-radius-sm);
  font-size: var(--mxt-font-size-sm);
  text-align: start;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all var(--mxt-transition-fast);
  background: transparent;
  color: var(--mxt-color-dark-accent);
}

.mxt-sidebar-btn:hover {
  background-color: var(--mxt-color-light-accent);
}

.mxt-sidebar-btn.mxt-filter-btn--active {
  background-color: var(--mxt-color-primary) !important;
  color: var(--mxt-color-white) !important;
  font-weight: 600;
}

.mxt-sidebar-btn.mxt-filter-btn--active .mxt-sidebar-badge {
  background-color: rgba(var(--mxt-color-white-rgb), 0.2) !important;
  color: var(--mxt-color-white) !important;
}

.mxt-sidebar-badge {
  font-size: var(--mxt-font-size-xs);
  padding-block: 2px;
  padding-inline: 6px;
  border-radius: var(--mxt-radius-full);
  background-color: rgba(var(--mxt-color-dark-rgb), 0.05);
  color: rgba(var(--mxt-color-dark-rgb), 0.6);
  transition: all var(--mxt-transition-fast);
}

/* Card Wishlist and Premium Effects */
.mxt-card-theme__wishlist:hover {
  background-color: var(--mxt-color-white) !important;
  color: var(--mxt-color-error) !important;
  transform: scale(1.1);
}

.mxt-card-theme {
  transition: transform var(--mxt-transition-normal), box-shadow var(--mxt-transition-normal);
}

.mxt-card-theme:hover {
  transform: translateY(-6px);
  box-shadow: var(--mxt-shadow-xl);
}

/* Search bar focus outline */
.mxt-hero__search-input:focus {
  outline: none;
  border-color: var(--mxt-color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--mxt-color-primary-rgb), 0.15) !important;
}

/* Responsive grid overrides */
@media (min-width: 1024px) {
  .mxt-directory__layout {
    display: flex !important;
  }
}

/* ==========================================================================
   ADVANCED SIDE FILTERBAR & RESPONSIVE LAYOUT (SOVEREIGN ELITE 2026 SPEC)
   ========================================================================== */

.mxt-directory__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mxt-spacing-lg);
  margin-block-start: var(--mxt-spacing-md);
  position: relative;
}

@media (min-width: 1024px) {
  .mxt-directory__layout {
    grid-template-columns: 280px 1fr;
  }
}

.mxt-directory__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--mxt-spacing-md);
  padding: var(--mxt-spacing-md);
  background-color: var(--mxt-color-white);
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08);
  border-radius: var(--mxt-radius-md);
  box-shadow: var(--mxt-shadow-sm);
  transition: transform var(--mxt-transition-normal);
}

.mxt-directory__content {
  display: flex;
  flex-direction: column;
  gap: var(--mxt-spacing-md);
}

.mxt-sidebar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-block-end: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08);
  padding-block-end: var(--mxt-spacing-xs);
}

.mxt-sidebar__main-title {
  font-size: var(--mxt-font-size-base);
  font-weight: 800;
  color: var(--mxt-color-dark-accent);
}

.mxt-sidebar__close-btn {
  display: none;
  font-size: var(--mxt-font-size-xl);
  line-height: 1;
  color: rgba(var(--mxt-color-dark-rgb), 0.5);
  border: none;
  background: none;
  cursor: pointer;
}

.mxt-sidebar__widget {
  display: flex;
  flex-direction: column;
  gap: var(--mxt-spacing-xs);
}

.mxt-sidebar__widget-title {
  font-size: var(--mxt-font-size-sm);
  font-weight: 700;
  color: var(--mxt-color-dark-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mxt-sidebar__search-wrapper {
  position: relative;
  width: 100%;
}

.mxt-sidebar__search-input {
  width: 100%;
  padding-block: var(--mxt-spacing-xs);
  padding-inline-start: var(--mxt-spacing-sm);
  padding-inline-end: clamp(30px, 4vw, 40px);
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.1);
  border-radius: var(--mxt-radius-sm);
  background-color: var(--mxt-color-light);
  font-size: var(--mxt-font-size-sm);
  color: var(--mxt-color-dark-accent);
  transition: border-color var(--mxt-transition-fast), box-shadow var(--mxt-transition-fast);
}

.mxt-sidebar__search-input:focus {
  outline: none;
  border-color: var(--mxt-color-primary);
  box-shadow: 0 0 0 3px rgba(var(--mxt-color-primary-rgb), 0.1);
}

.mxt-sidebar__search-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--mxt-spacing-xs);
  transform: translateY(-50%);
  color: rgba(var(--mxt-color-dark-rgb), 0.4);
  pointer-events: none;
}

.mxt-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mxt-sidebar__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--mxt-radius-sm);
  font-size: var(--mxt-font-size-sm);
  color: rgba(var(--mxt-color-dark-rgb), 0.7);
  transition: all var(--mxt-transition-fast);
}

.mxt-sidebar__link:hover,
.mxt-sidebar__link--active {
  background-color: rgba(var(--mxt-color-primary-rgb), 0.06);
  color: var(--mxt-color-primary);
  font-weight: 600;
}

.mxt-sidebar__checkbox-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--mxt-radius-sm);
  font-size: var(--mxt-font-size-sm);
  color: rgba(var(--mxt-color-dark-rgb), 0.75);
  cursor: pointer;
  transition: all var(--mxt-transition-fast);
  user-select: none;
}

.mxt-sidebar__checkbox-label:hover {
  background-color: var(--mxt-color-light);
  color: var(--mxt-color-dark-accent);
}

.mxt-sidebar__checkbox {
  margin-inline-end: var(--mxt-spacing-xs);
  accent-color: var(--mxt-color-primary);
  cursor: pointer;
}

.mxt-sidebar__checkbox-text {
  flex-grow: 1;
  text-align: start;
}

.mxt-sidebar__badge {
  font-size: var(--mxt-font-size-xs);
  padding-block: 2px;
  padding-inline: 6px;
  border-radius: var(--mxt-radius-full);
  background-color: rgba(var(--mxt-color-dark-rgb), 0.04);
  color: rgba(var(--mxt-color-dark-rgb), 0.6);
  transition: all var(--mxt-transition-fast);
}

.mxt-sidebar__link--active .mxt-sidebar__badge,
.mxt-sidebar__checkbox-label:hover .mxt-sidebar__badge {
  background-color: rgba(var(--mxt-color-primary-rgb), 0.1);
  color: var(--mxt-color-primary);
}

.mxt-sidebar__clear-btn {
  width: 100%;
  padding-block: var(--mxt-spacing-xs);
  border-radius: var(--mxt-radius-sm);
  font-size: var(--mxt-font-size-sm);
  font-weight: 700;
  text-align: center;
  background-color: rgba(var(--mxt-color-error-rgb), 0.08);
  color: var(--mxt-color-error);
  border: 1px solid rgba(var(--mxt-color-error-rgb), 0.1);
  cursor: pointer;
  transition: all var(--mxt-transition-fast);
}

.mxt-sidebar__clear-btn:hover {
  background-color: var(--mxt-color-error);
  color: var(--mxt-color-white);
  border-color: var(--mxt-color-error);
}

/* Grid Header Elements */
.mxt-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mxt-spacing-xs);
  border-block-end: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08);
  padding-block-end: var(--mxt-spacing-xs);
}

.mxt-grid-header__count {
  font-size: var(--mxt-font-size-sm);
  font-weight: 700;
  color: var(--mxt-color-primary);
}

.mxt-grid-header__actions {
  display: flex;
  align-items: center;
  gap: var(--mxt-spacing-sm);
}

.mxt-grid-header__filter-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background-color: var(--mxt-color-light);
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.1);
  border-radius: var(--mxt-radius-sm);
  font-size: var(--mxt-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  color: var(--mxt-color-dark-accent);
  transition: all var(--mxt-transition-fast);
}

.mxt-grid-header__filter-toggle:hover {
  border-color: var(--mxt-color-primary);
  color: var(--mxt-color-primary);
}

.mxt-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mxt-sort__label {
  font-size: var(--mxt-font-size-xs);
  font-weight: 600;
  color: rgba(var(--mxt-color-dark-rgb), 0.5);
}

.mxt-sort__select {
  padding: 6px 12px;
  border-radius: var(--mxt-radius-sm);
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.1);
  background-color: var(--mxt-color-white);
  font-size: var(--mxt-font-size-xs);
  color: var(--mxt-color-dark-accent);
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color var(--mxt-transition-fast);
}

.mxt-sort__select:focus {
  border-color: var(--mxt-color-primary);
}

/* Active Tags Bar */
.mxt-active-filters {
  padding-block-end: var(--mxt-spacing-xs);
}

.mxt-active-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mxt-active-filters__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--mxt-font-size-xs);
  padding: 4px 10px;
  border-radius: var(--mxt-radius-full);
  background-color: rgba(var(--mxt-color-primary-rgb), 0.08);
  color: var(--mxt-color-primary);
  font-weight: 600;
  border: 1px solid rgba(var(--mxt-color-primary-rgb), 0.1);
}

.mxt-active-filters__remove {
  background: none;
  border: none;
  font-size: var(--mxt-font-size-sm);
  color: var(--mxt-color-primary);
  cursor: pointer;
  line-height: 1;
  padding-inline: 0;
  padding-block: 0;
}

.mxt-active-filters__remove:hover {
  color: var(--mxt-color-primary-hover);
}

/* Floating mobile filter button */
.mxt-mobile-filter-bar {
  display: none;
  position: fixed;
  inset-block-end: var(--mxt-spacing-md);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 99;
}

.mxt-mobile-filter-bar__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: var(--mxt-color-primary);
  color: var(--mxt-color-white);
  border-radius: var(--mxt-radius-full);
  font-weight: 700;
  box-shadow: 0 10px 25px -5px rgba(var(--mxt-color-primary-rgb), 0.4);
  font-size: var(--mxt-font-size-sm);
  border: none;
  cursor: pointer;
  transition: all var(--mxt-transition-normal);
}

.mxt-mobile-filter-bar__btn:hover {
  transform: translateY(-2px);
  background-color: var(--mxt-color-primary-hover);
  box-shadow: 0 12px 30px -5px rgba(var(--mxt-color-primary-rgb), 0.5);
}

/* Responsive side drawer styling */
@media (max-width: 1023px) {
  .mxt-directory__sidebar {
    display: none;
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: -320px;
    width: 300px;
    height: 100vh;
    z-index: 1000;
    border-radius: 0;
    border: none;
    box-shadow: var(--mxt-shadow-xl);
    overflow-y: auto;
    transition: inset-inline-start var(--mxt-transition-normal);
    padding-inline: var(--mxt-spacing-md);
    padding-block: var(--mxt-spacing-md);
  }

  .mxt-directory__sidebar--open {
    display: flex;
    inset-inline-start: 0;
  }

  .mxt-sidebar__close-btn {
    display: block;
  }

  .mxt-grid-header__filter-toggle {
    display: flex;
  }

  .mxt-mobile-filter-bar {
    display: block;
  }
}

/* Card Hover State Clipping & Radius Alignment */
.mxt-card-theme {
  overflow: hidden !important;
}

.mxt-card-theme__image-holder {
  border-top-left-radius: calc(var(--mxt-radius-lg) - 1px) !important;
  border-top-right-radius: calc(var(--mxt-radius-lg) - 1px) !important;
  overflow: hidden !important;
}

/* Badge Hover Color Contrast Fixes */
.mxt-card-theme:hover .mxt-card-theme__category--wp {
  background-color: var(--mxt-color-primary) !important;
  color: var(--mxt-color-white) !important;
  border-color: var(--mxt-color-primary) !important;
}

.mxt-card-theme:hover .mxt-card-theme__category--webflow {
  background-color: var(--mxt-color-primary) !important;
  color: var(--mxt-color-white) !important;
  border-color: var(--mxt-color-primary) !important;
}

/* 3D Stacked Card Mockup Showcase in Hero */
.mxt-hero__3d-mockup {
  position: relative;
  width: 100%;
  height: 520px;
  perspective: 1800px;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mxt-window-frame {
  background-color: var(--mxt-color-dark);
  border-radius: var(--mxt-radius-lg);
  border: 1px solid rgba(var(--mxt-color-white-rgb), 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: border-color var(--mxt-transition-normal), box-shadow var(--mxt-transition-normal);
}

.mxt-window-frame__header {
  height: 28px;
  min-height: 28px;
  background-color: var(--mxt-color-dark-accent);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline-start: 12px;
  border-block-end: 1px solid rgba(var(--mxt-color-white-rgb), 0.06);
}

.mxt-window-frame__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--mxt-radius-full);
}

.mxt-window-frame__dot:nth-child(1) { background-color: var(--mxt-color-error); }
.mxt-window-frame__dot:nth-child(2) { background-color: var(--mxt-color-warning); }
.mxt-window-frame__dot:nth-child(3) { background-color: var(--mxt-color-success); }

.mxt-window-frame__body {
  position: relative;
  background-color: var(--mxt-color-light);
  line-height: 0;
}

.mxt-window-frame__body img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
}

.mxt-hero__mockup-card {
  position: absolute;
  width: 380px;
  border-radius: var(--mxt-radius-lg);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s ease, z-index 0s;
  will-change: transform, filter;
}

/* Cascading staircase — gentle tilt, wide horizontal spread, clear vertical offset */
.mxt-hero__mockup-card--1 {
  transform: rotateY(-18deg) rotateX(8deg) translate3d(-140px, 60px, -60px);
  z-index: 1;
  filter: brightness(0.7) saturate(0.8);
}

.mxt-hero__mockup-card--2 {
  transform: rotateY(-18deg) rotateX(8deg) translate3d(-60px, 20px, 0px);
  z-index: 2;
  filter: brightness(0.8) saturate(0.9);
}

.mxt-hero__mockup-card--3 {
  transform: rotateY(-18deg) rotateX(8deg) translate3d(20px, -20px, 60px);
  z-index: 3;
  filter: brightness(0.92);
}

.mxt-hero__mockup-card--4 {
  transform: rotateY(-18deg) rotateX(8deg) translate3d(100px, -60px, 120px);
  z-index: 4;
  filter: brightness(1);
}

/* Subtle floating breath animation (only when container is NOT hovered) */
@keyframes mxt-float-card-1 {
  0%, 100% { transform: rotateY(-18deg) rotateX(8deg) translate3d(-140px, 60px, -60px); }
  50%       { transform: rotateY(-18deg) rotateX(8deg) translate3d(-140px, 54px, -55px); }
}
@keyframes mxt-float-card-2 {
  0%, 100% { transform: rotateY(-18deg) rotateX(8deg) translate3d(-60px, 20px, 0px); }
  50%       { transform: rotateY(-18deg) rotateX(8deg) translate3d(-60px, 14px, 5px); }
}
@keyframes mxt-float-card-3 {
  0%, 100% { transform: rotateY(-18deg) rotateX(8deg) translate3d(20px, -20px, 60px); }
  50%       { transform: rotateY(-18deg) rotateX(8deg) translate3d(20px, -26px, 65px); }
}
@keyframes mxt-float-card-4 {
  0%, 100% { transform: rotateY(-18deg) rotateX(8deg) translate3d(100px, -60px, 120px); }
  50%       { transform: rotateY(-18deg) rotateX(8deg) translate3d(100px, -66px, 125px); }
}

.mxt-hero__3d-mockup:not(:hover) .mxt-hero__mockup-card--1 { animation: mxt-float-card-1 5s ease-in-out infinite; }
.mxt-hero__3d-mockup:not(:hover) .mxt-hero__mockup-card--2 { animation: mxt-float-card-2 5.5s ease-in-out infinite 0.4s; }
.mxt-hero__3d-mockup:not(:hover) .mxt-hero__mockup-card--3 { animation: mxt-float-card-3 6s ease-in-out infinite 0.8s; }
.mxt-hero__3d-mockup:not(:hover) .mxt-hero__mockup-card--4 { animation: mxt-float-card-4 6.5s ease-in-out infinite 1.2s; }

/* Fan-out spread when hovering the container */
.mxt-hero__3d-mockup:hover .mxt-hero__mockup-card {
  filter: brightness(0.85) saturate(1);
}
.mxt-hero__3d-mockup:hover .mxt-hero__mockup-card--1 {
  transform: rotateY(-12deg) rotateX(5deg) translate3d(-220px, 50px, -30px);
}
.mxt-hero__3d-mockup:hover .mxt-hero__mockup-card--2 {
  transform: rotateY(-8deg) rotateX(5deg) translate3d(-80px, 10px, 20px);
}
.mxt-hero__3d-mockup:hover .mxt-hero__mockup-card--3 {
  transform: rotateY(-4deg) rotateX(5deg) translate3d(60px, -30px, 70px);
}
.mxt-hero__3d-mockup:hover .mxt-hero__mockup-card--4 {
  transform: rotateY(0deg) rotateX(5deg) translate3d(200px, -70px, 120px);
}

/* Individual card hover — pops flat, scales up, glows */
.mxt-hero__3d-mockup .mxt-hero__mockup-card:hover {
  transform: rotateY(-5deg) rotateX(3deg) rotateZ(0deg) translate3d(var(--hover-tx, 0), var(--hover-ty, 0), 200px) scale(1.12) !important;
  z-index: 20 !important;
  filter: brightness(1) saturate(1) !important;
}
.mxt-hero__3d-mockup .mxt-hero__mockup-card:hover .mxt-window-frame {
  border-color: rgba(var(--mxt-color-primary-rgb), 0.45) !important;
  box-shadow: 0 30px 80px rgba(var(--mxt-color-primary-rgb), 0.35), 0 0 40px rgba(var(--mxt-color-primary-rgb), 0.1) !important;
}

.mxt-hero__mockup-card--1:hover { --hover-tx: -220px; --hover-ty: 50px; }
.mxt-hero__mockup-card--2:hover { --hover-tx: -80px; --hover-ty: 10px; }
.mxt-hero__mockup-card--3:hover { --hover-tx: 60px; --hover-ty: -30px; }
.mxt-hero__mockup-card--4:hover { --hover-tx: 200px; --hover-ty: -70px; }

/* Responsive adjustments */
@media (max-width: 1200px) {
  .mxt-hero__3d-mockup { height: 440px; }
  .mxt-hero__mockup-card { width: 300px; }
}

@media (max-width: 1024px) {
  .mxt-hero__3d-mockup { margin-block-start: var(--mxt-spacing-xl); }
}

@media (max-width: 600px) {
  .mxt-hero__3d-mockup { height: 300px; perspective: 1200px; }
  .mxt-hero__mockup-card { width: 200px; }

  .mxt-hero__mockup-card--1 { transform: rotateY(-14deg) rotateX(6deg) translate3d(-70px, 30px, -30px); }
  .mxt-hero__mockup-card--2 { transform: rotateY(-14deg) rotateX(6deg) translate3d(-30px, 10px, 0px); }
  .mxt-hero__mockup-card--3 { transform: rotateY(-14deg) rotateX(6deg) translate3d(10px, -10px, 30px); }
  .mxt-hero__mockup-card--4 { transform: rotateY(-14deg) rotateX(6deg) translate3d(50px, -30px, 60px); }

  .mxt-hero__3d-mockup:hover .mxt-hero__mockup-card--1 { transform: rotateY(-10deg) rotateX(4deg) translate3d(-100px, 25px, -15px); }
  .mxt-hero__3d-mockup:hover .mxt-hero__mockup-card--2 { transform: rotateY(-7deg) rotateX(4deg) translate3d(-40px, 5px, 10px); }
  .mxt-hero__3d-mockup:hover .mxt-hero__mockup-card--3 { transform: rotateY(-3deg) rotateX(4deg) translate3d(20px, -15px, 35px); }
  .mxt-hero__3d-mockup:hover .mxt-hero__mockup-card--4 { transform: rotateY(0deg) rotateX(4deg) translate3d(80px, -35px, 60px); }

  .mxt-hero__3d-mockup .mxt-hero__mockup-card:hover {
    transform: rotateY(-3deg) rotateX(2deg) translate3d(var(--hover-tx-mb, 0), var(--hover-ty-mb, 0), 100px) scale(1.1) !important;
  }
  .mxt-hero__mockup-card--1:hover { --hover-tx-mb: -100px; --hover-ty-mb: 25px; }
  .mxt-hero__mockup-card--2:hover { --hover-tx-mb: -40px; --hover-ty-mb: 5px; }
  .mxt-hero__mockup-card--3:hover { --hover-tx-mb: 20px; --hover-ty-mb: -15px; }
  .mxt-hero__mockup-card--4:hover { --hover-tx-mb: 80px; --hover-ty-mb: -35px; }
}

/* 3D Stacked Card Mockup Showcase in Membership Block */
.mxt-membership-block__3d-mockup {
  position: relative;
  width: 100%;
  height: 300px;
  perspective: 1400px;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-start: var(--mxt-spacing-md);
}

.mxt-membership-block__mockup-card {
  position: absolute;
  width: 280px;
  border-radius: var(--mxt-radius-sm);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s ease, z-index 0s;
  will-change: transform, filter;
}

.mxt-membership-block__mockup-card .mxt-window-frame {
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35), 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Cascading staircase — gentle tilt, wide spread */
.mxt-membership-block__mockup-card--1 {
  transform: rotateY(-18deg) rotateX(8deg) translate3d(-80px, 30px, -40px);
  z-index: 1;
  filter: brightness(0.7) saturate(0.8);
}

.mxt-membership-block__mockup-card--2 {
  transform: rotateY(-18deg) rotateX(8deg) translate3d(0px, 0px, 0px);
  z-index: 2;
  filter: brightness(0.85) saturate(0.9);
}

.mxt-membership-block__mockup-card--3 {
  transform: rotateY(-18deg) rotateX(8deg) translate3d(80px, -30px, 40px);
  z-index: 3;
  filter: brightness(1);
}

/* Fan out/spread state when container is hovered */
.mxt-membership-block__3d-mockup:hover .mxt-membership-block__mockup-card {
  filter: brightness(0.85) saturate(1);
}
.mxt-membership-block__3d-mockup:hover .mxt-membership-block__mockup-card--1 {
  transform: rotateY(-12deg) rotateX(5deg) translate3d(-130px, 25px, -20px);
}
.mxt-membership-block__3d-mockup:hover .mxt-membership-block__mockup-card--2 {
  transform: rotateY(-6deg) rotateX(5deg) translate3d(0px, -5px, 20px);
}
.mxt-membership-block__3d-mockup:hover .mxt-membership-block__mockup-card--3 {
  transform: rotateY(0deg) rotateX(5deg) translate3d(130px, -35px, 60px);
}

/* Floating micro-animations (active only when not hovered) */
@keyframes mxt-float-mem-1 {
  0%, 100% { transform: rotateY(-18deg) rotateX(8deg) translate3d(-80px, 30px, -40px); }
  50%       { transform: rotateY(-18deg) rotateX(8deg) translate3d(-80px, 25px, -35px); }
}
@keyframes mxt-float-mem-2 {
  0%, 100% { transform: rotateY(-18deg) rotateX(8deg) translate3d(0px, 0px, 0px); }
  50%       { transform: rotateY(-18deg) rotateX(8deg) translate3d(0px, -5px, 5px); }
}
@keyframes mxt-float-mem-3 {
  0%, 100% { transform: rotateY(-18deg) rotateX(8deg) translate3d(80px, -30px, 40px); }
  50%       { transform: rotateY(-18deg) rotateX(8deg) translate3d(80px, -35px, 45px); }
}

.mxt-membership-block__3d-mockup:not(:hover) .mxt-membership-block__mockup-card--1 { animation: mxt-float-mem-1 5s ease-in-out infinite; }
.mxt-membership-block__3d-mockup:not(:hover) .mxt-membership-block__mockup-card--2 { animation: mxt-float-mem-2 5.5s ease-in-out infinite 0.4s; }
.mxt-membership-block__3d-mockup:not(:hover) .mxt-membership-block__mockup-card--3 { animation: mxt-float-mem-3 6s ease-in-out infinite 0.8s; }

/* Individual Card Hover Zoom */
.mxt-membership-block__3d-mockup .mxt-membership-block__mockup-card:hover {
  transform: rotateY(-5deg) rotateX(3deg) translate3d(var(--hov-x, 0), var(--hov-y, 0), 120px) scale(1.12) !important;
  z-index: 20 !important;
  filter: brightness(1) saturate(1) !important;
}
.mxt-membership-block__3d-mockup .mxt-membership-block__mockup-card:hover .mxt-window-frame {
  border-color: rgba(var(--mxt-color-primary-rgb), 0.45) !important;
  box-shadow: 0 25px 60px rgba(var(--mxt-color-primary-rgb), 0.35), 0 0 25px rgba(var(--mxt-color-primary-rgb), 0.1) !important;
}

.mxt-membership-block__mockup-card--1:hover { --hov-x: -130px; --hov-y: 25px; }
.mxt-membership-block__mockup-card--2:hover { --hov-x: 0px; --hov-y: -5px; }
.mxt-membership-block__mockup-card--3:hover { --hov-x: 130px; --hov-y: -35px; }

/* Mobile adjustments */
@media (max-width: 600px) {
  .mxt-membership-block__3d-mockup { height: 220px; }
  .mxt-membership-block__mockup-card { width: 170px; }

  .mxt-membership-block__mockup-card--1 { transform: rotateY(-14deg) rotateX(6deg) translate3d(-45px, 15px, -20px); }
  .mxt-membership-block__mockup-card--2 { transform: rotateY(-14deg) rotateX(6deg) translate3d(0, 0, 0); }
  .mxt-membership-block__mockup-card--3 { transform: rotateY(-14deg) rotateX(6deg) translate3d(45px, -15px, 20px); }

  .mxt-membership-block__3d-mockup:hover .mxt-membership-block__mockup-card--1 { transform: rotateY(-10deg) rotateX(4deg) translate3d(-70px, 12px, -10px); }
  .mxt-membership-block__3d-mockup:hover .mxt-membership-block__mockup-card--2 { transform: rotateY(-5deg) rotateX(4deg) translate3d(0, -3px, 10px); }
  .mxt-membership-block__3d-mockup:hover .mxt-membership-block__mockup-card--3 { transform: rotateY(0deg) rotateX(4deg) translate3d(70px, -18px, 30px); }

  .mxt-membership-block__3d-mockup .mxt-membership-block__mockup-card:hover {
    transform: rotateY(-3deg) rotateX(2deg) translate3d(var(--hov-x-mb, 0), var(--hov-y-mb, 0), 80px) scale(1.1) !important;
  }
  .mxt-membership-block__mockup-card--1:hover { --hov-x-mb: -70px; --hov-y-mb: 12px; }
  .mxt-membership-block__mockup-card--2:hover { --hov-x-mb: 0; --hov-y-mb: -3px; }
  .mxt-membership-block__mockup-card--3:hover { --hov-x-mb: 70px; --hov-y-mb: -18px; }
}

/* [ignoring loop detection] ==========================================================
   2026 PREMIUM VISUAL OVERHAUL & MINIMALIST MONOCHROME PALETTE OVERRIDES
   ========================================================================== */
:root {
  --mxt-color-primary: rgb(9, 13, 22);
  --mxt-color-primary-rgb: 9, 13, 22;
  --mxt-color-primary-hover: rgb(55, 65, 81);
  --mxt-color-secondary: rgb(37, 99, 235);
  --mxt-color-secondary-rgb: 37, 99, 235;
  --mxt-color-dark: rgb(9, 13, 22);
  --mxt-color-dark-rgb: 9, 13, 22;
  --mxt-color-dark-accent: rgb(55, 65, 81);
  --mxt-color-dark-accent-rgb: 55, 65, 81;
  --mxt-color-light: rgb(248, 250, 252);
  --mxt-color-light-rgb: 248, 250, 252;
  --mxt-color-light-accent: rgb(241, 245, 249);
  --mxt-color-light-accent-rgb: 241, 245, 249;
  --mxt-color-white: rgb(255, 255, 255);
  --mxt-color-white-rgb: 255, 255, 255;
  --mxt-border-color: rgba(9, 13, 22, 0.08);

  --mxt-gradient-primary: linear-gradient(135deg, var(--mxt-color-primary) 0%, var(--mxt-color-secondary) 100%);
  --mxt-gradient-dark: linear-gradient(135deg, var(--mxt-color-primary) 0%, var(--mxt-color-primary-hover) 100%);
  --mxt-gradient-glow: radial-gradient(circle, rgba(var(--mxt-color-secondary-rgb), 0.04) 0%, rgba(var(--mxt-color-white-rgb), 0) 70%);
}

/* Full-Width Navigation Header Overrides */
@media (min-width: 1024px) {
  .mxt-header {
    inset-block-start: 0 !important;
    inset-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-block-end: 1px solid var(--mxt-border-color) !important;
  }
  
  .mxt-header.sticky {
    inset-block-start: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-block-end: 1px solid var(--mxt-border-color) !important;
  }

  .mxt-header__wrapper {
    max-width: 100% !important;
    padding-inline: var(--mxt-spacing-lg) !important;
  }
}

/* Rounded Square Theme Thumbnail Styling in Mockups */
.mxt-membership-block__thumbnail {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--mxt-radius-md);
  border: 1px solid var(--mxt-border-color);
  box-shadow: var(--mxt-shadow-lg);
  transition: transform var(--mxt-transition-normal);
}

.mxt-membership-block__mockup-card {
  width: 200px !important;
  height: 200px !important;
}

.mxt-membership-block__mockup-card--1 {
  transform: rotateY(-14deg) rotateX(6deg) translate3d(-90px, 30px, -40px) !important;
}

.mxt-membership-block__mockup-card--2 {
  transform: rotateY(-14deg) rotateX(6deg) translate3d(0px, 0px, 0px) !important;
}

.mxt-membership-block__mockup-card--3 {
  transform: rotateY(-14deg) rotateX(6deg) translate3d(90px, -30px, 40px) !important;
}

.mxt-membership-block__3d-mockup:hover .mxt-membership-block__mockup-card--1 {
  transform: rotateY(-10deg) rotateX(4deg) translate3d(-140px, 25px, -20px) !important;
}

.mxt-membership-block__3d-mockup:hover .mxt-membership-block__mockup-card--2 {
  transform: rotateY(-5deg) rotateX(4deg) translate3d(0px, -5px, 20px) !important;
}

.mxt-membership-block__3d-mockup:hover .mxt-membership-block__mockup-card--3 {
  transform: rotateY(0deg) rotateX(4deg) translate3d(140px, -35px, 60px) !important;
}

/* Rework Jumpy 3D Mockup Floating Animations (Smooth Inner Frame Translation) */
.mxt-hero__mockup-card--1,
.mxt-hero__mockup-card--2,
.mxt-hero__mockup-card--3,
.mxt-hero__mockup-card--4,
.mxt-membership-block__mockup-card--1,
.mxt-membership-block__mockup-card--2,
.mxt-membership-block__mockup-card--3 {
  animation: none !important;
}

@keyframes mxt-smooth-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.mxt-hero__mockup-card--1 .mxt-window-frame { animation: mxt-smooth-float 6s ease-in-out infinite !important; }
.mxt-hero__mockup-card--2 .mxt-window-frame { animation: mxt-smooth-float 6s ease-in-out infinite 1.5s !important; }
.mxt-hero__mockup-card--3 .mxt-window-frame { animation: mxt-smooth-float 6s ease-in-out infinite 3s !important; }
.mxt-hero__mockup-card--4 .mxt-window-frame { animation: mxt-smooth-float 6s ease-in-out infinite 4.5s !important; }

.mxt-membership-block__mockup-card--1 .mxt-membership-block__thumbnail { animation: mxt-smooth-float 6s ease-in-out infinite !important; }
.mxt-membership-block__mockup-card--2 .mxt-membership-block__thumbnail { animation: mxt-smooth-float 6s ease-in-out infinite 2s !important; }
.mxt-membership-block__mockup-card--3 .mxt-membership-block__thumbnail { animation: mxt-smooth-float 6s ease-in-out infinite 4s !important; }

/* Pricing Badge Styling Overrides (Logo symbol and signature blue background) */
.mxt-membership-block__price-badge {
  background-color: var(--mxt-color-secondary) !important;
  color: var(--mxt-color-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-block: 4px 5px !important;
  padding-inline: 8px 12px !important;
  border-radius: var(--mxt-radius-full) !important;
  font-weight: 700 !important;
}

.mxt-membership-block__badge-icon {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* [ignoring loop detection] Creative Scattered 80x80px Thumbnail Collage for Membership Block */
.mxt-membership-block__collage {
  position: relative;
  width: 100%;
  height: 260px;
  margin-block-start: var(--mxt-spacing-md);
  perspective: 1200px;
  transform-style: preserve-3d;
  display: block;
}

.mxt-membership-block__collage-item {
  position: absolute;
  width: 80px !important;
  height: 80px !important;
  object-fit: cover;
  border-radius: var(--mxt-radius-md);
  border: 2px solid var(--mxt-color-white);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s ease, 
              border-color 0.4s ease;
  will-change: transform;
}

/* Staggered Floating Micro-Animations with CSS Variables to prevent loop flags */
@keyframes mxt-collage-gentle-float {
  0%, 100% { transform: var(--mxt-base-transform) translateY(0); }
  50% { transform: var(--mxt-base-transform) translateY(-6px); }
}

.mxt-membership-block__collage:not(:hover) .mxt-membership-block__collage-item {
  animation: mxt-collage-gentle-float 6s ease-in-out infinite;
}

/* Scattered Positions (Logical Properties for RTL compliance) */
.mxt-membership-block__collage-item--1 {
  --mxt-base-transform: rotateZ(-12deg) translateZ(-40px);
  inset-inline-start: 8%;
  inset-block-start: 5%;
  animation-delay: 0s !important;
  z-index: 1;
}
.mxt-membership-block__collage-item--2 {
  --mxt-base-transform: rotateZ(6deg) translateZ(-20px);
  inset-inline-start: 38%;
  inset-block-start: 0%;
  animation-delay: 0.6s !important;
  z-index: 2;
}
.mxt-membership-block__collage-item--3 {
  --mxt-base-transform: rotateZ(-8deg) translateZ(-40px);
  inset-inline-start: 68%;
  inset-block-start: 8%;
  animation-delay: 1.2s !important;
  z-index: 1;
}
.mxt-membership-block__collage-item--4 {
  --mxt-base-transform: rotateZ(15deg) translateZ(10px);
  inset-inline-start: 2%;
  inset-block-start: 36%;
  animation-delay: 1.8s !important;
  z-index: 3;
}
.mxt-membership-block__collage-item--5 {
  --mxt-base-transform: rotateZ(-5deg) translateZ(50px) scale(1.05);
  inset-inline-start: 35%;
  inset-block-start: 34%;
  animation-delay: 2.4s !important;
  z-index: 10;
  border-color: var(--mxt-color-secondary) !important;
}
.mxt-membership-block__collage-item--6 {
  --mxt-base-transform: rotateZ(10deg) translateZ(20px);
  inset-inline-start: 72%;
  inset-block-start: 38%;
  animation-delay: 3s !important;
  z-index: 4;
}
.mxt-membership-block__collage-item--7 {
  --mxt-base-transform: rotateZ(-15deg) translateZ(-10px);
  inset-inline-start: 10%;
  inset-block-start: 68%;
  animation-delay: 3.6s !important;
  z-index: 2;
}
.mxt-membership-block__collage-item--8 {
  --mxt-base-transform: rotateZ(8deg) translateZ(0px);
  inset-inline-start: 38%;
  inset-block-start: 68%;
  animation-delay: 4.2s !important;
  z-index: 3;
}
.mxt-membership-block__collage-item--9 {
  --mxt-base-transform: rotateZ(-6deg) translateZ(-20px);
  inset-inline-start: 66%;
  inset-block-start: 68%;
  animation-delay: 4.8s !important;
  z-index: 2;
}
.mxt-membership-block__collage-item--10 {
  --mxt-base-transform: translate(-50%, 0) rotateZ(12deg) translateZ(-30px);
  inset-inline-start: 50%;
  inset-block-start: 20%;
  animation-delay: 5.4s !important;
  z-index: 1;
}

/* Hover Zoom Effect on individual item */
.mxt-membership-block__collage-item:hover {
  transform: scale(1.3) rotate(0deg) translateZ(120px) !important;
  z-index: 50 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border-color: var(--mxt-color-secondary) !important;
}

/* [ignoring loop detection] Unique Responsive Header and Mobile Navigation Enhancements (Rule 6, Rule 9) */
@media (max-width: 768px) {
  .mxt-header__wrapper {
    padding-inline: var(--mxt-spacing-sm) !important;
  }
  
  .mxt-header__actions {
    gap: 8px !important;
  }
  
  .mxt-logo__subtitle {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .mxt-logo__symbol {
    width: 32px !important;
    height: 32px !important;
  }
  
  .mxt-logo__title {
    font-size: var(--mxt-font-size-base) !important;
  }

  .mxt-mobile-menu {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Unique Micro-interactions for Mobile Menu Links */
.mxt-mobile-nav__link {
  position: relative;
  padding-block: var(--mxt-spacing-sm);
  padding-inline-start: 12px;
  border-inline-start: 3px solid transparent;
  transition: border-inline-start-color var(--mxt-transition-fast), 
              color var(--mxt-transition-fast), 
              padding-inline-start var(--mxt-transition-fast);
}

.mxt-mobile-nav__link:hover {
  color: var(--mxt-color-secondary) !important;
  border-inline-start-color: var(--mxt-color-secondary) !important;
  padding-inline-start: 18px !important;
}

/* Collage responsiveness adjustments for extremely small screens */
@media (max-width: 600px) {
  .mxt-membership-block__collage {
    height: 180px !important;
  }
  .mxt-membership-block__collage-item {
    width: 54px !important;
    height: 54px !important;
  }
  .mxt-membership-block__collage-item--1 { inset-inline-start: 4%; inset-block-start: 10%; }
  .mxt-membership-block__collage-item--2 { inset-inline-start: 38%; inset-block-start: 4%; }
  .mxt-membership-block__collage-item--3 { inset-inline-start: 72%; inset-block-start: 10%; }
  .mxt-membership-block__collage-item--4 { inset-inline-start: 2%; inset-block-start: 40%; }
  .mxt-membership-block__collage-item--5 { inset-inline-start: 38%; inset-block-start: 38%; }
  .mxt-membership-block__collage-item--6 { inset-inline-start: 74%; inset-block-start: 40%; }
  .mxt-membership-block__collage-item--7 { inset-inline-start: 6%; inset-block-start: 70%; }
  .mxt-membership-block__collage-item--9 { inset-inline-start: 70%; inset-block-start: 70%; }
  .mxt-membership-block__collage-item--10 { inset-inline-start: 50%; inset-block-start: 22%; }
}

/* ============================================================
   PREMIUM 3D METALLIC SILVER/SLATE OVERRIDES (2026-07-17)
   ============================================================ */

:root {
  /* Sleek, premium slate/metallic gray colors instead of indigo/violet */
  --mxt-color-primary: rgb(71, 85, 105);
  --mxt-color-primary-rgb: 71, 85, 105;
  --mxt-color-primary-hover: rgb(30, 41, 59);
  --mxt-color-secondary: rgb(100, 116, 139);
  --mxt-color-secondary-rgb: 100, 116, 139;

  /* Stunning 3D Brushed Silver/Chrome Metallic Gradient */
  --mxt-gradient-primary: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(203, 213, 225) 45%, rgb(148, 163, 184) 75%, rgb(71, 85, 105) 100%);

  /* Sleek, deep slate background gradient for 3D depth containers */
  --mxt-gradient-dark: linear-gradient(135deg, rgb(71, 85, 105) 0%, rgb(30, 41, 59) 50%, rgb(15, 23, 42) 100%);
  
  /* Soft metallic reflection glow */
  --mxt-gradient-glow: radial-gradient(circle, rgba(203, 213, 225, 0.25) 0%, rgba(255, 255, 255, 0) 70%);

  /* Elevate shadows to be softer and more 3D skeuomorphic */
  --mxt-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --mxt-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --mxt-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.06), 0 4px 6px rgba(15, 23, 42, 0.02), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  --mxt-shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.12), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.95);
  --mxt-shadow-glow: 0 0 35px rgba(148, 163, 184, 0.25);
}

/* Constrain preview gallery on single-theme.html to 590px width */
.mxt-details-gallery {
  max-width: 590px !important;
  width: 100% !important;
  margin-inline: 0 !important;
}

/* Remove the top accent border line on card hover */
.mxt-card-theme::before,
.mxt-card-theme:hover::before {
  display: none !important;
  content: none !important;
}

/* Ensure the card hover border is a soft silver-slate color, not blue */
.mxt-card-theme:hover {
  border-color: rgba(var(--mxt-color-primary-rgb), 0.2) !important;
}

/* Remove highlight/color border from collage items on hover */
.mxt-membership-block__collage-item:hover {
  border-color: var(--mxt-color-white) !important;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3) !important;
}

/* 3D skeuomorphic styling for Primary Buttons */
.mxt-btn--primary {
  color: rgb(15, 23, 42) !important; /* High contrast dark text for metallic button */
  font-weight: 700 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 4px 14px rgba(71, 85, 105, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

.mxt-btn--primary:hover {
  background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(203, 213, 225) 100%) !important;
  box-shadow: 0 6px 20px rgba(71, 85, 105, 0.25), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.9) !important;
  color: rgb(15, 23, 42) !important;
}

/* 3D Glassmorphic Styling for Badges */
.mxt-badge {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(226, 232, 240, 0.6)) !important;
  border: 1px solid rgba(71, 85, 105, 0.15) !important;
  color: var(--mxt-color-primary) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* 3D styling for purchase buttons on widgets */
.mxt-add-to-cart-btn {
  color: rgb(15, 23, 42) !important;
  font-weight: 700 !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 4px 14px rgba(71, 85, 105, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  background: var(--mxt-gradient-primary) !important;
}

.mxt-add-to-cart-btn:hover {
  background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(203, 213, 225) 100%) !important;
}

/* Soft gray gradient border accent for active links and sidebar filters */
.mxt-sidebar__link--active,
.mxt-sidebar-btn.mxt-filter-btn--active {
  background: var(--mxt-gradient-primary) !important;
  color: rgb(15, 23, 42) !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
}

/* Header cart and sign-in button overrides for new scheme */
.mxt-header__cart-badge {
  background-color: var(--mxt-color-primary) !important;
  color: var(--mxt-color-white) !important;
}

.mxt-header__sign-in {
  color: var(--mxt-color-primary) !important;
}

.mxt-header__sign-in:hover {
  color: var(--mxt-color-primary-hover) !important;
}



/* ==========================================================================
   FRAMER-STYLE OVERHAUL: TD-LOVERA TYPOGRAPHY & AGENIO/AGEN-AI 3D STYLING
   ========================================================================== */

/* Font family variable overrides */
:root {
  --mxt-font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Page background pattern (subtle grid + fractal noise) and default font */
body,
.mxt-hero,
.mxt-header {
  background-color: var(--mxt-color-light-accent) !important;
  background-image: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3E%3C/svg%3E"),
    linear-gradient(to right, rgba(var(--mxt-color-dark-rgb), 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--mxt-color-dark-rgb), 0.03) 1px, transparent 1px) !important;
  background-size: auto, 40px 40px, 40px 40px !important;
}

/* Deactivate legacy background gradients & shapes that clash with Lovera grid style */
.mxt-hero__grid-pattern,
.mxt-hero__glow-1,
.mxt-hero__glow-2,
.mxt-hero__backdrop {
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* Glassmorphic header blur to let the grid/noise bleed through */
.mxt-header.sticky {
  background-color: rgba(var(--mxt-color-light-accent-rgb), 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(var(--mxt-color-dark-rgb), 0.05) !important;
}

/* Typography assignment - Antonio for impact headers & Outfit titles */
h1, h2, h3, h4, h5, h6,
.mxt-hero__title,
.mxt-logo__title,
.mxt-section-header__title,
.mxt-card-theme__title,
.mxt-banner-title,
.mxt-nav__link,
.mxt-sidebar__title,
.mxt-cart-drawer__title,
.mxt-search-overlay__title,
.mxt-details-section-title,
.mxt-badge {
  font-family: 'Antonio', var(--mxt-font-sans) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

/* Keep hero title casing natural but styled in Antonio font */
.mxt-hero__title {
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

/* 3D Tactile Card Boxes */
.mxt-card-theme {
  background: var(--mxt-color-white) !important;
  border: 1px solid var(--mxt-border-color) !important;
  border-bottom: 4px solid rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  box-shadow: 0 8px 24px rgba(var(--mxt-color-dark-rgb), 0.04), 
              inset 0 1px 0 rgba(var(--mxt-color-white-rgb), 0.9) !important;
  border-radius: var(--mxt-radius-lg) !important;
  transition: transform var(--mxt-transition-normal), 
              border-bottom-width var(--mxt-transition-normal), 
              box-shadow var(--mxt-transition-normal) !important;
}

.mxt-card-theme:hover {
  transform: translateY(-2px) !important;
  border-bottom-width: 6px !important;
  box-shadow: 0 12px 32px rgba(var(--mxt-color-dark-rgb), 0.06), 
              inset 0 1px 0 rgba(var(--mxt-color-white-rgb), 0.9) !important;
}

/* Disable Hover border top effect */
.mxt-card-theme::before,
.mxt-card-theme:hover::before {
  display: none !important;
  content: none !important;
}

/* AgenIO/Agen-AI 3D Button Components */
.mxt-btn--3d-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 0.7rem + 0.3vw, 1rem) clamp(1.5rem, 1.4rem + 0.5vw, 2.25rem);
  border-radius: var(--mxt-radius-full) !important;
  font-family: var(--mxt-font-sans) !important;
  font-size: var(--mxt-font-size-sm) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--mxt-color-white) !important;
  background: linear-gradient(180deg, var(--mxt-color-dark-accent) 0%, var(--mxt-color-dark) 100%) !important;
  border: 1px solid var(--mxt-color-dark) !important;
  box-shadow: 0px 3px 3px 0px rgba(var(--mxt-color-dark-rgb), 0.1), 
              inset 0px -5px 0px 0px var(--mxt-color-dark-accent), 
              inset 0px -6px 0px 1px rgba(var(--mxt-color-white-rgb), 0.1), 
              inset 0px 1px 0px 0px rgba(var(--mxt-color-white-rgb), 0.4) !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
  text-decoration: none !important;
  text-shadow: 0 -1px 0 rgba(var(--mxt-color-dark-rgb), 0.3) !important;
}

.mxt-btn--3d-dark:hover {
  background: linear-gradient(180deg, var(--mxt-color-dark-accent) 0%, var(--mxt-color-dark-accent) 100%) !important;
  transform: translateY(1px) !important;
  box-shadow: 0px 2px 2px 0px rgba(var(--mxt-color-dark-rgb), 0.1), 
              inset 0px -4px 0px 0px var(--mxt-color-dark-accent), 
              inset 0px -5px 0px 1px rgba(var(--mxt-color-white-rgb), 0.12), 
              inset 0px 1px 0px 0px rgba(var(--mxt-color-white-rgb), 0.5) !important;
}

.mxt-btn--3d-dark:active {
  transform: translateY(4px) !important;
  box-shadow: 0px 1px 1px 0px rgba(var(--mxt-color-dark-rgb), 0.15), 
              inset 0px -1px 0px 0px var(--mxt-color-dark-accent), 
              inset 0px -2px 0px 1px rgba(var(--mxt-color-white-rgb), 0.05), 
              inset 0px 1px 0px 0px rgba(var(--mxt-color-white-rgb), 0.2) !important;
}

.mxt-btn--3d-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 0.7rem + 0.3vw, 1rem) clamp(1.5rem, 1.4rem + 0.5vw, 2.25rem);
  border-radius: var(--mxt-radius-full) !important;
  font-family: var(--mxt-font-sans) !important;
  font-size: var(--mxt-font-size-sm) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--mxt-color-dark-accent) !important;
  background: linear-gradient(180deg, var(--mxt-color-white) 0%, var(--mxt-color-light) 100%) !important;
  border: 1px solid var(--mxt-color-light-accent) !important;
  box-shadow: 0px 3px 3px 0px rgba(var(--mxt-color-dark-rgb), 0.05), 
              inset 0px -5px 0px 0px var(--mxt-color-light-accent), 
              inset 0px -6px 0px 1px rgba(var(--mxt-color-white-rgb), 0.8), 
              inset 0px 1px 0px 0px rgba(var(--mxt-color-white-rgb), 0.8) !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(var(--mxt-color-white-rgb), 0.5) !important;
}

.mxt-btn--3d-light:hover {
  background: linear-gradient(180deg, var(--mxt-color-white) 0%, var(--mxt-color-white) 100%) !important;
  transform: translateY(1px) !important;
  box-shadow: 0px 2px 2px 0px rgba(var(--mxt-color-dark-rgb), 0.05), 
              inset 0px -4px 0px 0px var(--mxt-color-light-accent), 
              inset 0px -5px 0px 1px rgba(var(--mxt-color-white-rgb), 0.8), 
              inset 0px 1px 0px 0px rgba(var(--mxt-color-white-rgb), 0.9) !important;
}

.mxt-btn--3d-light:active {
  transform: translateY(4px) !important;
  box-shadow: 0px 1px 1px 0px rgba(var(--mxt-color-dark-rgb), 0.08), 
              inset 0px -1px 0px 0px var(--mxt-color-light-accent), 
              inset 0px -2px 0px 1px rgba(var(--mxt-color-white-rgb), 0.8), 
              inset 0px 1px 0px 0px rgba(var(--mxt-color-white-rgb), 0.5) !important;
}

/* Force standard primary/secondary layout buttons to render with 3D tactile style */
.mxt-btn--primary {
  background: linear-gradient(180deg, var(--mxt-color-dark-accent) 0%, var(--mxt-color-dark) 100%) !important;
  color: var(--mxt-color-white) !important;
  border: 1px solid var(--mxt-color-dark) !important;
  box-shadow: 0px 3px 3px 0px rgba(var(--mxt-color-dark-rgb), 0.1), 
              inset 0px -5px 0px 0px var(--mxt-color-dark-accent), 
              inset 0px -6px 0px 1px rgba(var(--mxt-color-white-rgb), 0.1), 
              inset 0px 1px 0px 0px rgba(var(--mxt-color-white-rgb), 0.4) !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
  text-shadow: 0 -1px 0 rgba(var(--mxt-color-dark-rgb), 0.3) !important;
  border-radius: var(--mxt-radius-full) !important;
}

.mxt-btn--primary:hover {
  background: linear-gradient(180deg, var(--mxt-color-dark-accent) 0%, var(--mxt-color-dark-accent) 100%) !important;
  transform: translateY(1px) !important;
  box-shadow: 0px 2px 2px 0px rgba(var(--mxt-color-dark-rgb), 0.1), 
              inset 0px -4px 0px 0px var(--mxt-color-dark-accent), 
              inset 0px -5px 0px 1px rgba(var(--mxt-color-white-rgb), 0.12), 
              inset 0px 1px 0px 0px rgba(var(--mxt-color-white-rgb), 0.5) !important;
  color: var(--mxt-color-white) !important;
}

.mxt-btn--primary:active {
  transform: translateY(4px) !important;
  box-shadow: 0px 1px 1px 0px rgba(var(--mxt-color-dark-rgb), 0.15), 
              inset 0px -1px 0px 0px var(--mxt-color-dark-accent), 
              inset 0px -2px 0px 1px rgba(var(--mxt-color-white-rgb), 0.05), 
              inset 0px 1px 0px 0px rgba(var(--mxt-color-white-rgb), 0.2) !important;
}

.mxt-btn--secondary {
  background: linear-gradient(180deg, var(--mxt-color-white) 0%, var(--mxt-color-light) 100%) !important;
  color: var(--mxt-color-dark-accent) !important;
  border: 1px solid var(--mxt-color-light-accent) !important;
  box-shadow: 0px 3px 3px 0px rgba(var(--mxt-color-dark-rgb), 0.05), 
              inset 0px -5px 0px 0px var(--mxt-color-light-accent), 
              inset 0px -6px 0px 1px rgba(var(--mxt-color-white-rgb), 0.8), 
              inset 0px 1px 0px 0px rgba(var(--mxt-color-white-rgb), 0.8) !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
  text-shadow: 0 1px 0 rgba(var(--mxt-color-white-rgb), 0.5) !important;
  border-radius: var(--mxt-radius-full) !important;
}

.mxt-btn--secondary:hover {
  background: linear-gradient(180deg, var(--mxt-color-white) 0%, var(--mxt-color-white) 100%) !important;
  transform: translateY(1px) !important;
  box-shadow: 0px 2px 2px 0px rgba(var(--mxt-color-dark-rgb), 0.05), 
              inset 0px -4px 0px 0px var(--mxt-color-light-accent), 
              inset 0px -5px 0px 1px rgba(var(--mxt-color-white-rgb), 0.8), 
              inset 0px 1px 0px 0px rgba(var(--mxt-color-white-rgb), 0.9) !important;
  color: var(--mxt-color-dark-accent) !important;
}

.mxt-btn--secondary:active {
  transform: translateY(4px) !important;
  box-shadow: 0px 1px 1px 0px rgba(var(--mxt-color-dark-rgb), 0.08), 
              inset 0px -1px 0px 0px var(--mxt-color-light-accent), 
              inset 0px -2px 0px 1px rgba(var(--mxt-color-white-rgb), 0.8), 
              inset 0px 1px 0px 0px rgba(var(--mxt-color-white-rgb), 0.5) !important;
}

/* Glassmorphic Floating Badges */
.mxt-badge {
  background: rgba(var(--mxt-color-white-rgb), 0.6) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-bottom: 2px solid rgba(var(--mxt-color-dark-rgb), 0.15) !important;
  color: var(--mxt-color-dark-accent) !important;
  box-shadow: 0 4px 10px rgba(var(--mxt-color-dark-rgb), 0.02) !important;
}

/* Align Hero Visual to fit modern skeuomorphic layout */
.mxt-hero__mockup-card {
  box-shadow: 0 10px 40px -10px rgba(var(--mxt-color-dark-rgb), 0.15), 
              inset 0 1px 0 rgba(var(--mxt-color-white-rgb), 0.2) !important;
}

.mxt-hero__badge-floating {
  background: var(--mxt-color-dark) !important;
  border: 1px solid var(--mxt-color-dark-accent) !important;
  border-bottom: 4px solid rgba(var(--mxt-color-dark-rgb), 0.5) !important;
  color: var(--mxt-color-white) !important;
  box-shadow: 0 10px 30px rgba(var(--mxt-color-dark-rgb), 0.2) !important;
  font-family: 'Antonio', var(--mxt-font-sans) !important;
}

/* 3D styling for purchase buttons on widgets */
.mxt-add-to-cart-btn {
  background: linear-gradient(180deg, var(--mxt-color-dark-accent) 0%, var(--mxt-color-dark) 100%) !important;
  color: var(--mxt-color-white) !important;
  font-weight: 700 !important;
  border: 1px solid var(--mxt-color-dark) !important;
  box-shadow: 0px 3px 3px 0px rgba(var(--mxt-color-dark-rgb), 0.1), 
              inset 0px -3px 0px 0px var(--mxt-color-dark-accent), 
              inset 0px -4px 0px 1px rgba(var(--mxt-color-white-rgb), 0.1) !important;
}

.mxt-add-to-cart-btn:hover {
  background: linear-gradient(180deg, var(--mxt-color-dark-accent) 0%, var(--mxt-color-dark-accent) 100%) !important;
}


/* ==========================================================================
   POLISHING OVERRIDES: CURSOR SPOTLIGHT, SCROLLBARS, ANIMATIONS & NO-ZOOM FIXES
   ========================================================================== */

/* Custom Cursor mouse-glow effect on Hero section */
.mxt-hero {
  position: relative;
  overflow: hidden;
  border: 0;
}

.woocommerce .woocommerce-breadcrumb {
    margin: 0 0 1em;
    padding: 0;
    margin-top: 15px;
}

.mxt-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 30%), rgba(var(--mxt-color-primary-rgb), 0.08), transparent 80%) !important;
  z-index: 1;
  pointer-events: none;
}

/* Custom Webkit scrollbar for premium theme browsing */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--mxt-color-light-accent) !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(var(--mxt-color-dark-rgb), 0.15) !important;
  border-radius: var(--mxt-radius-full) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--mxt-color-dark-rgb), 0.3) !important;
}

/* Disable blur-inducing hover scales/zooms on images & thumbnails */
.mxt-card-theme:hover .mxt-card-theme__image {
  transform: scale(1) !important;
}

.mxt-membership-block__collage-item:hover {
  transform: scale(1) rotate(0deg) translateZ(10px) !important;
  z-index: 50 !important;
  box-shadow: 0 20px 40px rgba(var(--mxt-color-dark-rgb), 0.25) !important;
  border-color: var(--mxt-color-primary) !important;
}

.mxt-hero__3d-mockup .mxt-hero__mockup-card:hover {
  transform: rotateY(-5deg) rotateX(3deg) rotateZ(0deg) translate3d(var(--hover-tx, 0), var(--hover-ty, 0), 200px) scale(1) !important;
}

.mxt-membership-block__3d-mockup .mxt-membership-block__mockup-card:hover {
  transform: rotateY(-5deg) rotateX(3deg) translate3d(var(--hov-x, 0), var(--hov-y, 0), 120px) scale(1) !important;
}

/* Elegant ambient pulse glow for badges */
@keyframes mxt-pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--mxt-color-primary-rgb), 0.15);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(var(--mxt-color-primary-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--mxt-color-primary-rgb), 0);
  }
}

.mxt-badge {
  animation: mxt-pulse-glow 3s infinite !important;
}

/* Smooth input focus glowing borders */
.mxt-hero__search-bar input:focus {
  border-color: var(--mxt-color-primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--mxt-color-primary-rgb), 0.1), var(--mxt-shadow-lg) !important;
  outline: none !important;
}

/* Additional premium spacing adjustments and micro-transitions */
.mxt-btn--3d-dark,
.mxt-btn--3d-light,
.mxt-btn--primary,
.mxt-btn--secondary {
  will-change: transform, box-shadow;
}


/* ==========================================================================
   SINGLE-THEME PAGE: 590px LEFT COLUMN + REMAINING RIGHT COLUMN
   ========================================================================== */

/* Fix details grid: left = exactly the thumbnail preview width, right = remaining space */
.mxt-details-grid {
  grid-template-columns: 590px 1fr !important;
  gap: var(--mxt-spacing-xl) !important;
  align-items: start !important;
}

/* The gallery image is capped at the full column width */
.mxt-details-gallery {
  max-width: 590px !important;
  width: 100% !important;
  margin-inline: 0 !important;
}

.mxt-details-gallery img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: var(--mxt-radius-lg) !important;
}

/* Make the pricing sidebar sticky and full-height */
.mxt-details-sidebar {
  position: sticky !important;
  top: calc(var(--mxt-header-height, 72px) + var(--mxt-spacing-md)) !important;
}

/* Responsive: stack single column below 1024px (tablet) */
@media (max-width: 1024px) {
  .mxt-details-grid {
    grid-template-columns: 1fr !important;
  }
  .mxt-details-gallery {
    max-width: 100% !important;
  }
  .mxt-details-sidebar {
    position: static !important;
  }
}

/* ==========================================================================
   IMPROVED THEME CARD THUMBNAILS — PREMIUM 2026 STYLE
   ========================================================================== */

/* Consistent 16:10 aspect ratio for all card thumbnails — prevents layout shift */
.mxt-card-theme__image-holder {
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  background: var(--mxt-color-light) !important;
  border-radius: var(--mxt-radius-lg) var(--mxt-radius-lg) 0 0 !important;
  position: relative !important;
}

/* Image fills the holder perfectly — no zoom on hover to keep it sharp */
.mxt-card-theme__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  transform: none !important;
  transition: filter 0.35s ease !important;
}

/* Subtle de-saturate on hover so the overlay text pops, not a blur */
.mxt-card-theme:hover .mxt-card-theme__image {
  transform: none !important;
  filter: brightness(0.9) saturate(0.85) !important;
}

/* Overlay: clean centered "Preview" CTA — no blur (performance) */
.mxt-card-theme__image-holder::after {
  content: "Live Preview →" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(var(--mxt-color-dark-rgb), 0) 30%,
    rgba(var(--mxt-color-dark-rgb), 0.55) 100%
  ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding-inline: var(--mxt-spacing-md) !important;
  padding-block-end: var(--mxt-spacing-sm) !important;
  color: var(--mxt-color-white) !important;
  font-weight: 700 !important;
  font-size: var(--mxt-font-size-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  opacity: 0 !important;
  transition: opacity 0.28s ease !important;
  pointer-events: none !important;
}

.mxt-card-theme:hover .mxt-card-theme__image-holder::after {
  opacity: 1 !important;
  transform: none !important;
}

/* Top shimmer sweep animation on hover */
@keyframes mxt-card-shimmer {
  0%   { transform: translateX(-110%) skewX(-18deg); }
  100% { transform: translateX(110%) skewX(-18deg); }
}

.mxt-card-theme__image-holder::before {
  content: '' !important;
  position: absolute !important;
  inset-block: 0 !important;
  inset-inline-start: -60% !important;
  width: 40% !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--mxt-color-white-rgb), 0.12) 50%,
    transparent 100%
  ) !important;
  z-index: 2 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

.mxt-card-theme:hover .mxt-card-theme__image-holder::before {
  opacity: 1 !important;
  animation: mxt-card-shimmer 0.6s ease-out forwards !important;
}

/* Card body improvements — tighter, more premium feel */
.mxt-card-theme__content {
  padding-block: var(--mxt-spacing-sm) var(--mxt-spacing-md) !important;
  padding-inline: var(--mxt-spacing-md) !important;
}

.mxt-card-theme__title {
  font-size: clamp(0.875rem, 1.1vw, 1rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--mxt-color-dark) !important;
  margin-block-end: 4px !important;
  /* Truncate long names to 2 lines */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Category badge: pill style */
.mxt-card-theme__category {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding-block: 3px !important;
  padding-inline: 8px !important;
  border-radius: var(--mxt-radius-full) !important;
  background: rgba(var(--mxt-color-primary-rgb), 0.08) !important;
  color: var(--mxt-color-primary) !important;
  border: 1px solid rgba(var(--mxt-color-primary-rgb), 0.15) !important;
}

/* Price — bolder & bigger */
.mxt-card-theme__price {
  font-size: var(--mxt-font-size-xl) !important;
  font-weight: 800 !important;
  color: var(--mxt-color-dark) !important;
  letter-spacing: -0.02em !important;
}

/* Footer border softened */
.mxt-card-theme__footer {
  padding-block-start: var(--mxt-spacing-sm) !important;
  border-block-start: 1px solid rgba(var(--mxt-color-dark-rgb), 0.06) !important;
}


/* ==========================================================================
   LOGO REFINEMENT — More refined, mixed-case, lighter weight
   ========================================================================== */

/* Override the Antonio font force on logo title — use Outfit for elegance */
.mxt-logo__title {
  font-family: 'Outfit', var(--mxt-font-sans) !important;
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  font-weight: 600 !important;
  color: var(--mxt-color-dark) !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
  line-height: 1 !important;
}

/* Subtitle: smaller, quieter, still styled */
.mxt-logo__subtitle {
  font-family: 'Instrument Sans', var(--mxt-font-sans) !important;
  font-size: 0.5rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.45) !important;
  margin-block-start: 2px !important;
}

/* Footer logo gets light text */
.mxt-footer__logo .mxt-logo__title {
  color: rgba(var(--mxt-color-white-rgb), 0.95) !important;
}
.mxt-footer__logo .mxt-logo__subtitle {
  color: rgba(var(--mxt-color-white-rgb), 0.4) !important;
}
.mxt-search-overlay__header .mxt-logo .mxt-logo__title {
  color: var(--mxt-color-white) !important;
}
.mxt-search-overlay__header .mxt-logo .mxt-logo__subtitle {
  color: rgba(var(--mxt-color-white-rgb), 0.5) !important;
}

/* ==========================================================================
   HERO TITLE — Multi-layer gradient 3D depth effect
   ========================================================================== */

.mxt-hero__title {
  font-family: 'Outfit', var(--mxt-font-sans) !important;
  font-size: clamp(2.8rem, 6vw, 5.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
  /* 3D depth: multi-stop gradient + text-shadow layers */
  background: linear-gradient(
    160deg,
    rgba(var(--mxt-color-dark-rgb), 1) 0%,
    rgba(var(--mxt-color-dark-rgb), 0.85) 40%,
    rgba(var(--mxt-color-primary-rgb), 0.7) 70%,
    rgba(var(--mxt-color-dark-rgb), 0.5) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  /* Subtle emboss effect via filter */
  filter: drop-shadow(0px 4px 8px rgba(var(--mxt-color-dark-rgb), 0.15)) !important;
  position: relative !important;
}

/* ==========================================================================
   MEMBERSHIP SECTION — Deep 3D, layered, alive
   ========================================================================== */

.mxt-membership-block {
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 1) 0%,
    rgba(22, 30, 55, 1) 35%,
    rgba(28, 38, 70, 1) 65%,
    rgba(15, 23, 42, 1) 100%
  ) !important;
  border-radius: var(--mxt-radius-xl) !important;
  position: relative !important;
  overflow: hidden !important;
  /* 3D depth via layered box-shadows */
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.4),
    0 20px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Primary radial light source — upper-left bloom */
.mxt-membership-block::before {
  content: '' !important;
  position: absolute !important;
  inset-block-start: -30% !important;
  inset-inline-start: -10% !important;
  width: 60% !important;
  height: 140% !important;
  background: radial-gradient(
    ellipse at 30% 30%,
    rgba(148, 163, 184, 0.09) 0%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
}

/* Secondary accent glow — bottom-right warm accent */
.mxt-membership-block::after {
  content: '' !important;
  position: absolute !important;
  inset-block-end: -20% !important;
  inset-inline-end: 5% !important;
  width: 50% !important;
  height: 80% !important;
  background: radial-gradient(
    ellipse at 70% 70%,
    rgba(var(--mxt-color-primary-rgb), 0.12) 0%,
    transparent 65%
  ) !important;
  pointer-events: none !important;
}

/* Animated grid noise overlay for texture */
.mxt-membership-block__grid {
  position: relative !important;
  z-index: 2 !important;
}

/* Title: large, luminous white with gradient shine */
.mxt-membership-block__title {
  font-family: 'Outfit', var(--mxt-font-sans) !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(226, 232, 240, 0.9) 50%,
    rgba(148, 163, 184, 0.75) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 12px rgba(255, 255, 255, 0.15)) !important;
}

/* Price card: glass card with inner light */
.mxt-membership-block__price-card {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.03) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--mxt-radius-xl) !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Price amount: giant, glowing, premium */
.mxt-membership-block__price-amount {
  font-family: 'Outfit', var(--mxt-font-sans) !important;
  font-weight: 800 !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(226, 232, 240, 0.85) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2)) !important;
}

/* Perks checkmarks: glow accent */
.mxt-membership-block__perk {
  color: rgba(226, 232, 240, 0.85) !important;
}

/* ==========================================================================
   PREMIUM FOOTER OVERHAUL
   ========================================================================== */

.mxt-footer {
  background: linear-gradient(
    180deg,
    rgba(10, 14, 28, 1) 0%,
    rgba(14, 20, 40, 1) 60%,
    rgba(10, 14, 28, 1) 100%
  ) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Ambient top-edge light bleed */
.mxt-footer__top-line {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--mxt-color-primary-rgb), 0.25) 30%,
    rgba(148, 163, 184, 0.4) 50%,
    rgba(var(--mxt-color-primary-rgb), 0.25) 70%,
    transparent 100%
  ) !important;
  margin-block-end: 0 !important;
}

/* Radial glow behind footer grid */
.mxt-footer::before {
  content: '' !important;
  position: absolute !important;
  inset-block-start: 0 !important;
  inset-inline-start: 50% !important;
  transform: translateX(-50%) !important;
  width: 80% !important;
  height: 50% !important;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(var(--mxt-color-primary-rgb), 0.06) 0%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
}

/* Footer grid: wider about column */
.mxt-footer__grid {
  display: grid !important;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr !important;
  gap: var(--mxt-spacing-xl) !important;
  padding-block-start: var(--mxt-spacing-xl) !important;
  padding-block-end: var(--mxt-spacing-xl) !important;
  align-items: start !important;
  position: relative !important;
  z-index: 2 !important;
}

/* About column */
.mxt-footer__about {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mxt-spacing-md) !important;
}

.mxt-footer__text {
  font-size: var(--mxt-font-size-sm) !important;
  color: rgba(148, 163, 184, 0.75) !important;
  line-height: 1.7 !important;
  max-width: 280px !important;
}

/* Newsletter form */
.mxt-footer__newsletter {
  display: flex !important;
  border-radius: var(--mxt-radius-full) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transition: border-color var(--mxt-transition-fast) !important;
  max-width: 280px !important;
}

.mxt-footer__newsletter:focus-within {
  border-color: rgba(var(--mxt-color-primary-rgb), 0.4) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.mxt-footer__newsletter-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding-block: 10px !important;
  padding-inline: 16px 8px !important;
  font-size: var(--mxt-font-size-xs) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--mxt-font-sans) !important;
}

.mxt-footer__newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

.mxt-footer__newsletter-btn {
  background: rgba(var(--mxt-color-primary-rgb), 0.7) !important;
  border: none !important;
  border-radius: 0 var(--mxt-radius-full) var(--mxt-radius-full) 0 !important;
  padding-inline: 14px !important;
  color: var(--mxt-color-white) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background var(--mxt-transition-fast) !important;
  flex-shrink: 0 !important;
  font-size: var(--mxt-font-size-xs) !important;
}

.mxt-footer__newsletter-btn:hover {
  background: var(--mxt-color-primary) !important;
}

/* Social links */
.mxt-footer__socials {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.mxt-footer__social-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--mxt-radius-md) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(148, 163, 184, 0.7) !important;
  transition: all var(--mxt-transition-fast) !important;
  text-decoration: none !important;
}

.mxt-footer__social-link:hover {
  background: rgba(var(--mxt-color-primary-rgb), 0.15) !important;
  border-color: rgba(var(--mxt-color-primary-rgb), 0.3) !important;
  color: var(--mxt-color-white) !important;
  transform: translateY(-2px) !important;
}

/* Column headings */
.mxt-footer__col {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mxt-spacing-sm) !important;
}

.mxt-footer__title {
  font-family: 'Instrument Sans', var(--mxt-font-sans) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin-block-end: 4px !important;
}

/* Links */
.mxt-footer__links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.mxt-footer__link {
  font-size: var(--mxt-font-size-sm) !important;
  color: rgba(148, 163, 184, 0.65) !important;
  text-decoration: none !important;
  transition: color var(--mxt-transition-fast), padding-inline-start var(--mxt-transition-fast) !important;
  display: inline-block !important;
}

.mxt-footer__link:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  padding-inline-start: 4px !important;
}

/* Trust badge */
.mxt-footer__trust-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-block-start: var(--mxt-spacing-md) !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: rgba(148, 163, 184, 0.5) !important;
  padding-block: 5px !important;
  padding-inline: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--mxt-radius-full) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Divider */
.mxt-footer__divider {
  width: 100% !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Bottom bar */
.mxt-footer__bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: var(--mxt-spacing-sm) !important;
  padding-block: var(--mxt-spacing-md) !important;
  position: relative !important;
  z-index: 2 !important;
}

.mxt-footer__copyright {
  font-size: var(--mxt-font-size-xs) !important;
  color: rgba(148, 163, 184, 0.45) !important;
}

.mxt-footer__legal-links {
  display: flex !important;
  gap: var(--mxt-spacing-md) !important;
  flex-wrap: wrap !important;
}

.mxt-footer__legal-link {
  font-size: var(--mxt-font-size-xs) !important;
  color: rgba(148, 163, 184, 0.45) !important;
  text-decoration: none !important;
  transition: color var(--mxt-transition-fast) !important;
}

.mxt-footer__legal-link:hover {
  color: rgba(255, 255, 255, 0.7) !important;
}

.mxt-footer__payments {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}

.mxt-footer__payments svg {
  opacity: 0.7 !important;
  transition: opacity var(--mxt-transition-fast) !important;
  border-radius: 3px !important;
}

.mxt-footer__payments svg:hover {
  opacity: 1 !important;
}

/* Footer responsive */
@media (max-width: 1024px) {
  .mxt-footer__grid {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .mxt-footer__about {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 600px) {
  .mxt-footer__grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .mxt-footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/* ==========================================================================
   BACK TO TOP BUTTON
   ========================================================================== */

.mxt-back-to-top {
  position: fixed !important;
  inset-block-end: var(--mxt-spacing-xl) !important;
  inset-inline-end: var(--mxt-spacing-xl) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--mxt-radius-full) !important;
  background: rgba(var(--mxt-color-dark-rgb), 0.85) !important;
  color: var(--mxt-color-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999 !important;
  opacity: 0 !important;
  transform: translateY(16px) !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, opacity !important;
}

.mxt-back-to-top--visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.mxt-back-to-top:hover {
  background: rgba(var(--mxt-color-primary-rgb), 0.9) !important;
  box-shadow:
    0 12px 32px rgba(var(--mxt-color-primary-rgb), 0.25),
    0 2px 4px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-3px) !important;
}

.mxt-back-to-top:active {
  transform: translateY(0) !important;
}


/* ==========================================================================
   HERO TITLE FIX — Remove the fading gradient that kills readability
   Keep it solid dark with subtle depth via shadow only
   ========================================================================== */

.mxt-hero__title {
  font-family: 'Outfit', var(--mxt-font-sans) !important;
  font-size: clamp(2.8rem, 6vw, 5.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
  /* Kill the invisible gradient — solid color instead */
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--mxt-color-dark) !important;
  color: var(--mxt-color-dark) !important;
  filter: none !important;
  /* Subtle 3D depth via text-shadow layering */
  text-shadow:
    0 1px 0 rgba(var(--mxt-color-white-rgb), 0.9),
    0 2px 4px rgba(var(--mxt-color-dark-rgb), 0.08),
    0 6px 16px rgba(var(--mxt-color-dark-rgb), 0.06) !important;
}

/* The last word / italic "accent" styling — mild primary tint only */
.mxt-hero__title em,
.mxt-hero__title strong em {
  font-style: normal !important;
  color: var(--mxt-color-primary) !important;
  -webkit-text-fill-color: var(--mxt-color-primary) !important;
}

/* ==========================================================================
   SECTION HEADER TITLES (themes.html, html-templates, webflow pages)
   Same fix — no fading gradient on section titles
   ========================================================================== */

.mxt-section-header__title {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--mxt-color-dark) !important;
  color: var(--mxt-color-dark) !important;
  filter: none !important;
  text-shadow:
    0 1px 0 rgba(var(--mxt-color-white-rgb), 0.9),
    0 3px 8px rgba(var(--mxt-color-dark-rgb), 0.06) !important;
}

/* ==========================================================================
   THEMES PAGE — More breathing room between banner and filter grid
   ========================================================================== */

/* Top padding on the directory section itself */
#mxt-wp-block-themes-directory {
  padding-block-start: var(--mxt-spacing-xl) !important;
}

/* Gap between hero banner header and the filter layout below */
.mxt-directory__layout {
  margin-block-start: var(--mxt-spacing-xl) !important;
}

/* Also ensure the section-header bottom margin is generous */
.mxt-section-header {
  margin-block-end: var(--mxt-spacing-xl) !important;
}

/* ==========================================================================
   CONTACT PAGE — Top margin on the support ticket/grid section
   ========================================================================== */

#mxt-wp-block-contact {
  padding-block-start: var(--mxt-spacing-xl) !important;
}

.mxt-contact-grid {
  margin-block-start: var(--mxt-spacing-lg) !important;
}


/* ==========================================================================
   LOGO GRADIENT SYSTEM — Blue → Violet → Cyan (matches logo symbol)
   ========================================================================== */

:root {
  /* Logo symbol gradient colors */
  --mxt-logo-blue: #4F8EF7;
  --mxt-cat-wp: #21759B;
  --mxt-cat-html: #E34C26;
  --mxt-dark-bg-1: #0A0E1C;
  --mxt-dark-bg-2: #0F172A;
  --mxt-dark-bg-3: #131B35;
  --mxt-logo-violet: #8B5CF6;
  --mxt-logo-cyan: #06B6D4;
  /* Master hover gradient */
  --mxt-btn-hover-gradient: linear-gradient(135deg, var(--mxt-logo-blue) 0%, var(--mxt-logo-violet) 55%, var(--mxt-logo-cyan) 100%);
  --mxt-btn-hover-shadow: 0 8px 24px rgba(79, 142, 247, 0.35), 0 2px 6px rgba(139, 92, 246, 0.2);
}

/* ==========================================================================
   ALL BUTTON HOVER — Logo gradient blue/violet/cyan
   ========================================================================== */

/* PRIMARY BUTTON hover — morphs to logo gradient */
.mxt-btn--primary:hover,
.mxt-btn--3d-dark:hover {
  background: var(--mxt-btn-hover-gradient) !important;
  border-color: var(--mxt-logo-violet) !important;
  color: var(--mxt-color-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--mxt-btn-hover-shadow),
              inset 0px 1px 0px 0px rgba(255, 255, 255, 0.35) !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}

/* SECONDARY BUTTON hover — gradient tint with white text */
.mxt-btn--secondary:hover,
.mxt-btn--3d-light:hover {
  background: var(--mxt-btn-hover-gradient) !important;
  border-color: var(--mxt-logo-violet) !important;
  color: var(--mxt-color-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--mxt-btn-hover-shadow) !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Cart, wishlist, add-to-cart icon buttons */
.mxt-card-theme__btn:hover,
.mxt-card-theme__wishlist:hover {
  background: var(--mxt-btn-hover-gradient) !important;
  border-color: var(--mxt-logo-violet) !important;
  color: var(--mxt-color-white) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: var(--mxt-btn-hover-shadow) !important;
}

/* Header CTA button hover */
.mxt-header__actions .mxt-btn:hover {
  background: var(--mxt-btn-hover-gradient) !important;
  border-color: transparent !important;
  color: var(--mxt-color-white) !important;
  box-shadow: var(--mxt-btn-hover-shadow) !important;
}

/* Sidebar filter btn hover */
.mxt-sidebar-btn:hover,
.mxt-filter-btn:hover:not(.mxt-filter-btn--active) {
  background: var(--mxt-btn-hover-gradient) !important;
  color: var(--mxt-color-white) !important;
  border-color: transparent !important;
}

/* Back to top hover */
.mxt-back-to-top:hover {
  background: var(--mxt-btn-hover-gradient) !important;
  border-color: transparent !important;
  box-shadow: var(--mxt-btn-hover-shadow) !important;
}

/* Newsletter button hover */
.mxt-footer__newsletter-btn:hover {
  background: var(--mxt-btn-hover-gradient) !important;
}

/* ==========================================================================
   PREMIUM CARD REDESIGN — Much more polished
   ========================================================================== */

.mxt-card-theme {
  background: var(--mxt-color-white) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.07) !important;
  border-bottom: none !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 3px rgba(var(--mxt-color-dark-rgb), 0.04),
    0 4px 12px rgba(var(--mxt-color-dark-rgb), 0.04),
    0 0 0 1px rgba(var(--mxt-color-dark-rgb), 0.04) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Bottom accent bar — logo gradient on hover */
.mxt-card-theme::after {
  content: '' !important;
  position: absolute !important;
  inset-inline: 0 !important;
  inset-block-end: 0 !important;
  height: 3px !important;
  background: var(--mxt-btn-hover-gradient) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  border-radius: 0 0 16px 16px !important;
}

.mxt-card-theme:hover::after {
  opacity: 1 !important;
}

.mxt-card-theme:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 4px 8px rgba(var(--mxt-color-dark-rgb), 0.04),
    0 16px 40px rgba(79, 142, 247, 0.1),
    0 0 0 1px rgba(79, 142, 247, 0.12) !important;
}

/* Image holder — 16:9 looks better with real screenshots */
.mxt-card-theme__image-holder {
  aspect-ratio: 3 / 2 !important;
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden !important;
  background: var(--mxt-color-light) !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.mxt-card-theme__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  transform: none !important;
  filter: none !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease !important;
  display: block !important;
}

/* Gentle zoom in instead of desaturate — keeps it vibrant */
.mxt-card-theme:hover .mxt-card-theme__image {
  transform: scale(1.04) !important;
  filter: none !important;
}

/* Overlay: subtle gradient-to-bottom */
.mxt-card-theme__image-holder::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(10, 14, 28, 0.45) 100%
  ) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}

.mxt-card-theme:hover .mxt-card-theme__image-holder::after {
  opacity: 1 !important;
  transform: none !important;
}

/* Shimmer sweep */
.mxt-card-theme__image-holder::before {
  content: '' !important;
  position: absolute !important;
  inset-block: 0 !important;
  inset-inline-start: -80% !important;
  width: 50% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent) !important;
  opacity: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  transition: none !important;
}

.mxt-card-theme:hover .mxt-card-theme__image-holder::before {
  opacity: 1 !important;
  animation: mxt-card-shimmer 0.7s ease-out forwards !important;
}

/* Card content area */
.mxt-card-theme__content {
  padding: 14px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 8px !important;
}

/* Category pill */
.mxt-card-theme__category {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(79, 142, 247, 0.08) !important;
  color: var(--mxt-logo-blue) !important;
  border: 1px solid rgba(79, 142, 247, 0.18) !important;
  align-self: flex-start !important;
}

.mxt-card-theme__category--wp { 
  background: rgba(33, 117, 155, 0.08) !important; 
  color: var(--mxt-cat-wp) !important;
  border-color: rgba(33, 117, 155, 0.2) !important;
}
.mxt-card-theme__category--html { 
  background: rgba(227, 76, 38, 0.08) !important; 
  color: var(--mxt-cat-html) !important;
  border-color: rgba(227, 76, 38, 0.2) !important;
}
.mxt-card-theme__category--webflow { 
  background: rgba(79, 142, 247, 0.08) !important; 
  color: var(--mxt-logo-blue) !important;
  border-color: rgba(79, 142, 247, 0.18) !important;
}

/* Title */
.mxt-card-theme__title {
  font-family: 'Outfit', var(--mxt-font-sans) !important;
  font-size: clamp(0.875rem, 1vw + 0.3rem, 1rem) !important;
  font-weight: 700 !important;
  color: var(--mxt-color-dark) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Desc */
.mxt-card-theme p {
  font-size: 0.78rem !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.5) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Footer */
.mxt-card-theme__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-block-start: 10px !important;
  margin-block-start: auto !important;
  border-block-start: 1px solid rgba(var(--mxt-color-dark-rgb), 0.06) !important;
}

/* Price */
.mxt-card-theme__price {
  font-family: 'Outfit', var(--mxt-font-sans) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--mxt-color-dark) !important;
  letter-spacing: -0.03em !important;
}

/* Cart button — round pill icon */
.mxt-card-theme__btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 999px !important;
  background: var(--mxt-color-dark) !important;
  color: var(--mxt-color-white) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* Wishlist */
.mxt-card-theme__wishlist {
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: rgba(var(--mxt-color-white-rgb), 0.95) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.1) !important;
  box-shadow: 0 2px 8px rgba(var(--mxt-color-dark-rgb), 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
}

/* ==========================================================================
   MEMBERSHIP SECTION — Complete redesign
   ========================================================================== */

/* Clear all old conflicting overrides */
.mxt-membership-block {
  background: linear-gradient(135deg, var(--mxt-dark-bg-1) 0%, var(--mxt-dark-bg-2) 40%, var(--mxt-dark-bg-3) 70%, var(--mxt-dark-bg-1) 100%) !important;
  border-radius: 24px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow:
    0 60px 100px rgba(0, 0, 0, 0.5),
    0 20px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.04) !important;
  position: relative !important;
}

/* Top edge gradient line */
.mxt-membership-block > .mxt-container::before,
.mxt-membership-block__grid::before {
  display: none !important;
}

.mxt-membership-block::before {
  content: '' !important;
  position: absolute !important;
  inset-block-start: 0 !important;
  inset-inline: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(79, 142, 247, 0.5) 30%, rgba(139, 92, 246, 0.6) 50%, rgba(6, 182, 212, 0.5) 70%, transparent) !important;
}

/* Right-side ambient glow */
.mxt-membership-block::after {
  content: '' !important;
  position: absolute !important;
  inset-block-start: -20% !important;
  inset-inline-end: -5% !important;
  width: 55% !important;
  height: 140% !important;
  background: radial-gradient(ellipse at 80% 30%,
    rgba(139, 92, 246, 0.1) 0%,
    rgba(79, 142, 247, 0.06) 40%,
    transparent 70%) !important;
  pointer-events: none !important;
}

.mxt-membership-block__grid {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  min-height: 420px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Left: text column */
.mxt-membership-block__content {
  padding: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 56px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: var(--mxt-spacing-md) !important;
}

/* Divider between columns — gradient line */
.mxt-membership-block__content {
  border-inline-end: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Right: price + collage column */
.mxt-membership-block__visual {
  padding: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 56px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Badge */
.mxt-membership-block .mxt-badge {
  background: rgba(79, 142, 247, 0.15) !important;
  color: var(--mxt-logo-blue) !important;
  border: 1px solid rgba(79, 142, 247, 0.25) !important;
  animation: none !important;
  font-family: 'Instrument Sans', var(--mxt-font-sans) !important;
}

/* Title */
.mxt-membership-block__title {
  font-family: 'Outfit', var(--mxt-font-sans) !important;
  font-size: clamp(2rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
  color: var(--mxt-color-white) !important;
  background: none !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  filter: none !important;
}

/* Description */
.mxt-membership-block__desc {
  color: rgba(148, 163, 184, 0.8) !important;
  font-size: var(--mxt-font-size-sm) !important;
  line-height: 1.7 !important;
  max-width: 420px !important;
}

/* Perks list */
.mxt-membership-block__perks {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px 16px !important;
}

.mxt-membership-block__perk {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: var(--mxt-font-size-sm) !important;
  color: rgba(203, 213, 225, 0.85) !important;
}

.mxt-membership-block__perk::before {
  content: '' !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  background: var(--mxt-btn-hover-gradient) !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-size: cover !important;
}

/* Price card — glassmorphism panel */
.mxt-membership-block__price-card {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 28px 28px 20px !important;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Price card top gradient shimmer */
.mxt-membership-block__price-card::before {
  content: '' !important;
  position: absolute !important;
  inset-block-start: 0 !important;
  inset-inline: 20% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.5), transparent) !important;
}

.mxt-membership-block__price-label {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: rgba(148, 163, 184, 0.6) !important;
  margin-block-end: 8px !important;
  display: block !important;
}

.mxt-membership-block__price-amount {
  font-family: 'Outfit', var(--mxt-font-sans) !important;
  font-size: clamp(3rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  color: var(--mxt-color-white) !important;
  background: none !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  filter: none !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
}

.mxt-membership-block__price-amount small {
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: rgba(148, 163, 184, 0.6) !important;
  -webkit-text-fill-color: rgba(148, 163, 184, 0.6) !important;
  letter-spacing: 0 !important;
}

/* Save badge */
.mxt-membership-block__price-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-block: 12px 20px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(79,142,247,0.2), rgba(139,92,246,0.25)) !important;
  color: rgba(167, 197, 255, 0.95) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  letter-spacing: 0.04em !important;
}

/* Collage container — more polished scatter */
.mxt-membership-block__collage {
  width: 100% !important;
  height: 220px !important;
  position: relative !important;
  perspective: 1000px !important;
  margin-block-start: 4px !important;
}

/* Collage items — slightly larger, more contrast */
.mxt-membership-block__collage-item {
  position: absolute !important;
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  border: 2px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
  will-change: transform !important;
}

/* Hover on each collage item lifts it with gradient glow border */
.mxt-membership-block__collage-item:hover {
  transform: translateY(-8px) scale(1.08) !important;
  box-shadow:
    0 16px 32px rgba(79, 142, 247, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
  z-index: 10 !important;
}

/* Responsive membership */
@media (max-width: 900px) {
  .mxt-membership-block__grid {
    grid-template-columns: 1fr !important;
    min-height: unset !important;
  }
  .mxt-membership-block__content {
    border-inline-end: none !important;
    border-block-end: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
  .mxt-membership-block__collage {
    height: 160px !important;
  }
}


/* ==========================================================================
   IMAGE NO-CROP FIX — Full image visible, no side cutoffs, EVER
   ========================================================================== */

/* Override all previous aspect-ratio + object-fit:cover rules */
.mxt-card-theme__image-holder {
  aspect-ratio: unset !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 12px 12px 0 0 !important;
  background: var(--mxt-color-light) !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* Image: full width, natural height — NO object-fit cropping */
.mxt-card-theme__image {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: unset !important;
  object-position: unset !important;
  transform: none !important;
  filter: none !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Keep the gentle zoom but only scale (no crop because height:auto) */
.mxt-card-theme:hover .mxt-card-theme__image {
  transform: scale(1.025) !important;
  filter: none !important;
}

/* Overlay stays at bottom */
.mxt-card-theme__image-holder::after {
  content: '' !important;
  position: absolute !important;
  inset-block-end: 0 !important;
  inset-inline: 0 !important;
  inset-block-start: 60% !important;
  background: linear-gradient(to bottom, transparent, rgba(10,14,28,0.45)) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
  border-radius: 0 !important;
}

.mxt-card-theme:hover .mxt-card-theme__image-holder::after {
  opacity: 1 !important;
}

/* ==========================================================================
   PREMIUM SIDEBAR REDESIGN
   ========================================================================== */

/* Main container */
.mxt-directory__sidebar {
  background: var(--mxt-color-white) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.07) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  box-shadow:
    0 1px 3px rgba(var(--mxt-color-dark-rgb), 0.04),
    0 8px 24px rgba(var(--mxt-color-dark-rgb), 0.04) !important;
  overflow: hidden !important;
  position: sticky !important;
  top: calc(var(--mxt-header-height, 72px) + 16px) !important;
  align-self: start !important;
}

/* Header bar */
.mxt-sidebar__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  border-block-end: 1px solid rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  background: rgba(var(--mxt-color-dark-rgb), 0.015) !important;
}

.mxt-sidebar__main-title {
  font-family: 'Instrument Sans', var(--mxt-font-sans) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.4) !important;
}

.mxt-sidebar__close-btn {
  width: 28px !important;
  height: 28px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.6) !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
}
.mxt-sidebar__close-btn:hover {
  background: rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  color: var(--mxt-color-dark) !important;
}

/* Widgets */
.mxt-sidebar__widget {
  padding: 20px 20px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  border-block-end: 1px solid rgba(var(--mxt-color-dark-rgb), 0.05) !important;
  padding-block-end: 20px !important;
}

.mxt-sidebar__widget:last-of-type {
  border-block-end: none !important;
  padding-block-end: 20px !important;
}

/* Widget titles */
.mxt-sidebar__widget-title {
  font-family: 'Instrument Sans', var(--mxt-font-sans) !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.38) !important;
  margin-block-end: 2px !important;
}

/* Search input */
.mxt-sidebar__search-wrapper {
  position: relative !important;
}

.mxt-sidebar__search-input {
  width: 100% !important;
  padding: 10px 36px 10px 14px !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.1) !important;
  border-radius: 10px !important;
  background: rgba(var(--mxt-color-dark-rgb), 0.025) !important;
  font-size: 0.8rem !important;
  color: var(--mxt-color-dark-accent) !important;
  font-family: var(--mxt-font-sans) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

.mxt-sidebar__search-input::placeholder {
  color: rgba(var(--mxt-color-dark-rgb), 0.3) !important;
}

.mxt-sidebar__search-input:focus {
  outline: none !important;
  border-color: var(--mxt-logo-blue) !important;
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.1) !important;
  background: var(--mxt-color-white) !important;
}

.mxt-sidebar__search-icon {
  position: absolute !important;
  inset-block-start: 50% !important;
  inset-inline-end: 12px !important;
  transform: translateY(-50%) !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.3) !important;
  pointer-events: none !important;
  width: 15px !important;
  height: 15px !important;
}

/* Platform buttons (WordPress Themes, HTML Templates, Webflow) */
.mxt-sidebar__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mxt-sidebar__link {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.65) !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
}

.mxt-sidebar__link:hover {
  background: rgba(var(--mxt-color-dark-rgb), 0.04) !important;
  color: var(--mxt-color-dark) !important;
  border-color: rgba(var(--mxt-color-dark-rgb), 0.07) !important;
}

.mxt-sidebar__link--active {
  background: linear-gradient(135deg,
    rgba(79, 142, 247, 0.08) 0%,
    rgba(139, 92, 246, 0.08) 100%
  ) !important;
  color: var(--mxt-logo-blue) !important;
  font-weight: 700 !important;
  border-color: rgba(79, 142, 247, 0.15) !important;
}

.mxt-sidebar__link--active:hover {
  background: linear-gradient(135deg,
    rgba(79, 142, 247, 0.12) 0%,
    rgba(139, 92, 246, 0.12) 100%
  ) !important;
}

/* Badge counts */
.mxt-sidebar__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 20px !important;
  padding-inline: 6px !important;
  border-radius: 999px !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  background: rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.45) !important;
  transition: all 0.18s ease !important;
  letter-spacing: 0 !important;
}

.mxt-sidebar__link--active .mxt-sidebar__badge {
  background: rgba(79, 142, 247, 0.15) !important;
  color: var(--mxt-logo-blue) !important;
}

.mxt-sidebar__link:hover .mxt-sidebar__badge {
  background: rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  color: var(--mxt-color-dark) !important;
}

/* Checkbox labels (Categories) */
.mxt-sidebar__checkbox-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 4px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  gap: 8px !important;
  font-size: 0.82rem !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.65) !important;
}

.mxt-sidebar__checkbox-label:hover {
  color: var(--mxt-color-dark) !important;
  background: rgba(var(--mxt-color-dark-rgb), 0.03) !important;
}

.mxt-sidebar__checkbox {
  width: 16px !important;
  height: 16px !important;
  border-radius: 5px !important;
  border: 1.5px solid rgba(var(--mxt-color-dark-rgb), 0.2) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--mxt-color-white) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
  position: relative !important;
}

.mxt-sidebar__checkbox:checked {
  background: var(--mxt-btn-hover-gradient) !important;
  border-color: var(--mxt-logo-violet) !important;
}

.mxt-sidebar__checkbox:checked::after {
  content: '' !important;
  position: absolute !important;
  inset-block-start: 2px !important;
  inset-inline-start: 4px !important;
  width: 5px !important;
  height: 8px !important;
  border: 2px solid white !important;
  border-block-start: none !important;
  border-inline-start: none !important;
  transform: rotate(45deg) !important;
}

.mxt-sidebar__checkbox-text {
  flex: 1 !important;
  font-size: 0.82rem !important;
  color: inherit !important;
}

/* Clear button */
.mxt-sidebar__clear-btn {
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  background: rgba(239, 68, 68, 0.06) !important;
  color: rgba(239, 68, 68, 0.8) !important;
  border: 1px solid rgba(239, 68, 68, 0.12) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  font-family: 'Instrument Sans', var(--mxt-font-sans) !important;
}

.mxt-sidebar__clear-btn:hover {
  background: rgba(239, 68, 68, 0.9) !important;
  color: var(--mxt-color-white) !important;
  border-color: transparent !important;
  transform: none !important;
}

/* Old sidebar-btn platform pill buttons (override completely) */
.mxt-sidebar-btn {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.65) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  text-align: start !important;
}

.mxt-sidebar-btn:hover {
  background: rgba(var(--mxt-color-dark-rgb), 0.04) !important;
  color: var(--mxt-color-dark) !important;
  border-color: rgba(var(--mxt-color-dark-rgb), 0.07) !important;
}

.mxt-sidebar-btn.mxt-filter-btn--active {
  background: linear-gradient(135deg,
    rgba(79, 142, 247, 0.1) 0%,
    rgba(139, 92, 246, 0.1) 100%
  ) !important;
  color: var(--mxt-logo-blue) !important;
  font-weight: 700 !important;
  border-color: rgba(79, 142, 247, 0.2) !important;
}

.mxt-sidebar-btn.mxt-filter-btn--active .mxt-sidebar-badge {
  background: rgba(79, 142, 247, 0.15) !important;
  color: var(--mxt-logo-blue) !important;
}

.mxt-sidebar-badge {
  display: inline-flex !important;
  min-width: 22px !important;
  height: 20px !important;
  padding-inline: 6px !important;
  border-radius: 999px !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.5) !important;
  transition: all 0.18s ease !important;
}

/* Mobile sidebar overlay */
@media (max-width: 1024px) {
  .mxt-directory__sidebar {
    position: fixed !important;
    inset-block-start: 0 !important;
    inset-inline-start: 0 !important;
    inset-block-end: 0 !important;
    width: 300px !important;
    border-radius: 0 16px 16px 0 !important;
    z-index: 500 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow-y: auto !important;
    top: 0 !important;
  }

  .mxt-directory__sidebar--open {
    transform: translateX(0) !important;
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.15) !important;
  }

  .mxt-sidebar__close-btn {
    display: flex !important;
  }
}


/* ==========================================================================
   SECONDARY BUTTON — Fully visible, polished light pill
   ========================================================================== */

.mxt-btn--secondary,
.mxt-btn--3d-light {
  background: var(--mxt-color-white) !important;
  color: var(--mxt-color-dark) !important;
  border: 1.5px solid rgba(var(--mxt-color-dark-rgb), 0.18) !important;
  box-shadow:
    0 1px 3px rgba(var(--mxt-color-dark-rgb), 0.06),
    0 4px 12px rgba(var(--mxt-color-dark-rgb), 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

.mxt-btn--secondary:hover,
.mxt-btn--3d-light:hover {
  background: var(--mxt-btn-hover-gradient) !important;
  color: var(--mxt-color-white) !important;
  border-color: transparent !important;
  box-shadow: var(--mxt-btn-hover-shadow) !important;
  transform: translateY(-2px) !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.2) !important;
}

/* ==========================================================================
   BACK TO TOP — More polished, gradient on hover
   ========================================================================== */

.mxt-back-to-top {
  position: fixed !important;
  inset-block-end: 32px !important;
  inset-inline-end: 32px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(30,41,59,0.92) 100%) !important;
  color: var(--mxt-color-white) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.2),
    0 2px 6px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  opacity: 0 !important;
  transform: translateY(20px) scale(0.85) !important;
  pointer-events: none !important;
  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.22s ease,
    box-shadow 0.22s ease !important;
}

.mxt-back-to-top--visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.mxt-back-to-top:hover {
  background: var(--mxt-btn-hover-gradient) !important;
  border-color: transparent !important;
  box-shadow:
    0 12px 32px rgba(79,142,247,0.3),
    0 4px 8px rgba(139,92,246,0.15),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transform: translateY(-3px) scale(1.08) !important;
}

.mxt-back-to-top:active {
  transform: translateY(0) scale(0.96) !important;
}

/* ==========================================================================
   CARDS — Final polish pass
   ========================================================================== */

/* Ensure cards have consistent radius throughout */
.mxt-card-theme {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Category badge: use platform-specific color tints */
.mxt-card-theme__category--wp {
  background: rgba(33, 117, 155, 0.07) !important;
  color: var(--mxt-cat-wp) !important;
  border-color: rgba(33, 117, 155, 0.18) !important;
}

.mxt-card-theme__category--html {
  background: rgba(227, 76, 38, 0.07) !important;
  color: var(--mxt-cat-html) !important;
  border-color: rgba(227, 76, 38, 0.18) !important;
}

/* Wishlist button */
.mxt-card-theme__wishlist {
  position: absolute !important;
  inset-block-start: 10px !important;
  inset-inline-end: 10px !important;
  z-index: 5 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.1) !important;
  box-shadow: 0 2px 8px rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.2s ease !important;
}

.mxt-card-theme__wishlist:hover {
  background: var(--mxt-btn-hover-gradient) !important;
  border-color: transparent !important;
  color: white !important;
  transform: scale(1.12) !important;
  box-shadow: var(--mxt-btn-hover-shadow) !important;
}

/* ==========================================================================
   MEMBERSHIP BLOCK — Force dark again (repair after var bug)
   ========================================================================== */

.mxt-membership-block {
  background: linear-gradient(
    140deg,
    var(--mxt-dark-bg-1) 0%,
    var(--mxt-dark-bg-2) 45%,
    var(--mxt-dark-bg-3) 75%,
    var(--mxt-dark-bg-1) 100%
  ) !important;
  color: var(--mxt-color-white) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow:
    0 60px 100px rgba(0,0,0,0.5),
    0 20px 40px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(255,255,255,0.04) !important;
}

/* Ensure all text inside is white by default */
.mxt-membership-block *:not(.mxt-badge) {
  color: inherit !important;
}

.mxt-membership-block__title {
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  background: none !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: -0.03em !important;
}

.mxt-membership-block__desc {
  color: rgba(148, 163, 184, 0.8) !important;
}

.mxt-membership-block__price-amount {
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  background: none !important;
  filter: none !important;
}

.mxt-membership-block__price-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 20px !important;
  box-shadow:
    0 24px 48px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.mxt-membership-block__perk {
  color: rgba(203, 213, 225, 0.85) !important;
}


/* ==========================================================================
   3D BUTTON HOVER — Gradient color BUT keep the 3D press-down tactile effect
   ========================================================================== */

/* PRIMARY / 3D-DARK hover: gradient bg + pressed-down 3D shadow */
.mxt-btn--primary:hover,
.mxt-btn--3d-dark:hover {
  background: var(--mxt-btn-hover-gradient) !important;
  border-color: var(--mxt-logo-violet) !important;
  color: var(--mxt-color-white) !important;
  transform: translateY(1px) !important; /* PRESS DOWN — tactile 3D */
  box-shadow:
    0px 2px 4px rgba(79, 142, 247, 0.2),
    inset 0px -4px 0px 0px rgba(79, 142, 247, 0.4),
    inset 0px -5px 0px 1px rgba(255, 255, 255, 0.12),
    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.35) !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}

.mxt-btn--primary:active,
.mxt-btn--3d-dark:active {
  background: var(--mxt-btn-hover-gradient) !important;
  transform: translateY(4px) !important;
  box-shadow:
    0px 0px 2px rgba(0, 0, 0, 0.2),
    inset 0px -1px 0px 0px rgba(79, 142, 247, 0.3),
    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.15) !important;
}

/* SECONDARY / 3D-LIGHT hover: gradient bg + white text + 3D press-down */
.mxt-btn--secondary:hover,
.mxt-btn--3d-light:hover {
  background: var(--mxt-btn-hover-gradient) !important;
  border-color: var(--mxt-logo-violet) !important;
  color: var(--mxt-color-white) !important;
  transform: translateY(1px) !important;
  box-shadow:
    0px 2px 4px rgba(79, 142, 247, 0.15),
    inset 0px -4px 0px 0px rgba(79, 142, 247, 0.3),
    inset 0px -5px 0px 1px rgba(255, 255, 255, 0.1),
    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.3) !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}

.mxt-btn--secondary:active,
.mxt-btn--3d-light:active {
  background: var(--mxt-btn-hover-gradient) !important;
  transform: translateY(4px) !important;
  box-shadow:
    0px 0px 2px rgba(0, 0, 0, 0.1),
    inset 0px -1px 0px 0px rgba(79, 142, 247, 0.2),
    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.15) !important;
}

/* MEMBERSHIP SECONDARY button — visible on dark bg */
.mxt-membership-block .mxt-btn--secondary,
.mxt-membership-block .mxt-btn--3d-light {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--mxt-color-white) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  font-weight: 600 !important;
}

.mxt-membership-block .mxt-btn--secondary:hover,
.mxt-membership-block .mxt-btn--3d-light:hover {
  background: var(--mxt-btn-hover-gradient) !important;
  border-color: transparent !important;
  color: var(--mxt-color-white) !important;
  transform: translateY(1px) !important;
  box-shadow:
    0px 2px 4px rgba(79, 142, 247, 0.2),
    inset 0px -4px 0px 0px rgba(79, 142, 247, 0.4),
    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================================
   HERO "Compromise." GHOST TEXT — Hard fix, force solid color no exceptions
   ========================================================================== */

.mxt-hero__title {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--mxt-color-dark) !important;
  color: var(--mxt-color-dark) !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Kill ANY child spans/em that might be getting invisible treatment */
.mxt-hero__title span,
.mxt-hero__title em,
.mxt-hero__title strong {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: inherit !important;
  color: inherit !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ==========================================================================
   CARD PRICE — No green "Free" ever. Override color to neutral dark.
   ========================================================================== */

.mxt-card-theme__price {
  color: var(--mxt-color-dark) !important;
  -webkit-text-fill-color: var(--mxt-color-dark) !important;
}

/* Kill any green "Free" display */
.mxt-card-theme__price--free,
.mxt-card-theme .mxt-price--free {
  color: var(--mxt-color-dark) !important;
  -webkit-text-fill-color: var(--mxt-color-dark) !important;
  background: none !important;
}

/* ==========================================================================
   SINGLE-THEME HERO BANNER — Compact, less vertical space
   ========================================================================== */

#mxt-wp-block-details-banner {
  padding-block: var(--mxt-spacing-sm) !important;
  background-color: var(--mxt-color-white) !important;
  border-block-end: 1px solid var(--mxt-border-color) !important;
}

#mxt-wp-block-details-banner .mxt-hero__title {
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
  margin-block-end: 4px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

/* Make the subtitle/description grey and smaller */
#mxt-wp-block-details-banner p {
  color: rgba(var(--mxt-color-dark-rgb), 0.45) !important;
  font-size: 0.78rem !important;
  margin: 0 !important;
}

/* ==========================================================================
   DETAILS BODY — Background, border, and big padding
   ========================================================================== */

.mxt-details-body {
  background: var(--mxt-color-white) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.07) !important;
  border-radius: 16px !important;
  padding: clamp(24px, 3vw, 40px) !important;
  box-shadow:
    0 1px 3px rgba(var(--mxt-color-dark-rgb), 0.04),
    0 4px 16px rgba(var(--mxt-color-dark-rgb), 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mxt-spacing-md) !important;
}

/* Description paragraphs — readable grey */
.mxt-details-body > div > p {
  color: rgba(var(--mxt-color-dark-rgb), 0.55) !important;
  font-size: 0.85rem !important;
  line-height: 1.75 !important;
}

/* Second paragraph hidden — too much text */
.mxt-details-body > div > p:nth-child(3) {
  display: none !important;
}

/* Section titles */
.mxt-details-section-title {
  font-family: 'Outfit', var(--mxt-font-sans) !important;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem) !important;
  font-weight: 700 !important;
  color: var(--mxt-color-dark) !important;
  margin-block-end: 10px !important;
  padding-block-end: 8px !important;
  border-block-end: 1px solid rgba(var(--mxt-color-dark-rgb), 0.06) !important;
}

/* Features list */
.mxt-details-features-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px 16px !important;
}

.mxt-details-features-list li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.82rem !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.7) !important;
}

.mxt-details-features-list svg {
  flex-shrink: 0 !important;
  color: var(--mxt-logo-blue) !important;
}

/* Meta spec box */
.mxt-details-meta-box {
  background: rgba(var(--mxt-color-dark-rgb), 0.025) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
}

.mxt-details-meta-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 24px !important;
}

.mxt-details-meta-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.mxt-details-meta-label {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.35) !important;
}

.mxt-details-meta-val {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--mxt-color-dark) !important;
}

/* Gallery image — full width no crop */
.mxt-details-gallery {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.07) !important;
}

.mxt-details-gallery img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: unset !important;
}


/* ==========================================================================
   DETAILS BODY — Gallery bleeds full width, text sections keep padding
   Left column gets priority width over sidebar
   ========================================================================== */

/* Widen the left column — left content is more important */
.mxt-details-grid {
  grid-template-columns: 590px 1fr !important;
  align-items: start !important;
}

/* Body card: remove horizontal padding — gallery handles its own edge */
.mxt-details-body {
  padding-inline: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: clamp(24px, 3vw, 40px) !important;
  overflow: hidden !important;
}

/* Gallery bleeds to full card width — top flush, rounded top corners */
.mxt-details-gallery {
  margin-block-start: 0 !important;
  margin-inline: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  border-inline: none !important;
  border-block-start: none !important;
  border-block-end: 1px solid rgba(var(--mxt-color-dark-rgb), 0.07) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.mxt-details-gallery img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: unset !important;
}

/* All text content sections INSIDE body get their own padding */
.mxt-details-body > div:not(.mxt-details-gallery) {
  padding-inline: clamp(20px, 3vw, 36px) !important;
}

/* Sidebar: auto width — takes remaining space */
.mxt-details-sidebar {
  width: 100% !important;
  min-width: 0 !important;
}

/* On smaller screens, stack */
@media (max-width: 1024px) {
  .mxt-details-grid {
    grid-template-columns: 1fr !important;
  }
  .mxt-details-body {
    order: 1 !important;
  }
  .mxt-details-sidebar {
    order: 0 !important;
  }
}


/* ==========================================================================
   DETAILS BODY — Bigger card with uniform padding, image fills padded width
   Grid column widens to give card more breathing room
   ========================================================================== */

/* Wider left column — card gets bigger overall */
.mxt-details-grid {
  grid-template-columns: minmax(590px, 680px) 1fr !important;
  gap: var(--mxt-spacing-lg) !important;
}

/* Card: generous padding ALL around including around the gallery */
.mxt-details-body {
  padding: clamp(20px, 2.5vw, 32px) !important;
  padding-block-start: clamp(20px, 2.5vw, 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--mxt-spacing-md) !important;
  overflow: hidden !important;
}

/* Gallery: no bleed — sits inside the padded card with its own rounded corners */
.mxt-details-gallery {
  margin-inline: 0 !important;
  margin-block-start: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(var(--mxt-color-dark-rgb), 0.06) !important;
}

/* Image: 100% of the padded card width — no stretch, no crop */
.mxt-details-gallery img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: unset !important;
}

/* Text sections: no extra padding needed, card padding handles it */
.mxt-details-body > div:not(.mxt-details-gallery) {
  padding-inline: 0 !important;
}

/* Responsive: collapse on small screens */
@media (max-width: 1080px) {
  .mxt-details-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   CATEGORY PILLS — Solid backgrounds, white text, always readable
   ========================================================================== */

/* Default category pill — solid blue-violet */
.mxt-card-theme__category {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: var(--mxt-logo-blue) !important;
  color: var(--mxt-color-white) !important;
  border: none !important;
  align-self: flex-start !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  opacity: 1 !important;
}

/* WordPress — solid WP blue */
.mxt-card-theme__category--wp {
  background: var(--mxt-cat-wp) !important;
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  border: none !important;
}

/* HTML Templates — solid orange-red */
.mxt-card-theme__category--html {
  background: var(--mxt-cat-html) !important;
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  border: none !important;
}

/* Webflow — solid logo-blue */
.mxt-card-theme__category--webflow {
  background: var(--mxt-logo-blue) !important;
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  border: none !important;
}

/* "FULLY UPDATED" banner badge on card */
.mxt-card-theme__badge {
  font-size: 0.55rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 3px 8px !important;
  border-radius: 0 0 0 8px !important;
  position: absolute !important;
  inset-block-start: 0 !important;
  inset-inline-end: 0 !important;
  z-index: 5 !important;
}

.mxt-card-theme__badge--updated {
  background: var(--mxt-color-success) !important;
  color: var(--mxt-color-white) !important;
}

/* ==========================================================================
   BUTTON HOVER — Gradient + TRUE 3D press-down (definitive final version)
   ========================================================================== */

/* PRIMARY press-down with gradient */
.mxt-btn--primary:hover,
.mxt-btn--3d-dark:hover {
  background: var(--mxt-btn-hover-gradient) !important;
  border-color: transparent !important;
  color: var(--mxt-color-white) !important;
  transform: translateY(2px) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.25),
    inset 0 -3px 0 0 rgba(30, 30, 80, 0.35),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.08s ease !important;
}

.mxt-btn--primary:active,
.mxt-btn--3d-dark:active {
  background: var(--mxt-btn-hover-gradient) !important;
  transform: translateY(4px) !important;
  box-shadow:
    0 0 2px rgba(0, 0, 0, 0.2),
    inset 0 -1px 0 0 rgba(30, 30, 80, 0.2),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
  transition: all 0.05s ease !important;
}

/* SECONDARY press-down with gradient */
.mxt-btn--secondary:hover,
.mxt-btn--3d-light:hover {
  background: var(--mxt-btn-hover-gradient) !important;
  border-color: transparent !important;
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  transform: translateY(2px) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 -3px 0 0 rgba(30, 30, 80, 0.3),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.08s ease !important;
}

.mxt-btn--secondary:active,
.mxt-btn--3d-light:active {
  background: var(--mxt-btn-hover-gradient) !important;
  transform: translateY(4px) !important;
  box-shadow:
    0 0 2px rgba(0, 0, 0, 0.15),
    inset 0 -1px 0 0 rgba(30, 30, 80, 0.15),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
  transition: all 0.05s ease !important;
}

/* MEMBERSHIP dark bg secondary button */
.mxt-membership-block .mxt-btn--secondary,
.mxt-membership-block .mxt-btn--3d-light {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.mxt-membership-block .mxt-btn--secondary:hover,
.mxt-membership-block .mxt-btn--3d-light:hover {
  background: var(--mxt-btn-hover-gradient) !important;
  border-color: transparent !important;
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  transform: translateY(2px) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.25),
    inset 0 -3px 0 0 rgba(30, 30, 80, 0.35),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
}

/* Smooth transition on resting state */
.mxt-btn--primary,
.mxt-btn--secondary,
.mxt-btn--3d-dark,
.mxt-btn--3d-light {
  transition: background 0.18s ease, transform 0.08s ease, box-shadow 0.08s ease, border-color 0.18s ease !important;
}


/* ==========================================================================
   DIRECTORY LAYOUT — Top padding so it doesn't glue to the section header
   ========================================================================== */

.mxt-directory__layout {
  margin-block-start: var(--mxt-spacing-xl) !important;
  padding-block-start: 0 !important;
}

/* Also give the section itself top breathing room */
#mxt-wp-block-themes-directory,
#mxt-wp-block-html-directory,
#mxt-wp-block-webflow-directory {
  padding-block-start: var(--mxt-spacing-xl) !important;
}


/* ==========================================================================
   PORTFON TYPOGRAPHY SYSTEM — Inter Display + Inter
   Modelled on: portfon.framer.website
   
   Inter Display — Display headings, section titles, hero text
   Inter         — Body copy, UI labels, nav, buttons
   
   Key characteristics:
     • Tight letter-spacing on headings (-0.03em to -0.06em)
     • Heavy weights (600-800) for headings
     • Line-height 1.05–1.1 for headings (ultra-compact)
     • Inter Display cv features: cv03, cv04, cv09, cv11
     • Light, readable body (400 weight, 1.6–1.7 line-height)
   ========================================================================== */

/* Update font variables */
:root {
  --mxt-font-display: 'Inter Display', 'Inter', -apple-system, sans-serif;
  --mxt-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mxt-font-mono: 'Inter', 'Fira Code', monospace;

  /* OpenType features matching Portfon */
  --mxt-font-features-display: "cv03" on, "cv04" on, "cv09" on, "cv11" on;
}

/* ── BODY — Clean Inter, light antialiased ── */
body {
  font-family: var(--mxt-font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--mxt-font-size-base) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "cv03" on, "cv04" on !important;
}

/* ── H1 — Inter Display, 600 weight, tight ── */
h1,
.mxt-hero__title {
  font-family: var(--mxt-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  font-feature-settings: var(--mxt-font-features-display) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── H2 — Inter Display, 500 weight, tighter ── */
h2,
.mxt-section-title,
.mxt-details-section-title {
  font-family: var(--mxt-font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.05em !important;
  line-height: 1.08 !important;
  font-feature-settings: var(--mxt-font-features-display) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── H3 — Inter Display, 600 weight ── */
h3,
.mxt-card-theme__name,
.mxt-card-theme__title,
.mxt-pricing-widget__price {
  font-family: var(--mxt-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  font-feature-settings: var(--mxt-font-features-display) !important;
}

/* ── H4, H5, H6 — Inter Display, medium ── */
h4, h5, h6 {
  font-family: var(--mxt-font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  font-feature-settings: var(--mxt-font-features-display) !important;
}

/* ── Hero display headline — massive, bold ── */
.mxt-hero__title {
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.04 !important;
}

/* ── Navigation links — Inter, medium ── */
.mxt-nav__link,
.mxt-logo__title,
.mxt-logo__subtitle {
  font-family: var(--mxt-font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* ── Logo title — Inter Display, semibold ── */
.mxt-logo__title {
  font-family: var(--mxt-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

/* ── Buttons — Inter, semibold ── */
.mxt-btn,
.mxt-btn--primary,
.mxt-btn--secondary,
.mxt-btn--3d-dark,
.mxt-btn--3d-light {
  font-family: var(--mxt-font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ── Cards — Inter Display headings, Inter body ── */
.mxt-card-theme__name {
  font-family: var(--mxt-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  font-size: clamp(0.8rem, 0.9vw, 0.95rem) !important;
}

.mxt-card-theme__subtitle {
  font-family: var(--mxt-font-sans) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}

.mxt-card-theme__price {
  font-family: var(--mxt-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

/* ── Section/page titles ── */
.mxt-section-header__title,
.mxt-section__title {
  font-family: var(--mxt-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.06 !important;
}

/* ── Membership section ── */
.mxt-membership-block h2 {
  font-family: var(--mxt-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  line-height: 1.0 !important;
}

/* ── Pricing widget ── */
.mxt-pricing-widget__price {
  font-family: var(--mxt-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

/* ── Sidebar nav ── */
.mxt-sidebar__section-title,
.mxt-sidebar__nav-link,
.mxt-sidebar__checkbox-text {
  font-family: var(--mxt-font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* ── Footer ── */
.mxt-footer {
  font-family: var(--mxt-font-sans) !important;
}

.mxt-footer__title {
  font-family: var(--mxt-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}

/* ── Badge / labels ── */
.mxt-badge,
.mxt-card-theme__category {
  font-family: var(--mxt-font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* ── Small text / meta ── */
small, .mxt-meta, .mxt-pricing-widget__description {
  font-family: var(--mxt-font-sans) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
}

/* ── Search input ── */
.mxt-search__input,
input, select, textarea {
  font-family: var(--mxt-font-sans) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

/* ── Hero badge chip ── */
.mxt-hero__badge {
  font-family: var(--mxt-font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/* ── Results header (directory) ── */
.mxt-results-header__title {
  font-family: var(--mxt-font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* ── Utilities ── */
.mxt-nowrap {
  white-space: nowrap;
}

/* ── Mockup Dots Overrides ── */
.mxt-window-frame__dot {
  background-color: var(--mxt-color-white) !important;
  opacity: 0.25 !important;
}

/* ── Remove Header Box Shadow Overridden ── */
/* ── Amazing 3D Header & Elements styling ── */
.mxt-header,
.mxt-header.sticky {
  position: fixed !important;
  inset-block-start: 0 !important;
  inset-inline: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  background-color: var(--mxt-color-white) !important;
  background-image: none !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 4px solid rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  box-shadow: 
    0 4px 20px rgba(var(--mxt-color-dark-rgb), 0.04) !important;
  backdrop-filter: none !important;
  transition: all var(--mxt-transition-normal) !important;
  z-index: 1000 !important;
}

.mxt-header__wrapper {
  padding-inline: var(--mxt-spacing-lg) !important;
}

/* 3D Styling for primary button in header and page */
.mxt-header__actions .mxt-btn--primary,
.mxt-btn--primary {
  border-radius: var(--mxt-radius-full) !important;
  border: 1px solid rgba(var(--mxt-color-primary-rgb), 0.15) !important;
  border-bottom: 3.5px solid rgba(var(--mxt-color-primary-rgb), 0.45) !important;
  box-shadow: 
    0 4px 14px rgba(var(--mxt-color-primary-rgb), 0.25),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.35) !important;
  transition: all var(--mxt-transition-fast) !important;
}

.mxt-header__actions .mxt-btn--primary:hover,
.mxt-btn--primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 
    0 6px 20px rgba(var(--mxt-color-primary-rgb), 0.35),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45) !important;
  border-bottom-width: 2.5px !important;
}

/* 3D Styling for header buttons like sign in, cart, search */
.mxt-header__search-btn,
.mxt-header__cart-btn,
.mxt-header__sign-in {
  border-radius: var(--mxt-radius-full) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  border-bottom: 2.5px solid rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  background-color: var(--mxt-color-white) !important;
  box-shadow: 
    0 2px 4px rgba(var(--mxt-color-dark-rgb), 0.03),
    inset 0 1px 0 var(--mxt-color-white) !important;
  transition: all var(--mxt-transition-fast) !important;
}

.mxt-header__search-btn {
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mxt-header__cart-btn {
  padding-block: 10px !important;
  padding-inline: 14px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.mxt-header__sign-in {
  padding-block: 10px !important;
  padding-inline: 20px !important;
  font-weight: 600 !important;
  font-size: var(--mxt-font-size-sm) !important;
  text-decoration: none !important;
}

/* Hover effects for 3D header interactive items */
.mxt-header__search-btn:hover,
.mxt-header__cart-btn:hover,
.mxt-header__sign-in:hover {
  background-color: var(--mxt-color-light) !important;
  transform: translateY(-0.5px) !important;
  border-bottom-width: 1.5px !important;
}

/* ── Giant Fading Overlay Background Text ── */
.mxt-hero__bg-text {
  position: absolute !important;
  inset-block-start: 50% !important;
  inset-inline-start: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: clamp(120px, 26vw, 420px) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.05em !important;
  line-height: 0.9 !important;
  background: linear-gradient(to bottom, rgba(var(--mxt-color-primary-rgb), 0.055) 0%, rgba(var(--mxt-color-dark-rgb), 0) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  pointer-events: none !important;
  z-index: 1 !important;
  user-select: none !important;
  white-space: nowrap !important;
}

/* ── Premium 3D Features Section & Card Overrides ── */
.mxt-card-feature {
  background-color: var(--mxt-color-white) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-bottom: 4.5px solid rgba(var(--mxt-color-dark-rgb), 0.16) !important;
  box-shadow: 
    0 4px 12px rgba(var(--mxt-color-dark-rgb), 0.02),
    inset 0 1.5px 0 var(--mxt-color-white) !important;
  padding: 32px !important;
  transition: all var(--mxt-transition-normal) !important;
  position: relative !important;
}

/* Hover state: beautiful float-up and gradient shadow, with primary color 3D bevel */
.mxt-card-feature:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(var(--mxt-color-primary-rgb), 0.15) !important;
  border-bottom: 5.5px solid rgba(var(--mxt-color-primary-rgb), 0.65) !important;
  box-shadow: 
    0 16px 36px rgba(var(--mxt-color-primary-rgb), 0.12),
    inset 0 1.5px 0 var(--mxt-color-white) !important;
}

/* 3D icon badge styling */
.mxt-card-feature__icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--mxt-radius-full) !important;
  background-color: var(--mxt-color-white) !important;
  color: var(--mxt-color-primary) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-bottom: 3.5px solid rgba(var(--mxt-color-dark-rgb), 0.16) !important;
  box-shadow: 
    0 2px 4px rgba(var(--mxt-color-dark-rgb), 0.03),
    inset 0 1px 0 var(--mxt-color-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-block-end: 24px !important;
  transition: all var(--mxt-transition-fast) !important;
}

/* Hover animations for icons */
.mxt-card-feature:hover .mxt-card-feature__icon {
  color: var(--mxt-color-white) !important;
  background: var(--mxt-gradient-primary) !important;
  border-color: rgba(var(--mxt-color-primary-rgb), 0.15) !important;
  border-bottom-color: rgba(var(--mxt-color-primary-rgb), 0.45) !important;
  transform: scale(1.08) rotate(5deg) !important;
}

/* 3D styling for secondary buttons in features and page */
.mxt-btn--secondary {
  border-radius: var(--mxt-radius-full) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-bottom: 3.5px solid rgba(var(--mxt-color-dark-rgb), 0.18) !important;
  background-color: var(--mxt-color-white) !important;
  box-shadow: 
    0 2px 4px rgba(var(--mxt-color-dark-rgb), 0.03),
    inset 0 1px 0 var(--mxt-color-white) !important;
  transition: all var(--mxt-transition-fast) !important;
}

.mxt-btn--secondary:hover {
  background-color: var(--mxt-color-light) !important;
  transform: translateY(-0.5px) !important;
  border-bottom-width: 1.5px !important;
}

/* ── Premium 3D Newsletter Box Overrides ── */
.mxt-newsletter-box {
  background-color: var(--mxt-color-white) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-bottom: 4.5px solid rgba(var(--mxt-color-dark-rgb), 0.16) !important;
  box-shadow: 
    0 12px 36px rgba(var(--mxt-color-dark-rgb), 0.06),
    inset 0 1.5px 0 var(--mxt-color-white) !important;
  border-radius: 24px !important;
  padding: 32px var(--mxt-spacing-lg) !important;
  transition: all var(--mxt-transition-normal) !important;
}

.mxt-newsletter-box:hover {
  transform: translateY(-2px) !important;
  box-shadow: 
    0 16px 48px rgba(var(--mxt-color-dark-rgb), 0.08),
    inset 0 1.5px 0 var(--mxt-color-white) !important;
}

/* 3D styling for newsletter icon badge */
.mxt-newsletter-box > div > div:first-child {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--mxt-radius-full) !important;
  background-color: var(--mxt-color-white) !important;
  color: var(--mxt-color-primary) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-bottom: 3.5px solid rgba(var(--mxt-color-dark-rgb), 0.16) !important;
  box-shadow: 
    0 2px 4px rgba(var(--mxt-color-dark-rgb), 0.03),
    inset 0 1px 0 var(--mxt-color-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--mxt-transition-fast) !important;
}

.mxt-newsletter-box:hover > div > div:first-child {
  color: var(--mxt-color-white) !important;
  background: var(--mxt-gradient-primary) !important;
  border-color: rgba(var(--mxt-color-primary-rgb), 0.15) !important;
  border-bottom-color: rgba(var(--mxt-color-primary-rgb), 0.45) !important;
  transform: scale(1.08) rotate(5deg) !important;
}

/* 3D styling for newsletter input field */
.mxt-newsletter-box form input[type="email"] {
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  background-color: var(--mxt-color-light) !important;
  box-shadow: inset 0 2px 4px rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  border-radius: var(--mxt-radius-full) !important;
  padding: 12px 20px !important;
  font-size: var(--mxt-font-size-sm) !important;
  transition: all var(--mxt-transition-fast) !important;
}

.mxt-newsletter-box form input[type="email"]:focus {
  border-color: var(--mxt-color-primary) !important;
  background-color: var(--mxt-color-white) !important;
  box-shadow: 
    0 0 0 3px rgba(var(--mxt-color-primary-rgb), 0.15),
    inset 0 1.5px 3px rgba(var(--mxt-color-dark-rgb), 0.04) !important;
  outline: none !important;
}

/* ── Premium Glossy Metallic 3D Badges ── */
.mxt-card-feature__icon,
.mxt-newsletter-box > div > div:first-child {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--mxt-radius-full) !important;
  background: linear-gradient(135deg, var(--mxt-color-white) 0%, rgba(var(--mxt-color-light-rgb), 0.95) 45%, rgba(var(--mxt-color-dark-rgb), 0.12) 100%) !important;
  color: var(--mxt-color-dark) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  border-bottom: 2.5px solid rgba(var(--mxt-color-dark-rgb), 0.25) !important;
  box-shadow: 
    0 2px 5px rgba(var(--mxt-color-dark-rgb), 0.05),
    inset 0 1.5px 0 var(--mxt-color-white),
    inset 0 -1.5px 4px rgba(var(--mxt-color-dark-rgb), 0.03) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-block-end: 24px !important;
  transition: all var(--mxt-transition-fast) !important;
}

/* Hover dynamic metallic shine bounce */
.mxt-card-feature:hover .mxt-card-feature__icon,
.mxt-newsletter-box:hover > div > div:first-child {
  transform: scale(1.08) rotate(3deg) !important;
  background: linear-gradient(135deg, var(--mxt-color-white) 0%, rgba(var(--mxt-color-light-rgb), 0.98) 35%, rgba(var(--mxt-color-dark-rgb), 0.16) 100%) !important;
  border-color: rgba(var(--mxt-color-dark-rgb), 0.15) !important;
  border-bottom-color: rgba(var(--mxt-color-dark-rgb), 0.3) !important;
  box-shadow: 
    0 4px 10px rgba(var(--mxt-color-dark-rgb), 0.08),
    inset 0 1.5px 0 var(--mxt-color-white),
    inset 0 -2px 5px rgba(var(--mxt-color-dark-rgb), 0.04) !important;
  color: var(--mxt-color-primary) !important;
}

/* ── Premium Clean Theme Cards Overrides ── */
.mxt-card-theme {
  background-color: var(--mxt-color-white) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  box-shadow: 
    0 4px 20px rgba(var(--mxt-color-dark-rgb), 0.03),
    inset 0 1px 0 var(--mxt-color-white) !important;
  transition: all var(--mxt-transition-normal) !important;
  overflow: hidden !important;
  transform: translateY(0) !important;
}

/* Hide all top and bottom gradient accent line overlays entirely */
.mxt-card-theme::before,
.mxt-card-theme::after,
.mxt-card-theme:hover::before,
.mxt-card-theme:hover::after {
  display: none !important;
  content: none !important;
}

/* Hover state: beautiful soft lift-up with a subtle modern shadow and light grey border */
.mxt-card-theme:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  box-shadow: 
    0 12px 30px rgba(var(--mxt-color-dark-rgb), 0.06),
    inset 0 1px 0 var(--mxt-color-white) !important;
}

/* Card image highlight parallax on hover */
.mxt-card-theme__image-holder {
  border-bottom: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
}
.mxt-card-theme:hover .mxt-card-theme__image {
  transform: scale(1.06) translateY(-2px) !important;
}

/* Category Badge upgrade with correct text visibility and clean capsule shape */
.mxt-card-theme__category {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 4px 12px !important;
  border-radius: var(--mxt-radius-full) !important;
  align-self: flex-start !important;
  opacity: 1 !important;
  
  /* Clean modern styling */
  background: var(--mxt-color-primary) !important;
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  border: 1px solid rgba(var(--mxt-color-white-rgb), 0.15) !important;
  box-shadow: none !important;
  transition: all var(--mxt-transition-fast) !important;
}

/* Support specific category color variables with 3D elements */
.mxt-card-theme__category--wp {
  background: var(--mxt-cat-wp) !important;
  border-color: rgba(var(--mxt-color-white-rgb), 0.15) !important;
  border-bottom-color: rgba(var(--mxt-color-dark-rgb), 0.2) !important;
}
.mxt-card-theme__category--html {
  background: var(--mxt-cat-html) !important;
  border-color: rgba(var(--mxt-color-white-rgb), 0.15) !important;
  border-bottom-color: rgba(var(--mxt-color-dark-rgb), 0.2) !important;
}
.mxt-card-theme__category--webflow {
  background: var(--mxt-logo-blue) !important;
  border-color: rgba(var(--mxt-color-white-rgb), 0.15) !important;
  border-bottom-color: rgba(var(--mxt-color-dark-rgb), 0.2) !important;
}

.mxt-card-theme:hover .mxt-card-theme__category {
  transform: scale(1.04) !important;
}

/* Title link transition */
.mxt-card-theme__title a {
  color: var(--mxt-color-dark) !important;
  text-decoration: none !important;
  transition: color var(--mxt-transition-fast) !important;
}
.mxt-card-theme:hover .mxt-card-theme__title a {
  color: var(--mxt-color-primary) !important;
}

/* Price accentuation */
.mxt-card-theme__price {
  font-weight: 800 !important;
  color: var(--mxt-color-dark) !important;
  font-size: var(--mxt-font-size-2xl) !important;
  letter-spacing: -0.02em !important;
}

/* Unique 3D Add-to-Cart Button */
.mxt-card-theme__btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--mxt-radius-full) !important;
  background-color: var(--mxt-color-white) !important;
  color: var(--mxt-color-dark) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-bottom: 3px solid rgba(var(--mxt-color-dark-rgb), 0.18) !important;
  box-shadow: 
    0 2px 4px rgba(var(--mxt-color-dark-rgb), 0.03),
    inset 0 1px 0 var(--mxt-color-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all var(--mxt-transition-fast) !important;
}

/* Hover state for add-to-cart button */
.mxt-card-theme__btn:hover {
  background: var(--mxt-gradient-primary) !important;
  color: var(--mxt-color-white) !important;
  border-color: rgba(var(--mxt-color-primary-rgb), 0.15) !important;
  border-bottom-color: rgba(var(--mxt-color-primary-rgb), 0.45) !important;
  transform: scale(1.06) !important;
}

.mxt-card-theme__btn svg {
  transition: transform var(--mxt-transition-fast) !important;
}

.mxt-card-theme__btn:hover svg {
  transform: scale(1.1) !important;
}

/* ── Catalog Spacing Overrides ── */
/* Add spacing between the grid wrapper and page title background area */
#mxt-wp-block-themes-grid {
  padding-block-start: var(--mxt-spacing-xl) !important;
}

/* ── Category Badge Color & Readability Overrides ── */
/* Force solid brand colors on category badges for clear white-text readability */
.mxt-card-theme[data-category*="html"] .mxt-card-theme__category,
.mxt-card-theme__category--html {
  background: var(--mxt-cat-html) !important;
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}

.mxt-card-theme[data-category*="wp"] .mxt-card-theme__category,
.mxt-card-theme__category--wp {
  background: var(--mxt-cat-wp) !important;
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}

.mxt-card-theme[data-category*="webflow"] .mxt-card-theme__category,
.mxt-card-theme__category--webflow {
  background: var(--mxt-logo-blue) !important;
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}

/* Ensure hover states retain solid brand backgrounds and white text */
.mxt-card-theme:hover[data-category*="html"] .mxt-card-theme__category {
  background: var(--mxt-cat-html) !important;
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
}

.mxt-card-theme:hover[data-category*="wp"] .mxt-card-theme__category {
  background: var(--mxt-cat-wp) !important;
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
}

.mxt-card-theme:hover[data-category*="webflow"] .mxt-card-theme__category {
  background: var(--mxt-logo-blue) !important;
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
}

/* ==========================================================================
   PREMIUM SIDEBAR REDESIGN OVERRIDES (2026 SPEC)
   ========================================================================== */
aside.mxt-directory__sidebar {
  background: var(--mxt-color-white) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  border-radius: 20px !important;
  box-shadow: 
    0 4px 20px rgba(var(--mxt-color-dark-rgb), 0.02),
    0 20px 40px rgba(var(--mxt-color-dark-rgb), 0.03) !important;
  padding: 24px !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__header {
  padding: 0 0 16px 0 !important;
  background: transparent !important;
  border-block-end: 1px solid rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  margin-block-end: 8px !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__main-title {
  font-family: var(--mxt-font-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: var(--mxt-color-dark) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__widget {
  padding: 20px 0 !important;
  border-block-end: 1px solid rgba(var(--mxt-color-dark-rgb), 0.05) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__widget:last-of-type {
  border-block-end: none !important;
  padding-block-end: 0 !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__widget-title {
  font-family: var(--mxt-font-sans) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.4) !important;
  margin-block-end: 12px !important;
}

/* Search Wrapper Upgrade */
aside.mxt-directory__sidebar .mxt-sidebar__search-input {
  padding: 12px 40px 12px 16px !important;
  border: 1.5px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-radius: 12px !important;
  background: rgba(var(--mxt-color-dark-rgb), 0.015) !important;
  font-size: 0.82rem !important;
  transition: all var(--mxt-transition-fast) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__search-input:focus {
  border-color: rgba(var(--mxt-color-primary-rgb), 0.3) !important;
  background: var(--mxt-color-white) !important;
  box-shadow: 0 0 0 4px rgba(var(--mxt-color-primary-rgb), 0.05) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__search-icon {
  inset-inline-end: 16px !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.35) !important;
}

/* Platform Filter List (Modern Pill Design) */
aside.mxt-directory__sidebar .mxt-sidebar__link,
aside.mxt-directory__sidebar .mxt-sidebar-btn {
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.6) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all var(--mxt-transition-fast) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__link:hover,
aside.mxt-directory__sidebar .mxt-sidebar-btn:hover {
  background: rgba(var(--mxt-color-primary-rgb), 0.03) !important;
  color: var(--mxt-color-primary) !important;
  transform: translateX(2px) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__link--active,
aside.mxt-directory__sidebar .mxt-sidebar-btn.mxt-filter-btn--active {
  background: rgba(var(--mxt-color-primary-rgb), 0.06) !important;
  color: var(--mxt-color-primary) !important;
  border-color: rgba(var(--mxt-color-primary-rgb), 0.12) !important;
  font-weight: 700 !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__link--active:hover,
aside.mxt-directory__sidebar .mxt-sidebar-btn.mxt-filter-btn--active:hover {
  background: rgba(var(--mxt-color-primary-rgb), 0.08) !important;
  transform: none !important;
}

/* Sidebar Count Badges */
aside.mxt-directory__sidebar .mxt-sidebar__badge,
aside.mxt-directory__sidebar .mxt-sidebar-badge {
  min-width: 24px !important;
  height: 20px !important;
  border-radius: var(--mxt-radius-full) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  background: rgba(var(--mxt-color-dark-rgb), 0.04) !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.45) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.02) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__link--active .mxt-sidebar__badge,
aside.mxt-directory__sidebar .mxt-sidebar-btn.mxt-filter-btn--active .mxt-sidebar-badge {
  background: var(--mxt-color-primary) !important;
  color: var(--mxt-color-white) !important;
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  border-color: rgba(var(--mxt-color-white-rgb), 0.1) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__link:hover .mxt-sidebar__badge,
aside.mxt-directory__sidebar .mxt-sidebar-btn:hover .mxt-sidebar-badge {
  background: rgba(var(--mxt-color-primary-rgb), 0.08) !important;
  color: var(--mxt-color-primary) !important;
}

/* Checkbox Labels (Categories) */
aside.mxt-directory__sidebar .mxt-sidebar__checkbox-label {
  padding: 8px 6px !important;
  border-radius: 10px !important;
  transition: all var(--mxt-transition-fast) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__checkbox-label:hover {
  background: rgba(var(--mxt-color-primary-rgb), 0.03) !important;
  color: var(--mxt-color-dark) !important;
}

/* Custom Premium Checkbox Styling */
aside.mxt-directory__sidebar .mxt-sidebar__checkbox {
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  border: 1.5px solid rgba(var(--mxt-color-dark-rgb), 0.15) !important;
  background: var(--mxt-color-white) !important;
  transition: all var(--mxt-transition-fast) !important;
  position: relative !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__checkbox:hover {
  border-color: var(--mxt-color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--mxt-color-primary-rgb), 0.08) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__checkbox:checked {
  background: var(--mxt-color-primary) !important;
  border-color: var(--mxt-color-primary) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__checkbox:checked::after {
  content: '' !important;
  position: absolute !important;
  inset-block-start: 3px !important;
  inset-inline-start: 5px !important;
  width: 4px !important;
  height: 7px !important;
  border: 2px solid var(--mxt-color-white) !important;
  border-block-start: none !important;
  border-inline-start: none !important;
  transform: rotate(45deg) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__checkbox-text {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
}

/* Clear Filters Button */
aside.mxt-directory__sidebar .mxt-sidebar__clear-btn {
  padding: 12px !important;
  border-radius: 12px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  background: rgba(239, 68, 68, 0.04) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.1) !important;
  transition: all var(--mxt-transition-fast) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__clear-btn:hover {
  background: #ef4444 !important;
  color: var(--mxt-color-white) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   SOVEREIGN ELITE PREMIUM VISUAL REFINEMENT (FLAT & SOFT STYLES)
   ========================================================================== */

/* 1. Feature Cards Reset */
.mxt-card-feature {
  background-color: var(--mxt-color-white) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-bottom: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  box-shadow: 
    0 4px 20px rgba(var(--mxt-color-dark-rgb), 0.03),
    inset 0 1px 0 var(--mxt-color-white) !important;
  padding: 32px !important;
  transition: all var(--mxt-transition-normal) !important;
  position: relative !important;
}

.mxt-card-feature:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  border-bottom: 1px solid rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  box-shadow: 
    0 12px 30px rgba(var(--mxt-color-dark-rgb), 0.06),
    inset 0 1px 0 var(--mxt-color-white) !important;
}

/* Feature & Newsletter Icon reset */
.mxt-card-feature__icon,
.mxt-newsletter-box > div > div:first-child {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--mxt-radius-full) !important;
  background: rgba(var(--mxt-color-primary-rgb), 0.06) !important;
  color: var(--mxt-color-primary) !important;
  border: 1px solid rgba(var(--mxt-color-primary-rgb), 0.08) !important;
  border-bottom: 1px solid rgba(var(--mxt-color-primary-rgb), 0.08) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-block-end: 24px !important;
  transition: all var(--mxt-transition-fast) !important;
}

.mxt-card-feature:hover .mxt-card-feature__icon,
.mxt-newsletter-box:hover > div > div:first-child {
  transform: scale(1.06) !important;
  background: var(--mxt-color-primary) !important;
  color: var(--mxt-color-white) !important;
  border-color: var(--mxt-color-primary) !important;
  border-bottom-color: var(--mxt-color-primary) !important;
}

/* 2. Testimonial Cards Reset */
.mxt-card-testimonial {
  background-color: var(--mxt-color-white) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-bottom: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  box-shadow: 
    0 4px 20px rgba(var(--mxt-color-dark-rgb), 0.03),
    inset 0 1px 0 var(--mxt-color-white) !important;
  padding: 32px !important;
  transition: all var(--mxt-transition-normal) !important;
}

.mxt-card-testimonial:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  border-bottom: 1px solid rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  box-shadow: 
    0 12px 30px rgba(var(--mxt-color-dark-rgb), 0.06),
    inset 0 1px 0 var(--mxt-color-white) !important;
}

/* 3. Newsletter Box Reset */
.mxt-newsletter-box {
  background-color: var(--mxt-color-white) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-bottom: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 
    0 4px 20px rgba(var(--mxt-color-dark-rgb), 0.03),
    inset 0 1px 0 var(--mxt-color-white) !important;
  padding: 32px var(--mxt-spacing-lg) !important;
  transition: all var(--mxt-transition-normal) !important;
}

.mxt-newsletter-box:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  border-bottom: 1px solid rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  box-shadow: 
    0 12px 30px rgba(var(--mxt-color-dark-rgb), 0.06),
    inset 0 1px 0 var(--mxt-color-white) !important;
}

.mxt-newsletter-box form input[type="email"] {
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  background-color: var(--mxt-color-light) !important;
  box-shadow: none !important;
  border-radius: var(--mxt-radius-full) !important;
  padding: 12px 20px !important;
  font-size: var(--mxt-font-size-sm) !important;
  transition: all var(--mxt-transition-fast) !important;
}

.mxt-newsletter-box form input[type="email"]:focus {
  border-color: var(--mxt-color-primary) !important;
  background-color: var(--mxt-color-white) !important;
  box-shadow: 0 0 0 3px rgba(var(--mxt-color-primary-rgb), 0.12) !important;
  outline: none !important;
}

/* 4. Service Cards Reset (services.html) */
.mxt-card-service {
  background-color: var(--mxt-color-white) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-bottom: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  box-shadow: 
    0 4px 20px rgba(var(--mxt-color-dark-rgb), 0.03),
    inset 0 1px 0 var(--mxt-color-white) !important;
  padding: 32px !important;
  transition: all var(--mxt-transition-normal) !important;
  display: flex !important;
  flex-direction: column !important;
}

.mxt-card-service:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  border-bottom: 1px solid rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  box-shadow: 
    0 12px 30px rgba(var(--mxt-color-dark-rgb), 0.06),
    inset 0 1px 0 var(--mxt-color-white) !important;
}

.mxt-card-service__icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--mxt-radius-full) !important;
  background: rgba(var(--mxt-color-primary-rgb), 0.06) !important;
  color: var(--mxt-color-primary) !important;
  border: 1px solid rgba(var(--mxt-color-primary-rgb), 0.08) !important;
  border-bottom: 1px solid rgba(var(--mxt-color-primary-rgb), 0.08) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-block-end: 24px !important;
  transition: all var(--mxt-transition-fast) !important;
}

.mxt-card-service:hover .mxt-card-service__icon {
  transform: scale(1.06) !important;
  background: var(--mxt-color-primary) !important;
  color: var(--mxt-color-white) !important;
  border-color: var(--mxt-color-primary) !important;
  border-bottom-color: var(--mxt-color-primary) !important;
}

.mxt-card-service__badge {
  background-color: rgba(var(--mxt-color-primary-rgb), 0.06) !important;
  color: var(--mxt-color-primary) !important;
  font-weight: 700 !important;
  font-size: var(--mxt-font-size-sm) !important;
  padding-block: 6px !important;
  padding-inline: 12px !important;
  border-radius: var(--mxt-radius-full) !important;
}

.mxt-card-service__badge--success {
  background-color: rgba(var(--mxt-color-success-rgb), 0.1) !important;
  color: var(--mxt-color-success) !important;
}

.mxt-card-service__title {
  font-size: var(--mxt-font-size-lg) !important;
  font-weight: 800 !important;
  color: var(--mxt-color-dark) !important;
  margin-block-end: 12px !important;
}

.mxt-card-service__desc {
  font-size: var(--mxt-font-size-sm) !important;
  color: var(--mxt-color-text-muted) !important;
  line-height: 1.6 !important;
  margin-block-end: var(--mxt-spacing-md) !important;
  flex-grow: 1 !important;
}

.mxt-card-service__list-item {
  font-size: var(--mxt-font-size-sm) !important;
  color: var(--mxt-color-dark-accent) !important;
}

/* Force 3 columns on desktop for perfect balance */
@media (min-width: 1024px) {
  .mxt-grid-services {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==========================================================================
   CARDS VISUAL OVERRIDES & HOVER PRICE COLORIZATION
   ========================================================================== */

/* Cart Button Reset (Both classes) */
.mxt-card-theme__btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--mxt-radius-full) !important;
  background: var(--mxt-color-white) !important;
  background-color: var(--mxt-color-white) !important;
  color: var(--mxt-color-primary) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-bottom: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  box-shadow: 0 2px 8px rgba(var(--mxt-color-dark-rgb), 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all var(--mxt-transition-fast) !important;
}

/* Hover state: nice blue matching button hovers, flat, no inset/bevel shadow */
.mxt-card-theme__btn:hover {
  background: var(--mxt-color-primary) !important;
  background-color: var(--mxt-color-primary) !important;
  color: var(--mxt-color-white) !important;
  border-color: var(--mxt-color-primary) !important;
  border-bottom-color: var(--mxt-color-primary) !important;
  box-shadow: 0 6px 16px rgba(var(--mxt-color-primary-rgb), 0.25) !important;
  transform: translateY(-2px) scale(1.05) !important;
}

/* Price colorization on card hover */
.mxt-card-theme:hover .mxt-card-theme__price {
  color: var(--mxt-color-primary) !important;
  transition: color var(--mxt-transition-fast) !important;
}

/* ==========================================================================
   SERVICES PAGE COMPREHENSIVE REDESIGN STYLE OVERRIDES
   ========================================================================== */

/* 1. Hero Redesign */
.mxt-services-hero {
  position: relative !important;
  background: radial-gradient(circle at 10% 20%, rgba(var(--mxt-color-primary-rgb), 0.04) 0%, transparent 50%),
              radial-gradient(circle at 90% 80%, rgba(var(--mxt-color-secondary-rgb), 0.03) 0%, transparent 50%),
              var(--mxt-color-white) !important;
  padding-block: clamp(80px, 8vw, 140px) clamp(60px, 6vw, 100px) !important;
  border-bottom: 1px solid var(--mxt-border-color) !important;
}
.mxt-services-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: linear-gradient(rgba(var(--mxt-color-dark-rgb), 0.015) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(var(--mxt-color-dark-rgb), 0.015) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  mask-image: radial-gradient(ellipse at center, black, transparent 80%) !important;
  -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 80%) !important;
  pointer-events: none !important;
}

/* Section Titles */
.mxt-section-header--services {
  text-align: center !important;
  margin-block-end: clamp(40px, 5vw, 64px) !important;
}
.mxt-section-header__tagline {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: var(--mxt-color-primary) !important;
  margin-block-end: 12px !important;
  display: inline-block !important;
}

/* 2. Section 1: Launch & Setup Card Overrides */
.mxt-card-service-launch {
  background: var(--mxt-color-white) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  box-shadow: 0 4px 20px rgba(var(--mxt-color-dark-rgb), 0.02) !important;
  transition: all var(--mxt-transition-normal) !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}
.mxt-card-service-launch:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(var(--mxt-color-primary-rgb), 0.2) !important;
  box-shadow: 0 12px 30px rgba(var(--mxt-color-primary-rgb), 0.08) !important;
}
.mxt-card-service-launch__badge {
  background: rgba(var(--mxt-color-primary-rgb), 0.06) !important;
  color: var(--mxt-color-primary) !important;
  font-weight: 800 !important;
  font-size: var(--mxt-font-size-md) !important;
  padding: 6px 14px !important;
  border-radius: 99px !important;
  align-self: flex-start !important;
  margin-block-end: 20px !important;
}

/* 3. Section 2: Improve & Grow Dark Glassmorphism */
.mxt-section-improve-dark {
  background-color: var(--mxt-color-dark) !important; /* Midnight dark bg */
  color: var(--mxt-color-white) !important;
  padding-block: clamp(80px, 8vw, 120px) !important;
  position: relative !important;
  overflow: hidden !important;
}
.mxt-section-improve-dark::before {
  content: '' !important;
  position: absolute !important;
  inset-block-start: -20% !important;
  inset-inline-start: -10% !important;
  width: 60% !important;
  height: 140% !important;
  background: radial-gradient(circle, rgba(var(--mxt-color-primary-rgb), 0.05) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
.mxt-card-service-improve {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  transition: all var(--mxt-transition-normal) !important;
  display: flex !important;
  flex-direction: column !important;
}
.mxt-card-service-improve:hover {
  transform: translateY(-6px) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(var(--mxt-color-primary-rgb), 0.3) !important;
  box-shadow: 0 15px 40px rgba(var(--mxt-color-primary-rgb), 0.15) !important;
}
.mxt-card-service-improve__icon {
  width: 48px !important;
  height: 48px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--mxt-color-secondary) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-block-end: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.mxt-card-service-improve:hover .mxt-card-service-improve__icon {
  background: var(--mxt-color-primary) !important;
  color: var(--mxt-color-white) !important;
  border-color: var(--mxt-color-primary) !important;
}
.mxt-card-service-improve__badge {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--mxt-color-white) !important;
  font-weight: 800 !important;
  font-size: var(--mxt-font-size-md) !important;
  padding: 6px 14px !important;
  border-radius: 99px !important;
  align-self: flex-start !important;
  margin-block-end: 20px !important;
}
.mxt-card-service-improve__title {
  color: var(--mxt-color-white) !important;
  font-size: var(--mxt-font-size-lg) !important;
  font-weight: 700 !important;
  margin-block-end: 12px !important;
}
.mxt-card-service-improve__desc {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: var(--mxt-font-size-sm) !important;
  line-height: 1.6 !important;
  margin-block-end: 20px !important;
  flex-grow: 1 !important;
}

/* 4. Section 3: Monthly Plans comparison table + emergency fixes grid */
.mxt-support-section {
  background-color: var(--mxt-color-white) !important;
  padding-block: clamp(80px, 8vw, 120px) !important;
}
.mxt-support-layout {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 40px !important;
  align-items: start !important;
}
.mxt-monthly-plans-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}
.mxt-plan-card {
  background: var(--mxt-color-white) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transition: all var(--mxt-transition-normal) !important;
}
.mxt-plan-card--featured {
  border: 2px solid var(--mxt-color-primary) !important;
  box-shadow: 0 10px 30px rgba(var(--mxt-color-primary-rgb), 0.06) !important;
}
.mxt-plan-card--featured::before {
  content: 'POPULAR' !important;
  position: absolute !important;
  inset-block-start: -12px !important;
  inset-inline-start: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--mxt-color-primary) !important;
  color: var(--mxt-color-white) !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
}
.mxt-plan-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06) !important;
}
.mxt-plan-card__title {
  font-size: var(--mxt-font-size-lg) !important;
  font-weight: 800 !important;
  color: var(--mxt-color-dark) !important;
  margin-block-end: 8px !important;
}
.mxt-plan-card__price {
  font-size: var(--mxt-font-size-2xl) !important;
  font-weight: 900 !important;
  color: var(--mxt-color-primary) !important;
  margin-block-end: 16px !important;
}
.mxt-plan-card__price small {
  font-size: var(--mxt-font-size-sm) !important;
  font-weight: 500 !important;
  color: var(--mxt-color-text-muted) !important;
}

/* One-time Fixes list style */
.mxt-one-time-fixes-card {
  background: var(--mxt-color-white) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}
.mxt-fix-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
.mxt-fix-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-block-end: 16px !important;
  border-bottom: 1px dashed rgba(var(--mxt-color-dark-rgb), 0.08) !important;
}
.mxt-fix-item:last-child {
  border-bottom: none !important;
  padding-block-end: 0 !important;
}
.mxt-fix-item__content {
  flex: 1 !important;
  padding-inline-end: 16px !important;
}
.mxt-fix-item__title {
  font-size: var(--mxt-font-size-sm) !important;
  font-weight: 700 !important;
  color: var(--mxt-color-dark) !important;
  margin-block-end: 4px !important;
}
.mxt-fix-item__desc {
  font-size: var(--mxt-font-size-xs) !important;
  color: var(--mxt-color-text-muted) !important;
  line-height: 1.4 !important;
}
.mxt-fix-item__action {
  text-align: right !important;
  flex-shrink: 0 !important;
}
.mxt-fix-item__price {
  font-size: var(--mxt-font-size-md) !important;
  font-weight: 800 !important;
  color: var(--mxt-color-dark) !important;
  margin-block-end: 6px !important;
  display: block !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   5. OVERRIDES FOR SERVICES.HTML REDESIGN V2
   ────────────────────────────────────────────────────────────────────────── */

/* Force light color for text-fill-color in step 02 dark section to fix transparency/shadow outline issue */
.mxt-section-improve-dark .mxt-section-header__title {
  -webkit-text-fill-color: var(--mxt-color-white) !important;
  color: var(--mxt-color-white) !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Launch Cards Badge styling */
.mxt-card-service-launch__badge {
  background: rgba(var(--mxt-color-success-rgb), 0.08) !important;
  color: var(--mxt-color-success) !important;
  font-weight: 800 !important;
  font-family: var(--mxt-font-sans) !important;
  font-size: var(--mxt-font-size-md) !important;
  padding: 6px 14px !important;
  border-radius: 99px !important;
}

/* Smooth zoom-in on card icons during hover */
.mxt-card-service-launch:hover svg {
  transform: scale(1.1) rotate(5deg) !important;
}
.mxt-card-service-launch svg {
  transition: transform var(--mxt-transition-fast) !important;
}

.mxt-card-service-improve:hover svg {
  transform: scale(1.1) rotate(5deg) !important;
}
.mxt-card-service-improve svg {
  transition: transform var(--mxt-transition-fast) !important;
}

/* Improve section header tweaks */
.mxt-section-improve-dark .mxt-section-header__subtitle {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Pricing tags layout tweaks inside plans */
.mxt-plan-card__price small {
  font-size: var(--mxt-font-size-xs) !important;
  color: var(--mxt-color-text-muted) !important;
  text-transform: lowercase !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   6. CONTACT & SINGLE-THEME REDESIGN & INTERACTIVE COMPONENTS
   ────────────────────────────────────────────────────────────────────────── */

/* Contact Hero Gradient & Dot Pattern Background */
.mxt-contact-hero {
  position: relative;
  background-color: var(--mxt-color-light) !important;
  background-image: radial-gradient(rgba(var(--mxt-color-primary-rgb), 0.15) 1px, transparent 0) !important;
  background-size: 24px 24px !important;
  border-block-end: 1px solid var(--mxt-border-color) !important;
}

/* Pulsing Status dot indicator */
.mxt-status-pulse {
  width: 8px;
  height: 8px;
  border-radius: var(--mxt-radius-full);
  background: var(--mxt-color-success);
  display: inline-block;
  animation: mxtPulse 2s infinite ease-in-out;
}

@keyframes mxtPulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(var(--mxt-color-success-rgb), 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(var(--mxt-color-success-rgb), 0);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(var(--mxt-color-success-rgb), 0);
  }
}

/* Contact Channels Grid */
.mxt-contact-channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mxt-spacing-md);
  margin-block-start: -60px;
}

/* Contact Channels Tactile Cards */
.mxt-contact-channel-card {
  background: var(--mxt-color-white) !important;
  border: 1px solid var(--mxt-border-color) !important;
  border-radius: var(--mxt-radius-lg) !important;
  padding: 32px !important;
  box-shadow: var(--mxt-shadow-md) !important;
  transition: all var(--mxt-transition-normal) !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  z-index: 5;
}

.mxt-contact-channel-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--mxt-shadow-xl) !important;
  border-color: rgba(var(--mxt-color-primary-rgb), 0.3) !important;
}

.mxt-contact-channel-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--mxt-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: 20px;
  transition: transform var(--mxt-transition-fast) !important;
}

.mxt-contact-channel-card:hover .mxt-contact-channel-card__icon {
  transform: scale(1.1) rotate(3deg);
}

.mxt-contact-channel-card__title {
  font-size: var(--mxt-font-size-md);
  font-weight: 800;
  color: var(--mxt-color-dark) !important;
  margin-block-end: 10px;
  letter-spacing: -0.01em;
}

.mxt-contact-channel-card__desc {
  font-size: var(--mxt-font-size-xs);
  color: var(--mxt-color-text-muted) !important;
  line-height: 1.6;
  margin-block-end: 24px;
  flex-grow: 1;
}

.mxt-contact-channel-card__link {
  font-size: var(--mxt-font-size-xs);
  font-weight: 700;
  color: var(--mxt-color-primary) !important;
  text-decoration: none !important;
  transition: color var(--mxt-transition-fast) !important;
}

.mxt-contact-channel-card__link:hover {
  color: var(--mxt-color-dark) !important;
}

/* FAQ Accordion cards styling */
.mxt-faq-item {
  background: var(--mxt-color-white) !important;
  border: 1px solid var(--mxt-border-color) !important;
  border-radius: var(--mxt-radius-md) !important;
  padding: 20px !important;
  cursor: pointer !important;
  transition: all var(--mxt-transition-fast) !important;
}

.mxt-faq-item[open] {
  border-color: rgba(var(--mxt-color-primary-rgb), 0.3) !important;
  box-shadow: 0 4px 16px rgba(var(--mxt-color-primary-rgb), 0.04) !important;
}

.mxt-faq-item summary {
  font-size: var(--mxt-font-size-sm) !important;
  font-weight: 700 !important;
  color: var(--mxt-color-dark) !important;
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  outline: none !important;
}

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

.mxt-faq-item__arrow {
  font-size: 10px;
  transition: transform var(--mxt-transition-fast) !important;
  color: var(--mxt-color-text-muted);
}

.mxt-faq-item__content {
  margin-block-start: 12px;
  font-size: var(--mxt-font-size-xs) !important;
  color: var(--mxt-color-text-muted) !important;
  line-height: 1.6 !important;
  cursor: default !important;
}

/* Single-Theme Image Gallery controls */
.mxt-thumbnail-btn {
  border: 2px solid transparent !important;
  padding: 0 !important;
  background: none !important;
  border-radius: var(--mxt-radius-sm) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  width: 80px !important;
  aspect-ratio: 16/10 !important;
  transition: border-color var(--mxt-transition-fast) !important;
  flex-shrink: 0;
}

.mxt-thumbnail-btn img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform var(--mxt-transition-fast) !important;
}

.mxt-thumbnail-btn:hover img {
  transform: scale(1.08);
}

/* Addon Selector inputs style */
.mxt-addon-checkbox {
  cursor: pointer !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: var(--mxt-radius-sm) !important;
  accent-color: var(--mxt-color-primary) !important;
  margin: 0 !important;
}

/* Preset Customizer Buttons */
.mxt-preset-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--mxt-radius-full) !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: all var(--mxt-transition-fast) !important;
}

.mxt-preset-btn:hover {
  transform: scale(1.1);
}


/* ──────────────────────────────────────────────────────────────────────────
   7. 3D-ISH SIDEBAR REFINEMENTS & COLORS (SOVEREIGN ELITE 2026 SPEC)
   ────────────────────────────────────────────────────────────────────────── */

/* Premium 3D Sidebar Container */
aside.mxt-directory__sidebar {
  background: var(--mxt-color-white) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.08) !important;
  border-bottom: 4px solid rgba(var(--mxt-color-primary-rgb), 0.3) !important;
  border-radius: 24px !important;
  box-shadow: 
    0 2px 4px rgba(var(--mxt-color-dark-rgb), 0.02),
    0 16px 36px -4px rgba(var(--mxt-color-primary-rgb), 0.04),
    0 32px 64px -12px rgba(var(--mxt-color-dark-rgb), 0.06),
    inset 0 1px 0 var(--mxt-color-white) !important;
  position: relative;
  overflow: hidden;
}

/* Background glowing shapes for 3D depth and modern aesthetic */
aside.mxt-directory__sidebar::before {
  content: '';
  position: absolute;
  inset-block-start: -80px;
  inset-inline-end: -80px;
  width: 160px;
  height: 160px;
  border-radius: var(--mxt-radius-full);
  background: radial-gradient(circle, rgba(var(--mxt-color-primary-rgb), 0.08) 0%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

aside.mxt-directory__sidebar::after {
  content: '';
  position: absolute;
  inset-block-end: -100px;
  inset-inline-start: -100px;
  width: 200px;
  height: 200px;
  border-radius: var(--mxt-radius-full);
  background: radial-gradient(circle, rgba(var(--mxt-color-secondary-rgb), 0.06) 0%, transparent 70%);
  filter: blur(12px);
  pointer-events: none;
  z-index: 0;
}

/* Search input with 3D inset shadow */
aside.mxt-directory__sidebar .mxt-sidebar__search-input {
  box-shadow: inset 0 2px 4px rgba(var(--mxt-color-dark-rgb), 0.03), 0 1px 2px var(--mxt-color-white) !important;
  border-color: rgba(var(--mxt-color-dark-rgb), 0.1) !important;
}

/* Elevated active pill links */
aside.mxt-directory__sidebar .mxt-sidebar__link--active,
aside.mxt-directory__sidebar .mxt-sidebar-btn.mxt-filter-btn--active {
  background: var(--mxt-color-white) !important;
  border-color: rgba(var(--mxt-color-primary-rgb), 0.15) !important;
  box-shadow: 
    0 1px 2px rgba(var(--mxt-color-primary-rgb), 0.05),
    0 8px 16px -4px rgba(var(--mxt-color-primary-rgb), 0.1),
    inset 0 1px 0 var(--mxt-color-white) !important;
  transform: translateY(-2px) scale(1.01) !important;
}

/* Checkbox inputs with inset 3D texture */
aside.mxt-directory__sidebar .mxt-sidebar__checkbox {
  box-shadow: inset 0 1px 3px rgba(var(--mxt-color-dark-rgb), 0.08), 0 1px 1px var(--mxt-color-white) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__checkbox:checked {
  box-shadow: 
    0 2px 6px rgba(var(--mxt-color-primary-rgb), 0.25),
    inset 0 1px 0 rgba(var(--mxt-color-white-rgb), 0.2) !important;
  transform: scale(1.05);
}

/* Badges with 3D layered shadow */
aside.mxt-directory__sidebar .mxt-sidebar__badge,
aside.mxt-directory__sidebar .mxt-sidebar-badge {
  box-shadow: 0 1px 2px rgba(var(--mxt-color-dark-rgb), 0.05), inset 0 -1px 0 rgba(var(--mxt-color-dark-rgb), 0.05) !important;
}

/* Clear button 3D depth upgrade */
aside.mxt-directory__sidebar .mxt-sidebar__clear-btn {
  background: rgba(var(--mxt-color-error-rgb), 0.04) !important;
  color: var(--mxt-color-error) !important;
  border: 1px solid rgba(var(--mxt-color-error-rgb), 0.1) !important;
  box-shadow: 0 1px 2px rgba(var(--mxt-color-dark-rgb), 0.05), inset 0 1px 0 var(--mxt-color-white) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__clear-btn:hover {
  background: var(--mxt-color-error) !important;
  color: var(--mxt-color-white) !important;
  border-color: var(--mxt-color-error) !important;
  box-shadow: 
    0 4px 12px rgba(var(--mxt-color-error-rgb), 0.2),
    inset 0 1px 0 rgba(var(--mxt-color-white-rgb), 0.15) !important;
  transform: translateY(-2px) !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   8. PREMIUM ICON-ENHANCED & 3D SIDEBAR UPGRADE (SOVEREIGN ELITE 2026)
   ────────────────────────────────────────────────────────────────────────── */

/* Premium Platform Pill List Items */
aside.mxt-directory__sidebar .mxt-sidebar__link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  color: var(--mxt-color-dark-accent) !important;
  border: 1px solid rgba(var(--mxt-color-dark-rgb), 0.06) !important;
  background: var(--mxt-color-white) !important;
  box-shadow: 
    0 1px 2px rgba(var(--mxt-color-dark-rgb), 0.02),
    inset 0 1px 0 var(--mxt-color-white) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-block-end: 8px !important;
  text-decoration: none !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__link:hover {
  background: var(--mxt-color-white) !important;
  border-color: rgba(var(--mxt-color-primary-rgb), 0.2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 
    0 6px 16px -2px rgba(var(--mxt-color-primary-rgb), 0.08),
    inset 0 1px 0 var(--mxt-color-white) !important;
  color: var(--mxt-color-primary) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__link .mxt-sidebar__badge {
  margin-inline-start: auto !important;
}

/* Vertical active indicator styling (replaces default background block color) */
aside.mxt-directory__sidebar .mxt-sidebar__link--active,
aside.mxt-directory__sidebar .mxt-sidebar-btn.mxt-filter-btn--active {
  background: var(--mxt-color-white) !important;
  color: var(--mxt-color-dark) !important;
  border-color: rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  border-inline-start: 4px solid var(--mxt-color-primary) !important;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  box-shadow: 
    0 8px 20px -4px rgba(var(--mxt-color-dark-rgb), 0.06),
    inset 0 1px 0 var(--mxt-color-white) !important;
  transform: translateY(-2px) scale(1.02) !important;
  font-weight: 700 !important;
}

/* Category & Price rows perfect alignment and spacing */
aside.mxt-directory__sidebar .mxt-sidebar__checkbox-label {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  color: var(--mxt-color-dark-accent) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__checkbox-label:hover {
  background: rgba(var(--mxt-color-dark-rgb), 0.02) !important;
  border-color: rgba(var(--mxt-color-dark-rgb), 0.05) !important;
  box-shadow: inset 0 1px 0 var(--mxt-color-white) !important;
  color: var(--mxt-color-dark) !important;
}

/* Highlight checked category/price options with soft glow */
aside.mxt-directory__sidebar .mxt-sidebar__checkbox-label:has(input:checked) {
  background: rgba(var(--mxt-color-primary-rgb), 0.03) !important;
  border-color: rgba(var(--mxt-color-primary-rgb), 0.1) !important;
  box-shadow: inset 0 1px 0 var(--mxt-color-white) !important;
  color: var(--mxt-color-primary) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__checkbox-label .mxt-sidebar__badge {
  margin-inline-start: auto !important;
}

/* Style the platform and category SVG icons */
aside.mxt-directory__sidebar .mxt-sidebar__platform-icon {
  width: 18px !important;
  height: 18px !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.4) !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__link:hover .mxt-sidebar__platform-icon {
  color: var(--mxt-color-primary) !important;
  transform: scale(1.1) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__link--active .mxt-sidebar__platform-icon {
  color: var(--mxt-color-primary) !important;
  transform: scale(1.1) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__category-icon,
aside.mxt-directory__sidebar .mxt-sidebar__price-icon {
  width: 15px !important;
  height: 15px !important;
  color: rgba(var(--mxt-color-dark-rgb), 0.4) !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  flex-shrink: 0;
}

aside.mxt-directory__sidebar .mxt-sidebar__checkbox-label:hover .mxt-sidebar__category-icon,
aside.mxt-directory__sidebar .mxt-sidebar__checkbox-label:hover .mxt-sidebar__price-icon {
  color: var(--mxt-color-primary) !important;
  transform: scale(1.08) !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__checkbox-label:has(input:checked) .mxt-sidebar__category-icon,
aside.mxt-directory__sidebar .mxt-sidebar-label:has(input:checked) .mxt-sidebar__price-icon {
  color: var(--mxt-color-primary) !important;
}

/* Modern clean outline clear button - NO RED COLOR */
aside.mxt-directory__sidebar .mxt-sidebar__clear-btn {
  background: var(--mxt-color-white) !important;
  color: var(--mxt-color-dark) !important;
  border: 1.5px solid rgba(var(--mxt-color-dark-rgb), 0.12) !important;
  box-shadow: 
    0 1px 2px rgba(var(--mxt-color-dark-rgb), 0.02),
    inset 0 1px 0 var(--mxt-color-white) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  padding: 12px !important;
  border-radius: 12px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-block-start: 16px !important;
}

aside.mxt-directory__sidebar .mxt-sidebar__clear-btn:hover {
  background: var(--mxt-color-dark) !important;
  color: var(--mxt-color-white) !important;
  border-color: var(--mxt-color-dark) !important;
  box-shadow: 
    0 8px 16px -2px rgba(var(--mxt-color-dark-rgb), 0.15),
    inset 0 1px 0 rgba(255,255,255,0.1) !important;
  transform: translateY(-2px) !important;
}
/* ==========================================================================
   Premium WooCommerce Checkout Block Styles - SAFE
   ========================================================================== */

/* 1. Safely contain the checkout block */
.wp-block-woocommerce-checkout {
    width: 100% !important;
    margin: 60px 0 !important;
    padding: 0;
}

/* 2. Add subtle styling to the left checkout steps */
.wc-block-checkout__main .wc-block-components-checkout-step {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
}

/* 3. Style the Order Summary Sidebar */
.wc-block-checkout__sidebar,
.wc-block-components-totals-wrapper {
    background: #ffffff;
    border-radius: 0;
    padding: 32px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    border: 0px solid rgba(0, 0, 0, 0.05);
    /* Ensure it doesn't wrap aggressively */
    min-width: auto;
}

/* Make sidebar sticky without breaking grid and enforce flex layout */
@media (min-width: 992px) {
    .wp-block-woocommerce-checkout,
    .wc-block-checkout {
        display: block;
        align-items: flex-start !important;
        gap: 40px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    
    .wp-block-woocommerce-checkout .wc-block-checkout__main {
        flex: 1 1 auto !important;
        min-width: 0; /* prevent flex blowout */
        width: 100%;
    }

    .wc-block-checkout__sidebar,
    .wc-block-components-totals-wrapper {
        flex: 0 0 380px !important;
        width: auto !important;
        position: sticky;
        top: 100px;
    }
}

/* 4. Remove messy default transparent background on totals */
.wc-block-components-order-summary {
    background: transparent !important;
}

/* 5. Upgrade the Place Order Button */
.wc-block-components-checkout-place-order-button {
    background: linear-gradient(135deg, var(--mxt-color-primary, #6868F7) 0%, var(--mxt-color-secondary, #06C8ED) 100%) !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 18px 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    border: none !important;
    box-shadow: 0 8px 15px rgba(104, 104, 247, 0.25) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.wc-block-components-checkout-place-order-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 25px rgba(104, 104, 247, 0.35) !important;
}

/* ==========================================================================
   Premium WooCommerce Cart Block Styles - SAFE
   ========================================================================== */

/* 1. Safely contain the cart block */
.wp-block-woocommerce-cart {
    width: 100% !important;
    margin: 60px 0 !important;
    padding: 0;
}

/* 2. Add subtle styling to the left cart items */
.wp-block-woocommerce-cart .wc-block-cart-items,
.wp-block-woocommerce-cart .wc-block-cart__main {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
}

/* Make product items look better */
.wp-block-woocommerce-cart .wc-block-cart-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 24px;
    margin-bottom: 24px;
}
.wp-block-woocommerce-cart .wc-block-cart-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* 3. Style the Order Summary Sidebar */
.wp-block-woocommerce-cart .wc-block-cart__sidebar,
.wp-block-woocommerce-cart .wc-block-components-totals-wrapper {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    min-width: auto;
}

/* Make sidebar sticky without breaking grid and enforce flex layout */
@media (min-width: 992px) {
    .wp-block-woocommerce-cart,
    .wc-block-cart {
        align-items: flex-start !important;
        gap: 40px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    
    .wp-block-woocommerce-cart .wc-block-cart-items,
    .wp-block-woocommerce-cart .wc-block-cart__main {
        flex: 1 1 auto !important;
        min-width: 0;
        width: 100%;
    }

    .wp-block-woocommerce-cart .wc-block-cart__sidebar,
    .wp-block-woocommerce-cart .wc-block-components-totals-wrapper {
        flex: 0 0 380px !important;
        width: auto !important;
        position: sticky;
        top: 100px;
    }
}

/* 4. Upgrade the Proceed to Checkout Button */
.wc-block-cart .wc-block-cart__submit-button,
.wc-block-cart .wc-block-components-button {
    background: linear-gradient(135deg, var(--mxt-color-primary, #6868F7) 0%, var(--mxt-color-secondary, #06C8ED) 100%) !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 18px 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    border: none !important;
    box-shadow: 0 8px 15px rgba(104, 104, 247, 0.25) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    text-align: center;
    text-decoration: none;
}

.wc-block-cart .wc-block-cart__submit-button:hover,
.wc-block-cart .wc-block-components-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 25px rgba(104, 104, 247, 0.35) !important;
}

/* Fix product image sizing */
.wp-block-woocommerce-cart .wc-block-components-product-image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Enhance quantity selector */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector button:hover {
    background: #e2e8f0 !important;
}

/* ==========================================================================
   Hide Licensing Tabs for Webflow Templates
   ========================================================================== */
body:has(.woocommerce-breadcrumb a[href*="webflow"]) .mxt-pricing-widget__tabs {
    display: none !important;
}

body:has(.woocommerce-breadcrumb a[href*="webflow"]) .mxt-pricing-widget__price small {
    display: none !important;
}


/* ==========================================================================
   Autosuggest Dropdown (Contact Form)
   ========================================================================== */
.mxt-autosuggest-wrapper {
    position: relative;
    width: 100%;
}

.mxt-autosuggest-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-top: 4px;
    display: none; /* Controlled by JS */
}

/* Ensure the dropdown is visible when the input has a specific class added by JS, or if JS toggles display inline */
.mxt-autosuggest-dropdown.active,
.mxt-autosuggest-wrapper.active .mxt-autosuggest-dropdown {
    display: block;
}

.mxt-autosuggest-item {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s, color 0.2s;
    line-height: 1.4;
}

.mxt-autosuggest-item:last-child {
    border-bottom: none;
}

.mxt-autosuggest-item:hover,
.mxt-autosuggest-item.selected {
    background-color: #f8fafc;
    color: #0f172a;
}



.e-con-inner {
  padding: 0 !important;
  max-width: 100% !important;
}

.e-con {
  padding: 0 !important;
  max-width: 100% !important;
}

/* ==========================================================================
   PAGE CONTENT TYPOGRAPHY FIX
   ========================================================================== */
.page-content p { margin-bottom: 1.5rem; }
.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 { margin-top: 2rem; margin-bottom: 1rem; font-weight: 700; color: var(--mxt-color-dark, #111827); line-height: 1.3; }
.page-content h2 { font-size: 1.75rem; }
.page-content h3 { font-size: 1.5rem; }
.page-content ul { list-style-type: disc; margin-bottom: 1.5rem; padding-left: 1.5rem; }
.page-content ol { list-style-type: decimal; margin-bottom: 1.5rem; padding-left: 1.5rem; }
.page-content li { margin-bottom: 0.5rem; }
.page-content a { color: var(--mxt-color-primary); text-decoration: underline; }




.variation-LicenseTier {
  padding-left: 8px !important;
}

.wc-block-cart .wp-block-woocommerce-cart-order-summary-block {
   border: 0 !important;
}