/* Theme Name: SiteKrafter-Pro
  Theme URI: https://sitekrafter.com
  Version: 7.3.0
  Template: Divi
  Author: Mak
  Author URI: https://diviuniversity.com
  Description: SiteKrafter Pro helps you build websites faster, with better structure, consistency, and scalability.
  Website: https://sitekrafter.com
*/

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

   .sk-reset {
    margin: 0;
    padding: 0;
  }
  
  /* Keep the safe styles that don't conflict with Divi */
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Performance optimizations */
    text-rendering: optimizeSpeed;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  
  html:focus-within {
    scroll-behavior: smooth;
  }
  
  /* Performance: Reduce repaints and reflows */
  * {
    box-sizing: border-box;
  }
  
  /* Performance: Optimize animations */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  
  /* Only apply font-size when specifically needed - avoid global override */
  .sk-custom-font-size {
    font-size: var(--font-base-size);
  }
  
  /* Base font size for all SiteKrafter elements */
  .sk {
    font-size: var(--font-base-size) !important;
  }
  
  /* Scoped body styles - only apply when using SiteKrafter classes */
  .sk-typography {
    font-family: var(--font-secondary);
    font-size: var(--text-m);
    line-height: var(--line-height-text-m);
  }
  
  /* Optional: Apply to specific contexts */
  body.sk-custom-typography {
    font-family: var(--font-secondary);
    font-size: var(--text-m);
    line-height: var(--line-height-text-m);
  }
  
  /* ==========================================================================
     DESIGN TOKENS & CSS CUSTOM PROPERTIES
     ========================================================================== */
  
  /* High-priority CSS variables that must not be overridden */
  :root {
    /* ===== TYPOGRAPHY ===== */
    --font-base-size: 62.5%; /* 10px */
    
    /* Font Families */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Inter', sans-serif;
    --font-tertiary: 'Montserrat', sans-serif;
    
    /* Typography Scale - Modern UI/UX Best Practices - Optimized for Performance */
    --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem) !important;    /* 12px - 14px */
    --text-s: clamp(0.875rem, 0.8rem + 0.3vw, 1rem) !important;       /* 14px - 16px */
    --text-m: clamp(1rem, 0.9rem + 0.4vw, 1.125rem) !important;       /* 16px - 18px */
    --text-l: clamp(1.125rem, 1rem + 0.5vw, 1.25rem) !important;      /* 18px - 20px */
    --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem) !important;     /* 20px - 24px */
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem) !important;         /* 24px - 32px */
    --text-3xl: clamp(2rem, 1.7rem + 1.5vw, 2.5rem) !important;       /* 32px - 40px */
    --text-4xl: clamp(2.5rem, 2rem + 2vw, 3rem) !important;           /* 40px - 48px */
    
    /* Heading Sizes - Modern UI/UX Best Practices */
    --sk-heading-9xl: clamp(4rem, calc(8vw + 2rem), 8rem) !important;        /* 64px - 128px - Hero displays */
    --sk-heading-8xl: clamp(3.5rem, calc(6vw + 2rem), 6rem) !important;      /* 56px - 96px - Large displays */
    --sk-heading-7xl: clamp(3rem, calc(4vw + 2rem), 4.5rem) !important;      /* 48px - 72px - Section headers */
    --sk-heading-6xl: clamp(2.5rem, calc(3vw + 1.5rem), 3.75rem) !important; /* 40px - 60px - Page titles */
    --sk-heading-5xl: clamp(2rem, calc(2vw + 1.5rem), 3rem) !important;      /* 32px - 48px - Main headings */
    --sk-heading-4xl: clamp(1.75rem, calc(1.5vw + 1.25rem), 2.25rem) !important; /* 28px - 36px - H1 */
    --sk-heading-3xl: clamp(1.5rem, calc(1vw + 1.25rem), 1.875rem) !important;   /* 24px - 30px - H2 */
    --sk-heading-2xl: clamp(1.25rem, calc(0.8vw + 1.1rem), 1.5rem) !important;   /* 20px - 24px - H3 */
    --sk-heading-xl:  clamp(1.125rem, calc(0.6vw + 1rem), 1.25rem) !important;   /* 18px - 20px - H4 */
    --sk-heading-l:   clamp(1rem, calc(0.4vw + 0.9rem), 1.125rem) !important;    /* 16px - 18px - H5 */
    --sk-heading-m:   clamp(0.875rem, calc(0.3vw + 0.8rem), 1rem) !important;    /* 14px - 16px - H6 */
    --sk-heading-s:   clamp(0.75rem, calc(0.2vw + 0.7rem), 0.875rem) !important; /* 12px - 14px - Small headings */
    
    /* Heading Aliases for compatibility */
    --heading-9xl: var(--sk-heading-9xl);
    --heading-8xl: var(--sk-heading-8xl);
    --heading-7xl: var(--sk-heading-7xl);
    --heading-6xl: var(--sk-heading-6xl);
    --heading-5xl: var(--sk-heading-5xl);
    --heading-4xl: var(--sk-heading-4xl);
    --heading-3xl: var(--sk-heading-3xl);
    --heading-2xl: var(--sk-heading-2xl);
    --heading-xl: var(--sk-heading-xl);
    --heading-l: var(--sk-heading-l);
    --heading-m: var(--sk-heading-m);
    --heading-s: var(--sk-heading-s);
    
    /* Line Heights - Modern UI/UX Best Practices */
    --line-height-tight: 1.1;    /* For large headings */
    --line-height-snug: 1.25;    /* For headings */
    --line-height-normal: 1.5;   /* For body text */
    --line-height-relaxed: 1.6;  /* For comfortable reading */
    --line-height-loose: 1.75;   /* For accessibility */
    
    /* Text-specific line heights */
    --line-height-text-xs: 1.4;
    --line-height-text-s: 1.45;
    --line-height-text-m: 1.5;
    --line-height-text-l: 1.55;
    --line-height-text-xl: 1.6;
    --line-height-text-2xl: 1.4;
    --line-height-text-3xl: 1.3;
    --line-height-text-4xl: 1.25;
    
    /* Heading-specific line heights */
    --line-height-heading-9xl: 1.1;
    --line-height-heading-8xl: 1.1;
    --line-height-heading-7xl: 1.15;
    --line-height-heading-6xl: 1.2;
    --line-height-heading-5xl: 1.2;
    --line-height-heading-4xl: 1.25;
    --line-height-heading-3xl: 1.3;
    --line-height-heading-2xl: 1.35;
    --line-height-heading-xl: 1.4;
    --line-height-heading-l: 1.45;
    --line-height-heading-m: 1.5;
    --line-height-heading-s: 1.5;
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide: 0.1em;
    --letter-spacing-wider: 0.15em;
  
    /* ===== COLORS ===== */
    
    /* Primary Color Tokens */
    --pri-h: 235;
    --pri-s: 84%;
    
    /* Accent Color Tokens */
    --acc-h: 344;
    --acc-s: 91%;    */

    /* Primary Color Scale */
    --pri-50: hsl(var(--pri-h), var(--pri-s), 97%);
    --pri-100: hsl(var(--pri-h), var(--pri-s), 90%);
    --pri-200: hsl(var(--pri-h), var(--pri-s), 80%);
    --pri-300: hsl(var(--pri-h), var(--pri-s), 70%);
    --pri-400: hsl(var(--pri-h), var(--pri-s), 60%);
    --pri-500: hsl(var(--pri-h), var(--pri-s), 50%);
    --pri-600: hsl(var(--pri-h), var(--pri-s), 40%);
    --pri-700: hsl(var(--pri-h), var(--pri-s), 30%);
    --pri-800: hsl(var(--pri-h), var(--pri-s), 20%);
    --pri-900: hsl(var(--pri-h), var(--pri-s), 10%);
    
    /* Accent Color Scale */
    --acc-50: hsl(var(--acc-h), var(--acc-s), 97%);
    --acc-100: hsl(var(--acc-h), var(--acc-s), 90%);
    --acc-200: hsl(var(--acc-h), var(--acc-s), 80%);
    --acc-300: hsl(var(--acc-h), var(--acc-s), 70%);
    --acc-400: hsl(var(--acc-h), var(--acc-s), 60%);
    --acc-500: hsl(var(--acc-h), var(--acc-s), 50%);
    --acc-600: hsl(var(--acc-h), var(--acc-s), 40%);
    --acc-700: hsl(var(--acc-h), var(--acc-s), 30%);
    --acc-800: hsl(var(--acc-h), var(--acc-s), 20%);
    --acc-900: hsl(var(--acc-h), var(--acc-s), 10%);
    
    /* Grayscale */
    --gray-50: hsl(0, 0%, 98%);
    --gray-100: hsl(0, 0%, 96%);
    --gray-200: hsl(0, 0%, 90%);
    --gray-300: hsl(0, 0%, 83%);
    --gray-400: hsl(0, 0%, 64%);
    --gray-500: hsl(0, 0%, 45%);
    --gray-600: hsl(0, 0%, 32%);
    --gray-700: hsl(0, 0%, 25%);
    --gray-800: hsl(0, 0%, 15%);
    --gray-900: hsl(0, 0%, 9%);
    
    /* Semantic Colors */
    --success: hsl(120, 100%, 69%);
    --warning: hsl(61, 100%, 48%);
    --error: hsl(0, 100%, 71%);
    --info: hsl(217, 100%, 76%);
    --info-light: hsl(217, 100%, 95%);
    --warning-light: hsl(45, 100%, 90%);
    --success-light: hsl(140, 70%, 90%);
    --error-light: hsl(0, 100%, 94%);
    
    /* Color Aliases */
    --white: #ffffff;
    --black: #000000;
    --pri: var(--pri-500);
    --pri-light: var(--pri-300);
    --pri-dark: var(--pri-700);
    --acc: var(--acc-500);
    --acc-light: var(--acc-300);
    --acc-dark: var(--acc-700);
    --text-dark: var(--gray-900);
    --text-medium: var(--gray-700);
    --text-light: var(--gray-100);
    --text-white: var(--white);
    --bg-light: var(--gray-50);
    --bg-dark: var(--gray-900);
    --bg-muted: var(--gray-100);
    --on-primary: var(--white);
    
  
    /* ===== SPACING & SIZING ===== */
    
    /* Spacing Scale */
    --spacing-xs: clamp(0.5rem, 1vw, 0.81rem);
    --spacing-s: clamp(0.81rem, 2vw, 1.31rem);
    --spacing-m: clamp(1.31rem, 3vw, 2.11rem);
    --spacing-l: clamp(2.11rem, 5vw, 3.42rem);
    --spacing-xl: clamp(3.42rem, 7vw, 5.53rem);
    
    /* Container & Layout */
    --container-max-width: clamp(320px, 95vw, 1366px);
    --container-padding: clamp(1.6rem, 3vw, 4rem);
    --section-padding-block: clamp(3.2rem, 7vw, 8rem);
    --sec-padding-s: clamp(3.8rem, 7vw, 6.2rem) clamp(2.4rem, 5vw, 4rem);
    --sec-padding-m: clamp(6.2rem, 9vw, 10rem) clamp(4rem, 6.5vw, 6.5rem);
    --sec-padding-l: clamp(10rem, 11vw, 16.2rem) clamp(6.5rem, 7.5vw, 10.5rem);
    --sec-padding-hero: clamp(16.2rem, 13vw, 26.2rem) clamp(10.5rem, 9vw, 16.8rem);
    
    /* Section Padding Scale - Modern UI/UX Best Practices */
    --section-padding-xs: clamp(2rem, 3vw + 1rem, 4rem);      /* 32px - 64px */
    --section-padding-s: clamp(3rem, 4vw + 1.5rem, 6rem);     /* 48px - 96px */
    --section-padding-m: clamp(4rem, 6vw + 2rem, 10rem);      /* 64px - 160px */
    --section-padding-l: clamp(6rem, 8vw + 3rem, 14rem);      /* 96px - 224px */
    --section-padding-xl: clamp(8rem, 10vw + 4rem, 18rem);    /* 128px - 288px */
    --section-padding-full: clamp(10rem, 12vw + 6rem, 24rem); /* 160px - 384px */
    
    --grid-gap: var(--spacing-m);
  
    /* ===== VISUAL EFFECTS ===== */
    
    /* Shadows */
    --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-m: 0px 4px 6px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-l: 0px 10px 15px rgba(0, 0, 0, 0.05), 0px 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0px 20px 25px rgba(0, 0, 0, 0.05), 0px 10px 10px rgba(0, 0, 0, 0.1);
    --shadow-inset: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    
    /* Border Radius */
    --radius-xs: clamp(0.4rem, 0.4vw, 0.5rem);
    --radius-s: clamp(0.5rem, 0.5vw, 0.63rem);
    --radius-m: clamp(0.63rem, 0.6vw, 0.78rem);
    --radius-l: clamp(0.78rem, 0.7vw, 0.98rem);
    --radius-xl: clamp(0.98rem, 0.8vw, 1.22rem);
    --radius-full: 999rem;
    
    /* Transitions */
    --transition-fast: 0.1s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
  
    /* ===== ACCESSIBILITY ===== */
    
    --focus-outline-width: 3px;
    --focus-color: #f90;
    --focus-outline-offset: 2px;
    --focus-shadow: 0 0 0 3px rgba(255, 153, 0, 0.4);
  
    /* ===== BREAKPOINTS ===== */
    
    --breakpoint-xs: 480px;  /* Extra small devices */
    --breakpoint-sm: 768px;  /* Small devices (tablets) */
    --breakpoint-md: 992px;  /* Medium devices (desktops) */
    --breakpoint-lg: 1200px; /* Large devices (large desktops) */
    --breakpoint-xl: 1440px; /* Extra large devices */
    --breakpoint-2xl: 1920px; /* 2K displays */
    --breakpoint-4k: 3840px; /* 4K displays */
  }
  
  /* ==========================================================================
     DIVI INTEGRATION & OVERRIDES
     ========================================================================== */
  
  /* Divi Text Module Overrides */
  .et_pb_text {
    margin: 0 !important;
  }
  
  /* Divi Button Overrides */
  button, .et_pb_button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* ==========================================================================
     UTILITY CLASSES - TYPOGRAPHY
     ========================================================================== */
  
  /* Performance: Use will-change for elements that will animate */
  .hover-grow, .hover-shrink, .hover-lift, .hover-float {
    will-change: transform;
  }
  
  /* Performance: Use contain for better rendering performance */
  .sk-content, .richtext {
    contain: layout style;
  }
  
  /* Font Families */
  .accent-text {
    font-family: var(--font-tertiary);
  }
  
  /* Font Sizes with Line Heights - High Specificity */
  .text-xs,
  .text-xs * { 
    font-size: var(--text-xs) !important; 
    line-height: var(--line-height-text-xs) !important;
  }
  .text-s,
  .text-s * { 
    font-size: var(--text-s) !important; 
    line-height: var(--line-height-text-s) !important;
  }
  .text-m,
  .text-m * { 
    font-size: var(--text-m) !important; 
    line-height: var(--line-height-text-m) !important;
  }
  .text-l,
  .text-l * { 
    font-size: var(--text-l) !important; 
    line-height: var(--line-height-text-l) !important;
  }
  .text-xl,
  .text-xl * { 
    font-size: var(--text-xl) !important; 
    line-height: var(--line-height-text-xl) !important;
  }
  .text-2xl,
  .text-2xl * { 
    font-size: var(--text-2xl) !important; 
    line-height: var(--line-height-text-2xl) !important;
  }
  .text-3xl,
  .text-3xl * { 
    font-size: var(--text-3xl) !important; 
    line-height: var(--line-height-text-3xl) !important;
  }
  .text-4xl,
  .text-4xl * { 
    font-size: var(--text-4xl) !important; 
    line-height: var(--line-height-text-4xl) !important;
  }
  

  
  /* Fallback text utilities if CSS variables fail */
  .text-xs { font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem) !important; }
  .text-s { font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem) !important; }
  .text-m { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem) !important; }
  .text-l { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem) !important; }
  .text-xl { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem) !important; }
  .text-2xl { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem) !important; }
  .text-3xl { font-size: clamp(2rem, 1.7rem + 1.5vw, 2.5rem) !important; }
  .text-4xl { font-size: clamp(2.5rem, 2rem + 2vw, 3rem) !important; }
  

  
  /* Font Weights */
  .font-100 { 
    font-weight: 100 !important; 
  }
  .font-200 { 
    font-weight: 200 !important; 
  }
  .font-300 { 
    font-weight: 300 !important; 
  }
  .font-400, .font-normal { 
    font-weight: 400 !important; 
  }
  .font-500 { 
    font-weight: 500 !important; 
  }
  .font-600, .font-semibold { 
    font-weight: 600 !important; 
  }
  .font-700, .font-bold { 
    font-weight: 700 !important; 
  }
  .font-800, .font-extrabold { 
    font-weight: 800 !important; 
  }
  .font-900 { 
    font-weight: 900 !important; 
  }
  

  
  /* Text Transform */
  .text-uppercase     { text-transform: uppercase !important; }
  .text-lowercase     { text-transform: lowercase !important; }
  .text-capitalize    { text-transform: capitalize !important; }
  
  /* Font Style */
  .text-italic        { font-style: italic !important; }
  .text-strike        { text-decoration: line-through !important; }
  .text-decoration-none { text-decoration: none !important; }
  
  /* Letter Spacing */
  .tracking-wide      { letter-spacing: 0.1em !important; }
  .tracking-wider     { letter-spacing: 0.15em !important; }
  .tracking-tight     { letter-spacing: -0.02em !important; }
  
  /* Text Alignment */
  .text-left          { text-align: left !important; }
  .text-center        { text-align: center !important; }
  .text-right         { text-align: right !important; }
  .text-justify       { text-align: justify !important; }
  
  /* ==========================================================================
     UTILITY CLASSES - COLORS
     ========================================================================== */
  
  /* Text Colors - Primary */
  .text-pri-50 { color: var(--pri-50) !important; }
  .text-pri-100 { color: var(--pri-100) !important; }
  .text-pri-200 { color: var(--pri-200) !important; }
  .text-pri-300 { color: var(--pri-300) !important; }
  .text-pri-400 { color: var(--pri-400) !important; }
  .text-pri-500 { color: var(--pri-500) !important; }
  .text-pri-600 { color: var(--pri-600) !important; }
  .text-pri-700 { color: var(--pri-700) !important; }
  .text-pri-800 { color: var(--pri-800) !important; }
  .text-pri-900 { color: var(--pri-900) !important; }
  
  /* Text Colors - Accent */
  .text-acc-50 { color: var(--acc-50) !important; }
  .text-acc-100 { color: var(--acc-100) !important; }
  .text-acc-200 { color: var(--acc-200) !important; }
  .text-acc-300 { color: var(--acc-300) !important; }
  .text-acc-400 { color: var(--acc-400) !important; }
  .text-acc-500 { color: var(--acc-500) !important; }
  .text-acc-600 { color: var(--acc-600) !important; }
  .text-acc-700 { color: var(--acc-700) !important; }
  .text-acc-800 { color: var(--acc-800) !important; }
  .text-acc-900 { color: var(--acc-900) !important; }
  
  /* Text Colors - Gray */
  .text-gray-50 { color: var(--gray-50) !important; }
  .text-gray-100 { color: var(--gray-100) !important; }
  .text-gray-200 { color: var(--gray-200) !important; }
  .text-gray-300 { color: var(--gray-300) !important; }
  .text-gray-400 { color: var(--gray-400) !important; }
  .text-gray-500 { color: var(--gray-500) !important; }
  .text-gray-600 { color: var(--gray-600) !important; }
  .text-gray-700 { color: var(--gray-700) !important; }
  .text-gray-800 { color: var(--gray-800) !important; }
  .text-gray-900 { color: var(--gray-900) !important; }
  
  /* Background Colors - Primary */
  .bg-pri-50 { background-color: var(--pri-50); }
  .bg-pri-100 { background-color: var(--pri-100); }
  .bg-pri-200 { background-color: var(--pri-200); }
  .bg-pri-300 { background-color: var(--pri-300); }
  .bg-pri-400 { background-color: var(--pri-400); }
  .bg-pri-500 { background-color: var(--pri-500); }
  .bg-pri-600 { background-color: var(--pri-600); }
  .bg-pri-700 { background-color: var(--pri-700); }
  .bg-pri-800 { background-color: var(--pri-800); }
  .bg-pri-900 { background-color: var(--pri-900); }
  
  /* Background Colors - Accent */
  .bg-acc-50 { background-color: var(--acc-50); }
  .bg-acc-100 { background-color: var(--acc-100); }
  .bg-acc-200 { background-color: var(--acc-200); }
  .bg-acc-300 { background-color: var(--acc-300); }
  .bg-acc-400 { background-color: var(--acc-400); }
  .bg-acc-500 { background-color: var(--acc-500); }
  .bg-acc-600 { background-color: var(--acc-600); }
  .bg-acc-700 { background-color: var(--acc-700); }
  .bg-acc-800 { background-color: var(--acc-800); }
  .bg-acc-900 { background-color: var(--acc-900); }
  
  /* Background Colors - Gray */
  .bg-gray-50 { background-color: var(--gray-50); }
  .bg-gray-100 { background-color: var(--gray-100); }
  .bg-gray-200 { background-color: var(--gray-200); }
  .bg-gray-300 { background-color: var(--gray-300); }
  .bg-gray-400 { background-color: var(--gray-400); }
  .bg-gray-500 { background-color: var(--gray-500); }
  .bg-gray-600 { background-color: var(--gray-600); }
  .bg-gray-700 { background-color: var(--gray-700); }
  .bg-gray-800 { background-color: var(--gray-800); }
  .bg-gray-900 { background-color: var(--gray-900); }
  
  /* Background Colors - Semantic */
  .bg-error { background-color: var(--error); }
  .bg-info { background-color: var(--info); }
  .bg-success { background-color: var(--success); }
  .bg-warning { background-color: var(--warning); }
  .bg-error-500-t10 { background-color: var(--error-500-t10); }
  .bg-error-500-t25 { background-color: var(--error-500-t25); }
  .bg-error-500-t50 { background-color: var(--error-500-t50); }
  .bg-error-500-t75 { background-color: var(--error-500-t75); }
  
  
  /* ==========================================================================
     UTILITY CLASSES - SPACING
     ========================================================================== */
  
  /* Gap */
  .gap-0 { gap: 0 !important; }
  .gap-xs { gap: var(--spacing-xs) !important; }
  .gap-s { gap: var(--spacing-s) !important; }
  .gap-m { gap: var(--spacing-m) !important; }
  .gap-l { gap: var(--spacing-l) !important; }
  .gap-xl { gap: var(--spacing-xl) !important; }
  
  /* Margin - All Sides */
  .m-0 { margin: 0 !important; }
  .m-xs { margin: var(--spacing-xs) !important; }
  .m-s { margin: var(--spacing-s) !important; }
  .m-m { margin: var(--spacing-m) !important; }
  .m-l { margin: var(--spacing-l) !important; }
  .m-xl { margin: var(--spacing-xl) !important; }
  
  /* Margin - Top */
  .mt-0 { margin-top: 0 !important; }
  .mt-xs { margin-top: var(--spacing-xs) !important; }
  .mt-s { margin-top: var(--spacing-s) !important; }
  .mt-m { margin-top: var(--spacing-m) !important; }
  .mt-l { margin-top: var(--spacing-l) !important; }
  .mt-xl { margin-top: var(--spacing-xl) !important; }
  
  /* Margin - Bottom */
  .mb-0 { margin-bottom: 0 !important; }
  .mb-xs { margin-bottom: var(--spacing-xs) !important; }
  .mb-s { margin-bottom: var(--spacing-s) !important; }
  .mb-m { margin-bottom: var(--spacing-m) !important; }
  .mb-l { margin-bottom: var(--spacing-l) !important; }
  .mb-xl { margin-bottom: var(--spacing-xl) !important; }
  
  /* Margin - Left */
  .ml-0 { margin-left: 0 !important; }
  .ml-xs { margin-left: var(--spacing-xs) !important; }
  .ml-s { margin-left: var(--spacing-s) !important; }
  .ml-m { margin-left: var(--spacing-m) !important; }
  .ml-l { margin-left: var(--spacing-l) !important; }
  .ml-xl { margin-left: var(--spacing-xl) !important; }
  
  /* Margin - Right */
  .mr-0 { margin-right: 0 !important; }
  .mr-xs { margin-right: var(--spacing-xs) !important; }
  .mr-s { margin-right: var(--spacing-s) !important; }
  .mr-m { margin-right: var(--spacing-m) !important; }
  .mr-l { margin-right: var(--spacing-l) !important; }
  .mr-xl { margin-right: var(--spacing-xl) !important; }
  
  /* Padding - All Sides */
  .p-0 { padding: 0 !important; }
  .p-xs { padding: var(--spacing-xs) !important; }
  .p-s { padding: var(--spacing-s) !important; }
  .p-m { padding: var(--spacing-m) !important; }
  .p-l { padding: var(--spacing-l) !important; }
  .p-xl { padding: var(--spacing-xl) !important; }
  
  /* Padding - Top */
  .pt-0 { padding-top: 0 !important; }
  .pt-xs { padding-top: var(--spacing-xs) !important; }
  .pt-s { padding-top: var(--spacing-s) !important; }
  .pt-m { padding-top: var(--spacing-m) !important; }
  .pt-l { padding-top: var(--spacing-l) !important; }
  .pt-xl { padding-top: var(--spacing-xl) !important; }
  
  /* Padding - Bottom */
  .pb-0 { padding-bottom: 0 !important; }
  .pb-xs { padding-bottom: var(--spacing-xs) !important; }
  .pb-s { padding-bottom: var(--spacing-s) !important; }
  .pb-m { padding-bottom: var(--spacing-m) !important; }
  .pb-l { padding-bottom: var(--spacing-l) !important; }
  .pb-xl { padding-bottom: var(--spacing-xl) !important; }
  
  /* Padding - Left */
  .pl-0 { padding-left: 0 !important; }
  .pl-xs { padding-left: var(--spacing-xs) !important; }
  .pl-s { padding-left: var(--spacing-s) !important; }
  .pl-m { padding-left: var(--spacing-m) !important; }
  .pl-l { padding-left: var(--spacing-l) !important; }
  .pl-xl { padding-left: var(--spacing-xl) !important; }
  
  /* Padding - Right */
  .pr-0 { padding-right: 0 !important; }
  .pr-xs { padding-right: var(--spacing-xs) !important; }
  .pr-s { padding-right: var(--spacing-s) !important; }
  .pr-m { padding-right: var(--spacing-m) !important; }
  .pr-l { padding-right: var(--spacing-l) !important; }
  .pr-xl { padding-right: var(--spacing-xl) !important; }
  
  /* Legacy Padding Classes (for backwards compatibility) */
  .no-padding { padding: 0 !important; }
  .pad-xs { padding: var(--spacing-xs) !important; }
  .pad-s { padding: var(--spacing-s) !important; }
  .pad-m { padding: var(--spacing-m) !important; }
  .pad-l { padding: var(--spacing-l) !important; }
  .pad-xl { padding: var(--spacing-xl) !important; }
  
  /* ==========================================================================
     SECTION PADDING UTILITIES - MODERN UI/UX DESIGN
     ========================================================================== */
  
  /* Section Padding - Top & Bottom (Responsive & Fluid) */
  .section-padding-xs {
    padding-top: var(--section-padding-xs) !important;
    padding-bottom: var(--section-padding-xs) !important;
  }
  
  .section-padding-s {
    padding-top: var(--section-padding-s) !important;
    padding-bottom: var(--section-padding-s) !important;
  }
  
  .section-padding-m {
    padding-top: var(--section-padding-m) !important;
    padding-bottom: var(--section-padding-m) !important;
  }
  
  .section-padding-l {
    padding-top: var(--section-padding-l) !important;
    padding-bottom: var(--section-padding-l) !important;
  }
  
  .section-padding-xl {
    padding-top: var(--section-padding-xl) !important;
    padding-bottom: var(--section-padding-xl) !important;
  }
  
  .section-padding-full {
    padding-top: var(--section-padding-full) !important;
    padding-bottom: var(--section-padding-full) !important;
  }
  
  /* Section Padding - Top Only */
  .section-padding-top-xs { padding-top: var(--section-padding-xs) !important; }
  .section-padding-top-s { padding-top: var(--section-padding-s) !important; }
  .section-padding-top-m { padding-top: var(--section-padding-m) !important; }
  .section-padding-top-l { padding-top: var(--section-padding-l) !important; }
  .section-padding-top-xl { padding-top: var(--section-padding-xl) !important; }
  .section-padding-top-full { padding-top: var(--section-padding-full) !important; }
  
  /* Section Padding - Bottom Only */
  .section-padding-bottom-xs { padding-bottom: var(--section-padding-xs) !important; }
  .section-padding-bottom-s { padding-bottom: var(--section-padding-s) !important; }
  .section-padding-bottom-m { padding-bottom: var(--section-padding-m) !important; }
  .section-padding-bottom-l { padding-bottom: var(--section-padding-l) !important; }
  .section-padding-bottom-xl { padding-bottom: var(--section-padding-xl) !important; }
  .section-padding-bottom-full { padding-bottom: var(--section-padding-full) !important; }
  
  /* Responsive Section Padding - Mobile First Approach */
  @media (min-width: 768px) {
    .section-padding-xs-sm {
      padding-top: clamp(2.5rem, 4vw + 1.5rem, 5rem) !important;
      padding-bottom: clamp(2.5rem, 4vw + 1.5rem, 5rem) !important;
    }
    
    .section-padding-s-sm {
      padding-top: clamp(4rem, 5vw + 2rem, 7rem) !important;
      padding-bottom: clamp(4rem, 5vw + 2rem, 7rem) !important;
    }
    
    .section-padding-m-sm {
      padding-top: clamp(5rem, 7vw + 2.5rem, 10rem) !important;
      padding-bottom: clamp(5rem, 7vw + 2.5rem, 10rem) !important;
    }
    
    .section-padding-l-sm {
      padding-top: clamp(7rem, 9vw + 3.5rem, 14rem) !important;
      padding-bottom: clamp(7rem, 9vw + 3.5rem, 14rem) !important;
    }
    
    .section-padding-xl-sm {
      padding-top: clamp(9rem, 11vw + 4.5rem, 18rem) !important;
      padding-bottom: clamp(9rem, 11vw + 4.5rem, 18rem) !important;
    }
    
    .section-padding-full-sm {
      padding-top: clamp(12rem, 13vw + 6rem, 22rem) !important;
      padding-bottom: clamp(12rem, 13vw + 6rem, 22rem) !important;
    }
  }
  
  @media (min-width: 1024px) {
    .section-padding-xs-lg {
      padding-top: clamp(3rem, 5vw + 2rem, 6rem) !important;
      padding-bottom: clamp(3rem, 5vw + 2rem, 6rem) !important;
    }
    
    .section-padding-s-lg {
      padding-top: clamp(5rem, 6vw + 3rem, 9rem) !important;
      padding-bottom: clamp(5rem, 6vw + 3rem, 9rem) !important;
    }
    
    .section-padding-m-lg {
      padding-top: clamp(6rem, 8vw + 4rem, 12rem) !important;
      padding-bottom: clamp(6rem, 8vw + 4rem, 12rem) !important;
    }
    
    .section-padding-l-lg {
      padding-top: clamp(8rem, 10vw + 5rem, 16rem) !important;
      padding-bottom: clamp(8rem, 10vw + 5rem, 16rem) !important;
    }
    
    .section-padding-xl-lg {
      padding-top: clamp(10rem, 12vw + 6rem, 20rem) !important;
      padding-bottom: clamp(10rem, 12vw + 6rem, 20rem) !important;
    }
    
    .section-padding-full-lg {
      padding-top: clamp(14rem, 15vw + 8rem, 28rem) !important;
      padding-bottom: clamp(14rem, 15vw + 8rem, 28rem) !important;
    }
  }
  
  /* Additional responsive breakpoints for better fluid scaling */
  @media (min-width: 1200px) {
    .section-padding-xs-xl {
      padding-top: clamp(3.5rem, 6vw + 2.5rem, 7rem) !important;
      padding-bottom: clamp(3.5rem, 6vw + 2.5rem, 7rem) !important;
    }
    
    .section-padding-s-xl {
      padding-top: clamp(6rem, 7vw + 3.5rem, 10rem) !important;
      padding-bottom: clamp(6rem, 7vw + 3.5rem, 10rem) !important;
    }
    
    .section-padding-m-xl {
      padding-top: clamp(8rem, 9vw + 4.5rem, 14rem) !important;
      padding-bottom: clamp(8rem, 9vw + 4.5rem, 14rem) !important;
    }
    
    .section-padding-l-xl {
      padding-top: clamp(10rem, 11vw + 5.5rem, 18rem) !important;
      padding-bottom: clamp(10rem, 11vw + 5.5rem, 18rem) !important;
    }
    
    .section-padding-xl-xl {
      padding-top: clamp(12rem, 13vw + 6.5rem, 22rem) !important;
      padding-bottom: clamp(12rem, 13vw + 6.5rem, 22rem) !important;
    }
    
    .section-padding-full-xl {
      padding-top: clamp(16rem, 16vw + 8.5rem, 32rem) !important;
      padding-bottom: clamp(16rem, 16vw + 8.5rem, 32rem) !important;
    }
  }
  
  @media (min-width: 1440px) {
    .section-padding-xs-2xl {
      padding-top: clamp(4rem, 7vw + 3rem, 8rem) !important;
      padding-bottom: clamp(4rem, 7vw + 3rem, 8rem) !important;
    }
    
    .section-padding-s-2xl {
      padding-top: clamp(7rem, 8vw + 4rem, 11rem) !important;
      padding-bottom: clamp(7rem, 8vw + 4rem, 11rem) !important;
    }
    
    .section-padding-m-2xl {
      padding-top: clamp(9rem, 10vw + 5rem, 15rem) !important;
      padding-bottom: clamp(9rem, 10vw + 5rem, 15rem) !important;
    }
    
    .section-padding-l-2xl {
      padding-top: clamp(12rem, 12vw + 6rem, 20rem) !important;
      padding-bottom: clamp(12rem, 12vw + 6rem, 20rem) !important;
    }
    
    .section-padding-xl-2xl {
      padding-top: clamp(14rem, 14vw + 7rem, 24rem) !important;
      padding-bottom: clamp(14rem, 14vw + 7rem, 24rem) !important;
    }
    
    .section-padding-full-2xl {
      padding-top: clamp(18rem, 18vw + 9rem, 36rem) !important;
      padding-bottom: clamp(18rem, 18vw + 9rem, 36rem) !important;
    }
  }
  
  /* ==========================================================================
     UTILITY CLASSES - VISUAL EFFECTS
     ========================================================================== */
  
  /* Hover Effects - Transform */
  .hover-grow {
    transition: transform var(--transition-normal) ease-in-out !important;
  }
  
  .hover-grow:hover {
    transform: scale(1.05) !important;
  }
  
  .hover-grow-sm {
    transition: transform var(--transition-normal) ease-in-out !important;
  }
  
  .hover-grow-sm:hover {
    transform: scale(1.025) !important;
  }
  
  .hover-grow-lg {
    transition: transform var(--transition-normal) ease-in-out !important;
  }
  
  .hover-grow-lg:hover {
    transform: scale(1.1) !important;
  }
  
  .hover-shrink {
    transition: transform var(--transition-normal) ease-in-out !important;
  }
  
  .hover-shrink:hover {
    transform: scale(0.95) !important;
  }
  
  /* Hover Effects - Shadow */
  .hover-shadow {
    transition: box-shadow var(--transition-normal) ease-in-out !important;
  }
  
  .hover-shadow:hover {
    box-shadow: var(--shadow-l) !important;
  }
  
  .hover-shadow-xl {
    transition: box-shadow var(--transition-normal) ease-in-out !important;
  }
  
  .hover-shadow-xl:hover {
    box-shadow: var(--shadow-xl) !important;
  }
  
  .hover-shadow-none {
    transition: box-shadow var(--transition-normal) ease-in-out !important;
  }
  
  .hover-shadow-none:hover {
    box-shadow: none !important;
  }
  
  .hover-shadow-glow {
    transition: box-shadow var(--transition-normal) ease-in-out !important;
  }
  
  .hover-shadow-glow:hover {
    box-shadow: 0 0 20px rgba(var(--pri-h), var(--pri-s), 50%, 0.4) !important;
  }
  
  .hover-shadow-glow-acc {
    transition: box-shadow var(--transition-normal) ease-in-out !important;
  }
  
  .hover-shadow-glow-acc:hover {
    box-shadow: 0 0 20px rgba(var(--acc-h), var(--acc-s), 50%, 0.4) !important;
  }
  
  /* Hover Effects - Opacity */
  .hover-opacity-75 {
    transition: opacity var(--transition-normal) ease-in-out !important;
  }
  
  .hover-opacity-75:hover {
    opacity: 0.75 !important;
  }
  
  .hover-opacity-50 {
    transition: opacity var(--transition-normal) ease-in-out !important;
  }
  
  .hover-opacity-50:hover {
    opacity: 0.5 !important;
  }
  
  .hover-opacity-100 {
    transition: opacity var(--transition-normal) ease-in-out !important;
  }
  
  .hover-opacity-100:hover {
    opacity: 1 !important;
  }
  
  /* Hover Effects - Background */
  .hover-bg-light {
    transition: background-color var(--transition-normal) ease-in-out !important;
  }
  
  .hover-bg-light:hover {
    background-color: var(--gray-50) !important;
  }
  
  .hover-bg-dark {
    transition: background-color var(--transition-normal) ease-in-out, color var(--transition-normal) ease-in-out !important;
  }
  
  .hover-bg-dark:hover {
    background-color: var(--gray-900) !important;
    color: var(--white) !important;
  }
  
  .hover-bg-pri {
    transition: background-color var(--transition-normal) ease-in-out, color var(--transition-normal) ease-in-out !important;
  }
  
  .hover-bg-pri:hover {
    background-color: var(--pri-500) !important;
    color: var(--white) !important;
  }
  
  .hover-bg-acc {
    transition: background-color var(--transition-normal) ease-in-out, color var(--transition-normal) ease-in-out !important;
  }
  
  .hover-bg-acc:hover {
    background-color: var(--acc-500) !important;
    color: var(--white) !important;
  }
  
  /* Hover Effects - Border */
  .hover-border-pri {
    transition: border-color var(--transition-normal) ease-in-out !important;
  }
  
  .hover-border-pri:hover {
    border-color: var(--pri-500) !important;
  }
  
  .hover-border-acc {
    transition: border-color var(--transition-normal) ease-in-out !important;
  }
  
  .hover-border-acc:hover {
    border-color: var(--acc-500) !important;
  }
  
  
  /* Hover Effects - Brightness/Filter */
  .hover-brighten {
    transition: filter var(--transition-normal) ease-in-out !important;
  }
  
  .hover-brighten:hover {
    filter: brightness(1.1) !important;
  }
  
  .hover-darken {
    transition: filter var(--transition-normal) ease-in-out !important;
  }
  
  .hover-darken:hover {
    filter: brightness(0.9) !important;
  }
  
  .hover-blur {
    transition: filter var(--transition-normal) ease-in-out !important;
  }
  
  .hover-blur:hover {
    filter: blur(2px) !important;
  }
  
  .hover-saturate {
    transition: filter var(--transition-normal) ease-in-out !important;
  }
  
  .hover-saturate:hover {
    filter: saturate(1.2) !important;
  }
  
  .hover-grayscale {
    transition: filter var(--transition-normal) ease-in-out !important;
  }
  
  .hover-grayscale:hover {
    filter: grayscale(1) !important;
  }
  
  /* Hover Effects - Combined */
  .hover-lift {
    transition: transform var(--transition-normal) ease-in-out, box-shadow var(--transition-normal) ease-in-out !important;
  }
  
  .hover-lift:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: var(--shadow-l) !important;
  }
  
  .hover-float {
    transition: transform var(--transition-normal) ease-in-out, box-shadow var(--transition-normal) ease-in-out !important;
  }
  
  .hover-float:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  }
  
  .hover-glow {
    transition: transform var(--transition-normal) ease-in-out, box-shadow var(--transition-normal) ease-in-out !important;
  }
  
  .hover-glow:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 0 20px rgba(var(--pri-h), var(--pri-s), 50%, 0.3) !important;
  }
  
  /* Legacy Border Radius Classes */
  .rad-xs { border-radius: var(--radius-xs) !important; }
  .rad-s { border-radius: var(--radius-s) !important; }
  .rad-m { border-radius: var(--radius-m) !important; }
  .rad-l { border-radius: var(--radius-l) !important; }
  .rad-xl { border-radius: var(--radius-xl) !important; }
  .rad-full { border-radius: var(--radius-full) !important; }
  
  /* Shadows */
  .shadow-none { box-shadow: none !important; }
  .shadow-s { box-shadow: var(--shadow-s) !important; }
  .shadow-m { box-shadow: var(--shadow-m) !important; }
  .shadow-l { box-shadow: var(--shadow-l) !important; }
  .shadow-xl { box-shadow: var(--shadow-xl) !important; }
  .shadow-inset { box-shadow: var(--shadow-inset) !important; }
  
  /* ==========================================================================
     UTILITY CLASSES - LAYOUT & DISPLAY
     ========================================================================== */
  
  /* Display */
  .hide { display: none !important; }
  .block { display: block !important; }
  .inline { display: inline !important; }
  .inline-block { display: inline-block !important; }
  .flex { display: flex !important; }
  .inline-flex { display: inline-flex !important; }
  .grid { display: grid !important; }
  .hidden { display: none !important; }
  
  /* Flexbox utilities */
  .flex-row { flex-direction: row !important; }
  .flex-col { flex-direction: column !important; }
  .flex-wrap { flex-wrap: wrap !important; }
  .flex-nowrap { flex-wrap: nowrap !important; }
  
  .justify-start { justify-content: flex-start !important; }
  .justify-end { justify-content: flex-end !important; }
  .justify-center { justify-content: center !important; }
  .justify-between { justify-content: space-between !important; }
  .justify-around { justify-content: space-around !important; }
  .justify-evenly { justify-content: space-evenly !important; }
  
  .items-start { align-items: flex-start !important; }
  .items-end { align-items: flex-end !important; }
  .items-center { align-items: center !important; }
  .items-baseline { align-items: baseline !important; }
  .items-stretch { align-items: stretch !important; }
  
  /* Width utilities */
  .w-auto { width: auto !important; }
  .w-full { width: 100% !important; }
  .w-screen { width: 100vw !important; }
  .w-1\/2 { width: 50% !important; }
  .w-1\/3 { width: 33.333333% !important; }
  .w-2\/3 { width: 66.666667% !important; }
  .w-1\/4 { width: 25% !important; }
  .w-3\/4 { width: 75% !important; }
  
  /* Height utilities */
  .h-auto { height: auto !important; }
  .h-full { height: 100% !important; }
  .h-screen { height: 100vh !important; }
  
  /* Max width utilities */
  .max-w-full { max-width: 100% !important; }
  .max-w-screen { max-width: 100vw !important; }
  
  /* Min height utilities */
  .min-h-full { min-height: 100% !important; }
  .min-h-screen { min-height: 100vh !important; }
  
  /* Color utilities */
  .text-primary { color: var(--pri-500) !important; }
  .text-secondary { color: var(--acc-500) !important; }
  .bg-primary { background-color: var(--pri-500) !important; }
  .bg-secondary { background-color: var(--acc-500) !important; }
  .bg-white { background-color: white !important; }
  .bg-transparent { background-color: transparent !important; }
  
  /* Border utilities */
  .border { border: 1px solid var(--gray-300) !important; }
  .border-none { border: none !important; }
  .rounded { border-radius: 0.375rem !important; }
  .rounded-lg { border-radius: 0.5rem !important; }
  .rounded-full { border-radius: 9999px !important; }
  
  
  /* Grid Utilities */
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .grid-cols-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }
  
  /* Grid Column Spanning */
  .col-span-1 { grid-column: span 1 / span 1 !important; }
  .col-span-2 { grid-column: span 2 / span 2 !important; }
  .col-span-3 { grid-column: span 3 / span 3 !important; }
  .col-span-4 { grid-column: span 4 / span 4 !important; }
  .col-span-5 { grid-column: span 5 / span 5 !important; }
  .col-span-6 { grid-column: span 6 / span 6 !important; }
  .col-span-full { grid-column: 1 / -1 !important; }
  
  /* Grid Row Spanning */
  .row-span-1 { grid-row: span 1 / span 1 !important; }
  .row-span-2 { grid-row: span 2 / span 2 !important; }
  .row-span-3 { grid-row: span 3 / span 3 !important; }
  .row-span-4 { grid-row: span 4 / span 4 !important; }
  .row-span-5 { grid-row: span 5 / span 5 !important; }
  .row-span-6 { grid-row: span 6 / span 6 !important; }
  .row-span-full { grid-row: 1 / -1 !important; }
  
  /* ==========================================================================
     COMPONENT CLASSES - TYPOGRAPHY
     ========================================================================== */
  
  /* Headings */
  .sk h1, .sk h2, .sk h3, .sk h4, .sk h5, .sk h6 {
    margin-block-end: var(--spacing-s);
    text-rendering: optimizelegibility;
    margin-bottom: 0.5em;
  }
  
  .sk h1 {
    font-family: var(--font-primary);
    font-size: var(--heading-4xl);
    line-height: var(--line-height-heading-4xl);
    letter-spacing: -0.025em;
    font-weight: 700;
  }
  
  .sk h2 {
    font-family: var(--font-primary);
    font-size: var(--heading-3xl);
    line-height: var(--line-height-heading-3xl);
    letter-spacing: -0.02em;
    font-weight: 600;
  }
  
  .sk h3 {
    font-family: var(--font-primary);
    font-size: var(--heading-2xl);
    line-height: var(--line-height-heading-2xl);
    letter-spacing: -0.015em;
    font-weight: 600;
  }
  
  .sk h4 {
    font-family: var(--font-primary);
    font-size: var(--heading-xl);
    line-height: var(--line-height-heading-xl);
    letter-spacing: -0.01em;
    font-weight: 500;
  }
  
  .sk h5 {
    font-family: var(--font-primary);
    font-size: var(--heading-l);
    line-height: var(--line-height-heading-l);
    letter-spacing: -0.005em;
    font-weight: 500;
  }
  
  .sk h6 {
    font-family: var(--font-primary);
    font-size: var(--heading-m);
    line-height: var(--line-height-heading-m);
    letter-spacing: normal;
    font-weight: 500;
  }
  
  
  /* SiteKrafter Heading Classes - High Specificity */
  .sk-heading-9xl,
  .sk-heading-9xl * {
    font-family: var(--font-primary) !important;
    font-size: var(--sk-heading-9xl) !important;
    line-height: var(--line-height-heading-9xl) !important;
    letter-spacing: -0.03em !important;
    text-wrap: balance !important;
  }
  

  
  /* Fallback for heading-9xl if CSS variables fail */
  .sk-heading-9xl {
    font-size: clamp(4rem, calc(8vw + 2rem), 8rem) !important;
  }
  

  
  .sk-heading-8xl,
  .sk-heading-8xl * {
    font-family: var(--font-primary) !important;
    font-size: var(--sk-heading-8xl) !important;
    line-height: var(--line-height-heading-8xl) !important;
    letter-spacing: -0.025em !important;
    text-wrap: balance !important;
  }
  
  /* Fallback for heading-8xl if CSS variables fail */
  .sk-heading-8xl {
    font-size: clamp(3.5rem, calc(6vw + 2rem), 6rem) !important;
  }
  

  
  .sk-heading-7xl,
  .sk-heading-7xl * {
    font-family: var(--font-primary) !important;
    font-size: var(--sk-heading-7xl) !important;
    line-height: var(--line-height-heading-7xl) !important;
    letter-spacing: -0.02em !important;
    text-wrap: balance !important;
  }
  
  /* Fallback for heading-7xl if CSS variables fail */
  .sk-heading-7xl {
    font-size: clamp(3rem, calc(4vw + 2rem), 4.5rem) !important;
  }
  

  
  .sk-heading-6xl,
  .sk-heading-6xl * {
    font-family: var(--font-primary) !important;
    font-size: var(--sk-heading-6xl) !important;
    line-height: var(--line-height-heading-6xl) !important;
    letter-spacing: -0.018em !important;
    text-wrap: balance !important;
  }
  
  /* Fallback for heading-6xl if CSS variables fail */
  .sk-heading-6xl {
    font-size: clamp(2.5rem, calc(3vw + 1.5rem), 3.75rem) !important;
  }
  

  
  .sk-heading-5xl,
  .sk-heading-5xl * {
    font-family: var(--font-primary) !important;
    font-size: var(--sk-heading-5xl) !important;
    line-height: var(--line-height-heading-5xl) !important;
    letter-spacing: -0.015em !important;
    text-wrap: balance !important;
  }
  
  /* Fallback for heading-5xl if CSS variables fail */
  .sk-heading-5xl {
    font-size: clamp(2rem, calc(2vw + 1.5rem), 3rem) !important;
  }
  

  
  .sk-heading-4xl,
  .sk-heading-4xl * {
    font-family: var(--font-primary) !important;
    font-size: var(--sk-heading-4xl) !important;
    line-height: var(--line-height-heading-4xl) !important;
    letter-spacing: -0.012em !important;
    text-wrap: balance !important;
  }
  
  /* Fallback for heading-4xl if CSS variables fail */
  .sk-heading-4xl {
    font-size: clamp(1.75rem, calc(1.5vw + 1.25rem), 2.25rem) !important;
  }
  

  
  .sk-heading-3xl,
  .sk-heading-3xl * {
    font-family: var(--font-primary) !important;
    font-size: var(--sk-heading-3xl) !important;
    line-height: var(--line-height-heading-3xl) !important;
    letter-spacing: -0.01em !important;
    text-wrap: balance !important;
  }
  
  /* Fallback for heading-3xl if CSS variables fail */
  .sk-heading-3xl {
    font-size: clamp(1.5rem, calc(1vw + 1.25rem), 1.875rem) !important;
  }
  

  
  .sk-heading-2xl,
  .sk-heading-2xl * {
    font-family: var(--font-primary) !important;
    font-size: var(--sk-heading-2xl) !important;
    line-height: var(--line-height-heading-2xl) !important;
    letter-spacing: -0.008em !important;
    text-wrap: balance !important;
  }
  
  /* Fallback for heading-2xl if CSS variables fail */
  .sk-heading-2xl {
    font-size: clamp(1.25rem, calc(0.8vw + 1.1rem), 1.5rem) !important;
  }
  

  
  .sk-heading-xl,
  .sk-heading-xl * {
    font-family: var(--font-primary) !important;
    font-size: var(--sk-heading-xl) !important;
    line-height: var(--line-height-heading-xl) !important;
    letter-spacing: -0.005em !important;
    text-wrap: balance !important;
  }
  
  /* Fallback for heading-xl if CSS variables fail */
  .sk-heading-xl {
    font-size: clamp(1.125rem, calc(0.6vw + 1rem), 1.25rem) !important;
  }
  

  
  .sk-heading-l,
  .sk-heading-l * {
    font-family: var(--font-primary) !important;
    font-size: var(--sk-heading-l) !important;
    line-height: var(--line-height-heading-l) !important;
    letter-spacing: -0.002em !important;
    text-wrap: balance !important;
  }
  
  /* Fallback for heading-l if CSS variables fail */
  .sk-heading-l {
    font-size: clamp(1rem, calc(0.4vw + 0.9rem), 1.125rem) !important;
  }
  

  
  .sk-heading-m,
  .sk-heading-m * {
    font-family: var(--font-primary) !important;
    font-size: var(--sk-heading-m) !important;
    line-height: var(--line-height-heading-m) !important;
    letter-spacing: normal !important;
    text-wrap: balance !important;
  }
  
  /* Fallback for heading-m if CSS variables fail */
  .sk-heading-m {
    font-size: clamp(0.875rem, calc(0.3vw + 0.8rem), 1rem) !important;
  }
  

  
  .sk-heading-s,
  .sk-heading-s * {
    font-family: var(--font-primary) !important;
    font-size: var(--sk-heading-s) !important;
    line-height: var(--line-height-heading-s) !important;
    letter-spacing: normal !important;
    text-wrap: balance !important;
  }
  

  
  /* Fallback for heading-s if CSS variables fail */
  .sk-heading-s {
    font-size: clamp(0.75rem, calc(0.2vw + 0.7rem), 0.875rem) !important;
  }
  

  
  /* Text Elements */
  .sk p, .sk a, .sk li {
    font-size: var(--text-m);
    line-height: var(--line-height-text-m);
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-wrap: balance;
  }
  
  .sk-content {
    font-size: var(--text-m);
    line-height: var(--line-height-text-m);
    max-width: 70ch;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }
  
  /* Rich Text */
  .richtext {
    font-feature-settings: 'liga' 1, 'kern' 1;
    font-kerning: normal;
    hanging-punctuation: first;
    font-size: var(--text-m);
    line-height: var(--line-height-normal, 1.5);
    max-width: 70ch;
    margin-inline: auto;
  }
  
  .richtext blockquote {
    font-style: italic;
    border-inline-start: 3px solid var(--pri);
    padding-inline-start: var(--spacing-m);
    margin-inline: 0;
    color: var(--text-medium);
  }
  
  .richtext ul,
  .richtext ol {
    padding-inline-start: var(--spacing-l);
    margin-block: var(--spacing-m);
  }
  
  .richtext li + li {
    margin-block-start: var(--spacing-xs);
  }
  
  /* ==========================================================================
     COMPONENT CLASSES - UI ELEMENTS
     ========================================================================== */
  
  /* Buttons */
  .button-pri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-s) var(--spacing-m);
    font-size: var(--text-m);
    font-weight: 500;
    color: var(--white);
    background: var(--pri);
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-s);
  }
  
  .button-acc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-s) var(--spacing-m);
    font-size: var(--text-m);
    font-weight: 500;
    color: var(--white);
    background: var(--acc);
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-s);
  }
  
  .button-outline-pri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-s) var(--spacing-m);
    font-size: var(--text-m);
    font-weight: 500;
    color: var(--pri);
    background: transparent;
    border: 2px solid var(--pri);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-s);
  }
  
  .button-outline-acc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-s) var(--spacing-m);
    font-size: var(--text-m);
    font-weight: 500;
    color: var(--acc);
    background: transparent;
    border: 2px solid var(--acc);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-s);
  }
  
  .button-outline {
    background: transparent;
    color: var(--acc);
    border: 2px solid var(--acc);
    box-shadow: none;
  }
  
  .button-outline:hover {
    background: var(--acc);
    color: var(--white);
  }
  
  .button-ghost {
    background: transparent;
    color: var(--acc);
    box-shadow: none;
    border: none;
  }
  
  .button-ghost:hover {
    background: hsla(var(--pri-h), var(--pri-s), 50%, 0.1);
  }
  
  .button-text {
    background: none;
    color: var(--acc);
    padding: var(--spacing-xs);
    box-shadow: none;
  }
  
  .button-text:hover {
    text-decoration: underline;
  }
  
  .button-link {
    background: none;
    color: var(--acc);
    text-decoration: underline;
    padding: var(--spacing-xs);
  }
  
  .button-link:hover {
    color: var(--acc-dark);
  }
  
  /* Notices */
  .notice,
  .notice-info,
  .notice-warning,
  .notice-success,
  .notice-error {
    font-size: var(--text-m);
    padding: var(--spacing-m);
    max-width: 65ch;
    border-radius: var(--radius-xs);
    line-height: var(--line-height-normal);
    margin-block: var(--spacing-s);
    color: var(--text-dark);
    background-color: var(--info-light);
  }
  
  .notice-info { background-color: var(--info-light); }
  .notice-warning { background-color: var(--warning-light); }
  .notice-success { background-color: var(--success-light); }
  .notice-error { background-color: var(--error-light); }
  
  /* Glass Effect */
  .glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: .25rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    color: #ffffff;
    transition: all 0.3s ease;
  }
  
  .glass:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  }
  
  /* ==========================================================================
     COMPONENT CLASSES - ADVANCED LAYOUTS
     ========================================================================== */
  
  /* Responsive Grid Systems */
  .grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--grid-gap);
  }
  
  .grid-cols-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 25vw, 300px), 1fr));
  }
  
  .grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 25vw, 300px), 1fr));
  }
  
  /* Bento Grid System */
  .grid-bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 200px;
    gap: var(--spacing-l);
  }
  
  .bento-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-l);
    background-color: var(--gray-100);
    border-radius: var(--radius-m);
    font-size: var(--text-m);
    font-weight: bold;
  }
  
  .bento-lg { grid-column: span 2; grid-row: span 2; }
  .bento-wide { grid-column: span 2; }
  .bento-tall { grid-row: span 2; }
  .bento-full { grid-column: 1 / -1; grid-row: span 2; }
  
  /* ==========================================================================
     RESPONSIVE DESIGN - MOBILE FIRST
     ========================================================================== */
  
  /* Mobile Phones (< 480px) */
  @media (max-width: var(--breakpoint-xs)) {
    
    .grid-auto {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    .grid-cols-auto-fit,
    .grid-cols-auto-fill {
      grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 40vw, 200px), 1fr));
      --grid-gap: var(--spacing-xs);
    }
  }
  
  /* Small Devices (< 768px) */
  @media (max-width: var(--breakpoint-sm)) {
  }
  
  /* Tablets / Medium Devices (< 992px) */
  @media (max-width: var(--breakpoint-md)) {
  }
  
  /* Large Devices (> 1200px) */
  @media (min-width: var(--breakpoint-lg)) {
    .grid-cols-auto-fit,
    .grid-cols-auto-fill {
      grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 20vw, 350px), 1fr));
    }
  }
  
  /* 4K Displays (> 3840px) */
  @media (min-width: var(--breakpoint-4k)) {
    .grid-cols-auto-fit,
    .grid-cols-auto-fill {
      grid-template-columns: repeat(auto-fit, minmax(clamp(300px, 15vw, 400px), 1fr));
    }
  }
  
  
  
  /* Glass effect utility */
  .glass-effect {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--radius-m) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* ==========================================================================
     RESPONSIVE UTILITIES - MOBILE FIRST
     ========================================================================== */
  
  /* Small devices (tablets) - 768px and up */
  @media (min-width: 768px) {
    .sm\:text-xs { font-size: var(--text-xs) !important; line-height: var(--line-height-text-xs) !important; }
    .sm\:text-s { font-size: var(--text-s) !important; line-height: var(--line-height-text-s) !important; }
    .sm\:text-m { font-size: var(--text-m) !important; line-height: var(--line-height-text-m) !important; }
    .sm\:text-l { font-size: var(--text-l) !important; line-height: var(--line-height-text-l) !important; }
    .sm\:text-xl { font-size: var(--text-xl) !important; line-height: var(--line-height-text-xl) !important; }
    .sm\:text-2xl { font-size: var(--text-2xl) !important; line-height: var(--line-height-text-2xl) !important; }
    .sm\:text-3xl { font-size: var(--text-3xl) !important; line-height: var(--line-height-text-3xl) !important; }
    .sm\:text-4xl { font-size: var(--text-4xl) !important; line-height: var(--line-height-text-4xl) !important; }
    
    .sm\:p-0 { padding: 0 !important; }
    .sm\:p-xs { padding: var(--spacing-xs) !important; }
    .sm\:p-s { padding: var(--spacing-s) !important; }
    .sm\:p-m { padding: var(--spacing-m) !important; }
    .sm\:p-l { padding: var(--spacing-l) !important; }
    .sm\:p-xl { padding: var(--spacing-xl) !important; }
    
    .sm\:m-0 { margin: 0 !important; }
    .sm\:m-xs { margin: var(--spacing-xs) !important; }
    .sm\:m-s { margin: var(--spacing-s) !important; }
    .sm\:m-m { margin: var(--spacing-m) !important; }
    .sm\:m-l { margin: var(--spacing-l) !important; }
    .sm\:m-xl { margin: var(--spacing-xl) !important; }
    
    .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    
    .sm\:flex { display: flex !important; }
    .sm\:grid { display: grid !important; }
    .sm\:block { display: block !important; }
    .sm\:hidden { display: none !important; }
    
    .sm\:flex-row { flex-direction: row !important; }
    .sm\:flex-col { flex-direction: column !important; }
    
    .sm\:justify-start { justify-content: flex-start !important; }
    .sm\:justify-center { justify-content: center !important; }
    .sm\:justify-end { justify-content: flex-end !important; }
    .sm\:justify-between { justify-content: space-between !important; }
    
    .sm\:items-start { align-items: flex-start !important; }
    .sm\:items-center { align-items: center !important; }
    .sm\:items-end { align-items: flex-end !important; }
  }
  
  /* Medium devices (desktops) - 992px and up */
  @media (min-width: 992px) {
    .md\:text-xs { font-size: var(--text-xs) !important; line-height: var(--line-height-text-xs) !important; }
    .md\:text-s { font-size: var(--text-s) !important; line-height: var(--line-height-text-s) !important; }
    .md\:text-m { font-size: var(--text-m) !important; line-height: var(--line-height-text-m) !important; }
    .md\:text-l { font-size: var(--text-l) !important; line-height: var(--line-height-text-l) !important; }
    .md\:text-xl { font-size: var(--text-xl) !important; line-height: var(--line-height-text-xl) !important; }
    .md\:text-2xl { font-size: var(--text-2xl) !important; line-height: var(--line-height-text-2xl) !important; }
    .md\:text-3xl { font-size: var(--text-3xl) !important; line-height: var(--line-height-text-3xl) !important; }
    .md\:text-4xl { font-size: var(--text-4xl) !important; line-height: var(--line-height-text-4xl) !important; }
    
    .md\:p-0 { padding: 0 !important; }
    .md\:p-xs { padding: var(--spacing-xs) !important; }
    .md\:p-s { padding: var(--spacing-s) !important; }
    .md\:p-m { padding: var(--spacing-m) !important; }
    .md\:p-l { padding: var(--spacing-l) !important; }
    .md\:p-xl { padding: var(--spacing-xl) !important; }
    
    .md\:m-0 { margin: 0 !important; }
    .md\:m-xs { margin: var(--spacing-xs) !important; }
    .md\:m-s { margin: var(--spacing-s) !important; }
    .md\:m-m { margin: var(--spacing-m) !important; }
    .md\:m-l { margin: var(--spacing-l) !important; }
    .md\:m-xl { margin: var(--spacing-xl) !important; }
    
    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    
    .md\:flex { display: flex !important; }
    .md\:grid { display: grid !important; }
    .md\:block { display: block !important; }
    .md\:hidden { display: none !important; }
    
    .md\:flex-row { flex-direction: row !important; }
    .md\:flex-col { flex-direction: column !important; }
    
    .md\:justify-start { justify-content: flex-start !important; }
    .md\:justify-center { justify-content: center !important; }
    .md\:justify-end { justify-content: flex-end !important; }
    .md\:justify-between { justify-content: space-between !important; }
    
    .md\:items-start { align-items: flex-start !important; }
    .md\:items-center { align-items: center !important; }
    .md\:items-end { align-items: flex-end !important; }
  }
  
  /* Large devices (large desktops) - 1200px and up */
  @media (min-width: 1200px) {
    .lg\:text-xs { font-size: var(--text-xs) !important; line-height: var(--line-height-text-xs) !important; }
    .lg\:text-s { font-size: var(--text-s) !important; line-height: var(--line-height-text-s) !important; }
    .lg\:text-m { font-size: var(--text-m) !important; line-height: var(--line-height-text-m) !important; }
    .lg\:text-l { font-size: var(--text-l) !important; line-height: var(--line-height-text-l) !important; }
    .lg\:text-xl { font-size: var(--text-xl) !important; line-height: var(--line-height-text-xl) !important; }
    .lg\:text-2xl { font-size: var(--text-2xl) !important; line-height: var(--line-height-text-2xl) !important; }
    .lg\:text-3xl { font-size: var(--text-3xl) !important; line-height: var(--line-height-text-3xl) !important; }
    .lg\:text-4xl { font-size: var(--text-4xl) !important; line-height: var(--line-height-text-4xl) !important; }
    
    .lg\:p-0 { padding: 0 !important; }
    .lg\:p-xs { padding: var(--spacing-xs) !important; }
    .lg\:p-s { padding: var(--spacing-s) !important; }
    .lg\:p-m { padding: var(--spacing-m) !important; }
    .lg\:p-l { padding: var(--spacing-l) !important; }
    .lg\:p-xl { padding: var(--spacing-xl) !important; }
    
    .lg\:m-0 { margin: 0 !important; }
    .lg\:m-xs { margin: var(--spacing-xs) !important; }
    .lg\:m-s { margin: var(--spacing-s) !important; }
    .lg\:m-m { margin: var(--spacing-m) !important; }
    .lg\:m-l { margin: var(--spacing-l) !important; }
    .lg\:m-xl { margin: var(--spacing-xl) !important; }
    
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    
    .lg\:flex { display: flex !important; }
    .lg\:grid { display: grid !important; }
    .lg\:block { display: block !important; }
    .lg\:hidden { display: none !important; }
    
    .lg\:flex-row { flex-direction: row !important; }
    .lg\:flex-col { flex-direction: column !important; }
    
    .lg\:justify-start { justify-content: flex-start !important; }
    .lg\:justify-center { justify-content: center !important; }
    .lg\:justify-end { justify-content: flex-end !important; }
    .lg\:justify-between { justify-content: space-between !important; }
    
    .lg\:items-start { align-items: flex-start !important; }
    .lg\:items-center { align-items: center !important; }
    .lg\:items-end { align-items: flex-end !important; }
  }
  
  /* ==========================================================================
     CART COMPONENTS
     ========================================================================== */
  
  /* Base Cart Container */
  .sk-cart {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
    width: 100%;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  
  /* Cart Layout Variants */
  .sk-cart--horizontal {
    flex-direction: row;
    align-items: center;
  }
  
  .sk-cart--compact {
    gap: var(--spacing-xs);
  }
  
  .sk-cart--bordered {
    border: 1px solid var(--gray-200);
  }
  
  /* Cart Items */
  .sk-cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-s);
    border-bottom: 1px solid var(--gray-100);
    transition: background-color 0.2s ease;
  }
  
  .sk-cart-item:last-child {
    border-bottom: none;
  }
  
  .sk-cart-item:hover {
    background-color: var(--gray-50);
  }
  
  .sk-cart-item--selected {
    background-color: var(--pri-50);
    border-left: 3px solid var(--pri-500);
  }
  
  /* Cart Item Elements */
  .sk-cart-item-name {
    font-size: var(--text-s);
    font-weight: 500;
    color: var(--gray-900);
    flex: 1;
  }
  
  .sk-cart-item-price {
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--pri-600);
    margin-left: var(--spacing-s);
  }
  
  .sk-cart-item-quantity {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: var(--spacing-s);
  }
  
  .sk-cart-item-remove {
    padding: var(--spacing-xs);
    color: var(--gray-400);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
  }
  
  .sk-cart-item-remove:hover {
    color: var(--acc-500);
    background-color: var(--acc-50);
  }
  
  /* Cart Summary */
  .sk-cart-summary {
    padding: var(--spacing-m);
    background-color: var(--gray-50);
    border-top: 1px solid var(--gray-200);
  }
  
  .sk-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-l);
    font-weight: 600;
    color: var(--gray-900);
  }
  
  .sk-cart-subtotal {
    font-size: var(--text-s);
    color: var(--gray-600);
    margin-bottom: var(--spacing-xs);
  }
  
  .sk-cart-tax {
    font-size: var(--text-s);
    color: var(--gray-600);
    margin-bottom: var(--spacing-xs);
  }
  
  /* Cart Actions */
  .sk-cart-actions {
    display: flex;
    gap: var(--spacing-s);
    padding: var(--spacing-m);
    background-color: var(--white);
    border-top: 1px solid var(--gray-200);
  }
  
  .sk-cart-actions--centered {
    justify-content: center;
  }
  
  .sk-cart-actions--right {
    justify-content: flex-end;
  }
  
  /* Cart Buttons */
  .sk-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-s) var(--spacing-m);
    font-size: var(--text-s);
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    min-height: 40px;
  }
  
  .sk-cart-btn--primary {
    background-color: var(--pri-500);
    color: var(--white);
  }
  
  .sk-cart-btn--primary:hover {
    background-color: var(--pri-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--pri-h), var(--pri-s), 50%, 0.3);
  }
  
  .sk-cart-btn--secondary {
    background-color: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
  }
  
  .sk-cart-btn--secondary:hover {
    background-color: var(--gray-200);
    border-color: var(--gray-400);
  }
  
  .sk-cart-btn--checkout {
    background-color: var(--acc-500);
    color: var(--white);
    font-weight: 600;
    padding: var(--spacing-s) var(--spacing-l);
  }
  
  .sk-cart-btn--checkout:hover {
    background-color: var(--acc-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--acc-h), var(--acc-s), 50%, 0.3);
  }
  
  .sk-cart-btn--danger {
    background-color: var(--acc-500);
    color: var(--white);
  }
  
  .sk-cart-btn--danger:hover {
    background-color: var(--acc-600);
  }
  
  /* Cart States */
  .sk-cart--empty {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--gray-500);
  }
  
  .sk-cart--empty .sk-cart-empty-icon {
    font-size: var(--text-4xl);
    margin-bottom: var(--spacing-m);
    opacity: 0.5;
  }
  
  .sk-cart--loading {
    opacity: 0.7;
    pointer-events: none;
  }
  
  .sk-cart--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--gray-300);
    border-top: 2px solid var(--pri-500);
    border-radius: 50%;
    animation: sk-cart-spin 1s linear infinite;
  }
  
  @keyframes sk-cart-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* Cart Quantity Controls */
  .sk-cart-quantity {
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    overflow: hidden;
  }
  
  .sk-cart-quantity-btn {
    padding: var(--spacing-xs);
    background: var(--gray-100);
    border: none;
    cursor: pointer;
    color: var(--gray-600);
    transition: all 0.2s ease;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .sk-cart-quantity-btn:hover {
    background: var(--gray-200);
    color: var(--gray-800);
  }
  
  .sk-cart-quantity-input {
    width: 50px;
    text-align: center;
    border: none;
    padding: var(--spacing-xs);
    font-size: var(--text-s);
    color: var(--gray-900);
    background: var(--white);
  }
  
  .sk-cart-quantity-input:focus {
    outline: none;
    background: var(--pri-50);
  }
  
  /* Cart Badge */
  .sk-cart-badge {
    position: relative;
    display: inline-block;
  }
  
  .sk-cart-badge-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--acc-500);
    color: var(--white);
    font-size: var(--text-xs);
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }
  
  /* Cart Responsive */
  .sk-cart--mobile {
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--gray-200);
  }
  
  .sk-cart--mobile .sk-cart-item {
    padding: var(--spacing-m);
  }
  
  .sk-cart--mobile .sk-cart-actions {
    flex-direction: column;
  }
  
  .sk-cart--mobile .sk-cart-btn {
    width: 100%;
  }
  
  /* Cart Utility Classes */
  .sk-cart-gap-xs { gap: var(--spacing-xs) !important; }
  .sk-cart-gap-s { gap: var(--spacing-s) !important; }
  .sk-cart-gap-m { gap: var(--spacing-m) !important; }
  .sk-cart-gap-l { gap: var(--spacing-l) !important; }
  .sk-cart-gap-xl { gap: var(--spacing-xl) !important; }
  
  .sk-cart-p-xs { padding: var(--spacing-xs) !important; }
  .sk-cart-p-s { padding: var(--spacing-s) !important; }
  .sk-cart-p-m { padding: var(--spacing-m) !important; }
  .sk-cart-p-l { padding: var(--spacing-l) !important; }
  .sk-cart-p-xl { padding: var(--spacing-xl) !important; }
  
  .sk-cart-m-xs { margin: var(--spacing-xs) !important; }
  .sk-cart-m-s { margin: var(--spacing-s) !important; }
  .sk-cart-m-m { margin: var(--spacing-m) !important; }
  .sk-cart-m-l { margin: var(--spacing-l) !important; }
  .sk-cart-m-xl { margin: var(--spacing-xl) !important; }
  
  /* ==========================================================================
     RESPONSIVE DESIGN
     ========================================================================== */
  
  /* ==========================================================================
     BUTTON COMPONENTS
     ========================================================================== */
  
  /* Base Button */
  .sk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-s) var(--spacing-m);
    font-family: inherit;
    font-size: var(--text-s);
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
    min-height: 40px;
    position: relative;
    overflow: hidden;
  }
  
  .sk-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--pri-h), var(--pri-s), 50%, 0.3);
  }
  
  .sk-btn:disabled,
  .sk-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  /* Button Size Variants */
  .sk-btn--xs {
    padding: var(--spacing-xs) var(--spacing-s);
    font-size: var(--text-xs);
    min-height: 24px;
    border-radius: 4px;
  }
  
  .sk-btn--s {
    padding: var(--spacing-xs) var(--spacing-m);
    font-size: var(--text-s);
    min-height: 32px;
    border-radius: 5px;
  }
  
  .sk-btn--m {
    padding: var(--spacing-s) var(--spacing-m);
    font-size: var(--text-s);
    min-height: 40px;
    border-radius: 6px;
  }
  
  .sk-btn--l {
    padding: var(--spacing-m) var(--spacing-l);
    font-size: var(--text-m);
    min-height: 48px;
    border-radius: 8px;
  }
  
  .sk-btn--xl {
    padding: var(--spacing-m) var(--spacing-xl);
    font-size: var(--text-l);
    min-height: 56px;
    border-radius: 10px;
  }
  
  /* Button Style Variants */
  .sk-btn--primary {
    background-color: var(--pri-500);
    color: var(--white);
    border-color: var(--pri-500);
  }
  
  .sk-btn--primary:hover {
    background-color: var(--pri-600);
    border-color: var(--pri-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--pri-h), var(--pri-s), 50%, 0.3);
  }
  
  .sk-btn--primary:active {
    background-color: var(--pri-700);
    border-color: var(--pri-700);
    transform: translateY(0);
  }
  
  .sk-btn--secondary {
    background-color: var(--gray-100);
    color: var(--gray-700);
    border-color: var(--gray-300);
  }
  
  .sk-btn--secondary:hover {
    background-color: var(--gray-200);
    border-color: var(--gray-400);
    color: var(--gray-800);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .sk-btn--secondary:active {
    background-color: var(--gray-300);
    border-color: var(--gray-500);
    transform: translateY(0);
  }
  
  .sk-btn--outline {
    background-color: transparent;
    color: var(--pri-600);
    border-color: var(--pri-500);
  }
  
  .sk-btn--outline:hover {
    background-color: var(--pri-50);
    border-color: var(--pri-600);
    color: var(--pri-700);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--pri-h), var(--pri-s), 50%, 0.2);
  }
  
  .sk-btn--outline:active {
    background-color: var(--pri-100);
    border-color: var(--pri-700);
    transform: translateY(0);
  }
  
  .sk-btn--ghost {
    background-color: transparent;
    color: var(--gray-600);
    border-color: transparent;
  }
  
  .sk-btn--ghost:hover {
    background-color: var(--gray-100);
    color: var(--gray-800);
    transform: translateY(-1px);
  }
  
  .sk-btn--ghost:active {
    background-color: var(--gray-200);
    transform: translateY(0);
  }
  
  .sk-btn--danger {
    background-color: var(--acc-500);
    color: var(--white);
    border-color: var(--acc-500);
  }
  
  .sk-btn--danger:hover {
    background-color: var(--acc-600);
    border-color: var(--acc-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--acc-h), var(--acc-s), 50%, 0.3);
  }
  
  .sk-btn--danger:active {
    background-color: var(--acc-700);
    border-color: var(--acc-700);
    transform: translateY(0);
  }
  
  .sk-btn--success {
    background-color: #10b981;
    color: var(--white);
    border-color: #10b981;
  }
  
  .sk-btn--success:hover {
    background-color: #059669;
    border-color: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }
  
  .sk-btn--success:active {
    background-color: #047857;
    border-color: #047857;
    transform: translateY(0);
  }
  
  /* Button States */
  .sk-btn--loading {
    color: transparent;
    pointer-events: none;
  }
  
  .sk-btn--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: sk-btn-spin 0.8s linear infinite;
  }
  
  @keyframes sk-btn-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  .sk-btn--active {
    transform: scale(0.98);
  }
  
  .sk-btn--full {
    width: 100%;
  }
  
  .sk-btn--rounded {
    border-radius: 9999px;
  }
  
  /* Button with Icons */
  .sk-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: 1.2em;
  }
  
  .sk-btn--icon-only {
    padding: var(--spacing-s);
    min-width: 40px;
    width: 40px;
  }
  
  .sk-btn--icon-only.sk-btn--xs {
    padding: var(--spacing-xs);
    min-width: 24px;
    width: 24px;
  }
  
  .sk-btn--icon-only.sk-btn--s {
    padding: var(--spacing-xs);
    min-width: 32px;
    width: 32px;
  }
  
  .sk-btn--icon-only.sk-btn--l {
    padding: var(--spacing-m);
    min-width: 48px;
    width: 48px;
  }
  
  .sk-btn--icon-only.sk-btn--xl {
    padding: var(--spacing-m);
    min-width: 56px;
    width: 56px;
  }
  
  /* Button Groups */
  .sk-btn-group {
    display: inline-flex;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .sk-btn-group .sk-btn {
    border-radius: 0;
    border-right-width: 0;
    margin: 0;
  }
  
  .sk-btn-group .sk-btn:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  
  .sk-btn-group .sk-btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-right-width: 1px;
  }
  
  .sk-btn-group .sk-btn:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  /* Button Stack */
  .sk-btn-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  
  .sk-btn-stack .sk-btn {
    width: 100%;
  }
  
  /* Button Responsive */
  .sk-btn--mobile {
    width: 100%;
    justify-content: center;
  }
  
  /* Button Utility Classes */
  .sk-btn-gap-xs { gap: var(--spacing-xs) !important; }
  .sk-btn-gap-s { gap: var(--spacing-s) !important; }
  .sk-btn-gap-m { gap: var(--spacing-m) !important; }
  .sk-btn-gap-l { gap: var(--spacing-l) !important; }
  .sk-btn-gap-xl { gap: var(--spacing-xl) !important; }
  
  .sk-btn-p-xs { padding: var(--spacing-xs) !important; }
  .sk-btn-p-s { padding: var(--spacing-s) !important; }
  .sk-btn-p-m { padding: var(--spacing-m) !important; }
  .sk-btn-p-l { padding: var(--spacing-l) !important; }
  .sk-btn-p-xl { padding: var(--spacing-xl) !important; }
  
  .sk-btn-m-xs { margin: var(--spacing-xs) !important; }
  .sk-btn-m-s { margin: var(--spacing-s) !important; }
  .sk-btn-m-m { margin: var(--spacing-m) !important; }
  .sk-btn-m-l { margin: var(--spacing-l) !important; }
  .sk-btn-m-xl { margin: var(--spacing-xl) !important; }
  
  /* ==========================================================================
     RESPONSIVE DESIGN
     ========================================================================== */