/**
 * Super Shop - Storefront Styles (Bundled)
 * 
 * Main stylesheet for the customer-facing storefront SPA
 * All CSS is bundled inline to avoid @import path issues
 * 
 * @package SuperShop
 * @version 1.0.2
 */

/**
 * Super Shop Design System
 * 
 * Core CSS Variables and Design Tokens
 * Soft, professional color palette with Teal primary
 * 
 * @package SuperShop
 * @version 1.0.0
 */

/* ============================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================ */

:root {
    /* ----------------------------------------
       Color Palette - Teal Primary
       Soft, professional, accessible colors
       ---------------------------------------- */
    
    /* Primary - Teal */
    --ss-primary-50: #f0fdfa;
    --ss-primary-100: #ccfbf1;
    --ss-primary-200: #99f6e4;
    --ss-primary-300: #5eead4;
    --ss-primary-400: #2dd4bf;
    --ss-primary-500: #14b8a6;
    --ss-primary-600: #0d9488;
    --ss-primary-700: #0f766e;
    --ss-primary-800: #115e59;
    --ss-primary-900: #134e4a;
    --ss-primary-950: #042f2e;
    
    /* Neutral - True Grays (no blue tint) */
    --ss-neutral-50: #fafafa;
    --ss-neutral-100: #f5f5f5;
    --ss-neutral-200: #e5e5e5;
    --ss-neutral-300: #d4d4d4;
    --ss-neutral-400: #a3a3a3;
    --ss-neutral-500: #737373;
    --ss-neutral-600: #525252;
    --ss-neutral-700: #404040;
    --ss-neutral-800: #262626;
    --ss-neutral-850: #1f1f1f;
    --ss-neutral-900: #171717;
    --ss-neutral-950: #0a0a0a;
    
    /* Aliases for backward compatibility */
    --ss-secondary-50: var(--ss-neutral-50);
    --ss-secondary-100: var(--ss-neutral-100);
    --ss-secondary-200: var(--ss-neutral-200);
    --ss-secondary-300: var(--ss-neutral-300);
    --ss-secondary-400: var(--ss-neutral-400);
    --ss-secondary-500: var(--ss-neutral-500);
    --ss-secondary-600: var(--ss-neutral-600);
    --ss-secondary-700: var(--ss-neutral-700);
    --ss-secondary-800: var(--ss-neutral-800);
    --ss-secondary-900: var(--ss-neutral-900);
    --ss-secondary-950: var(--ss-neutral-950);
    
    /* Success - Emerald */
    --ss-success-50: #ecfdf5;
    --ss-success-100: #d1fae5;
    --ss-success-200: #a7f3d0;
    --ss-success-300: #6ee7b7;
    --ss-success-400: #34d399;
    --ss-success-500: #10b981;
    --ss-success-600: #059669;
    --ss-success-700: #047857;
    --ss-success-800: #065f46;
    --ss-success-900: #064e3b;
    
    /* Warning - Amber */
    --ss-warning-50: #fffbeb;
    --ss-warning-100: #fef3c7;
    --ss-warning-200: #fde68a;
    --ss-warning-300: #fcd34d;
    --ss-warning-400: #fbbf24;
    --ss-warning-500: #f59e0b;
    --ss-warning-600: #d97706;
    --ss-warning-700: #b45309;
    --ss-warning-800: #92400e;
    --ss-warning-900: #78350f;
    
    /* Error - Rose */
    --ss-error-50: #fff1f2;
    --ss-error-100: #ffe4e6;
    --ss-error-200: #fecdd3;
    --ss-error-300: #fda4af;
    --ss-error-400: #fb7185;
    --ss-error-500: #f43f5e;
    --ss-error-600: #e11d48;
    --ss-error-700: #be123c;
    --ss-error-800: #9f1239;
    --ss-error-900: #881337;
    
    /* Info - Sky */
    --ss-info-50: #f0f9ff;
    --ss-info-100: #e0f2fe;
    --ss-info-200: #bae6fd;
    --ss-info-300: #7dd3fc;
    --ss-info-400: #38bdf8;
    --ss-info-500: #0ea5e9;
    --ss-info-600: #0284c7;
    --ss-info-700: #0369a1;
    --ss-info-800: #075985;
    --ss-info-900: #0c4a6e;
    
    /* ----------------------------------------
       Typography
       ---------------------------------------- */
    
    /* Font Families */
    --ss-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ss-font-arabic: 'Cairo', 'Almarai', 'Zain', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ss-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, 'Liberation Mono', monospace;
    
    /* Font Sizes */
    --ss-text-xs: 0.75rem;      /* 12px */
    --ss-text-sm: 0.875rem;     /* 14px */
    --ss-text-base: 1rem;       /* 16px */
    --ss-text-lg: 1.125rem;     /* 18px */
    --ss-text-xl: 1.25rem;      /* 20px */
    --ss-text-2xl: 1.5rem;      /* 24px */
    --ss-text-3xl: 1.875rem;    /* 30px */
    --ss-text-4xl: 2.25rem;     /* 36px */
    --ss-text-5xl: 3rem;        /* 48px */
    
    /* Line Heights */
    --ss-leading-none: 1;
    --ss-leading-tight: 1.25;
    --ss-leading-snug: 1.375;
    --ss-leading-normal: 1.5;
    --ss-leading-relaxed: 1.625;
    --ss-leading-loose: 2;
    
    /* Font Weights */
    --ss-font-light: 300;
    --ss-font-normal: 400;
    --ss-font-medium: 500;
    --ss-font-semibold: 600;
    --ss-font-bold: 700;
    
    /* Letter Spacing */
    --ss-tracking-tighter: -0.05em;
    --ss-tracking-tight: -0.025em;
    --ss-tracking-normal: 0;
    --ss-tracking-wide: 0.025em;
    --ss-tracking-wider: 0.05em;
    
    /* ----------------------------------------
       Spacing Scale
       ---------------------------------------- */
    
    --ss-space-0: 0;
    --ss-space-px: 1px;
    --ss-space-0-5: 0.125rem;   /* 2px */
    --ss-space-1: 0.25rem;      /* 4px */
    --ss-space-1-5: 0.375rem;   /* 6px */
    --ss-space-2: 0.5rem;       /* 8px */
    --ss-space-2-5: 0.625rem;   /* 10px */
    --ss-space-3: 0.75rem;      /* 12px */
    --ss-space-3-5: 0.875rem;   /* 14px */
    --ss-space-4: 1rem;         /* 16px */
    --ss-space-5: 1.25rem;      /* 20px */
    --ss-space-6: 1.5rem;       /* 24px */
    --ss-space-7: 1.75rem;      /* 28px */
    --ss-space-8: 2rem;         /* 32px */
    --ss-space-9: 2.25rem;      /* 36px */
    --ss-space-10: 2.5rem;      /* 40px */
    --ss-space-11: 2.75rem;     /* 44px */
    --ss-space-12: 3rem;        /* 48px */
    --ss-space-14: 3.5rem;      /* 56px */
    --ss-space-16: 4rem;        /* 64px */
    --ss-space-20: 5rem;        /* 80px */
    --ss-space-24: 6rem;        /* 96px */
    --ss-space-28: 7rem;        /* 112px */
    --ss-space-32: 8rem;        /* 128px */
    
    /* ----------------------------------------
       Border Radius
       ---------------------------------------- */
    
    --ss-radius-none: 0;
    --ss-radius-sm: 0.25rem;    /* 4px */
    --ss-radius-md: 0.375rem;   /* 6px */
    --ss-radius-lg: 0.5rem;     /* 8px */
    --ss-radius-xl: 0.75rem;    /* 12px */
    --ss-radius-2xl: 1rem;      /* 16px */
    --ss-radius-3xl: 1.5rem;    /* 24px */
    --ss-radius-full: 9999px;
    
    /* ----------------------------------------
       Shadows (Soft, layered)
       ---------------------------------------- */
    
    --ss-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --ss-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --ss-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ss-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --ss-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --ss-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --ss-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --ss-shadow-none: 0 0 #0000;
    
    /* Colored shadows for elevation */
    --ss-shadow-primary: 0 4px 14px 0 rgb(13 148 136 / 0.25);
    --ss-shadow-success: 0 4px 14px 0 rgb(16 185 129 / 0.25);
    --ss-shadow-warning: 0 4px 14px 0 rgb(245 158 11 / 0.25);
    --ss-shadow-error: 0 4px 14px 0 rgb(244 63 94 / 0.25);
    
    /* ----------------------------------------
       Transitions
       ---------------------------------------- */
    
    --ss-duration-75: 75ms;
    --ss-duration-100: 100ms;
    --ss-duration-150: 150ms;
    --ss-duration-200: 200ms;
    --ss-duration-300: 300ms;
    --ss-duration-500: 500ms;
    --ss-duration-700: 700ms;
    --ss-duration-1000: 1000ms;
    
    --ss-ease-linear: linear;
    --ss-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ss-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ss-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ss-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Default transition */
    --ss-transition: all var(--ss-duration-200) var(--ss-ease-in-out);
    --ss-transition-fast: all var(--ss-duration-150) var(--ss-ease-in-out);
    --ss-transition-slow: all var(--ss-duration-300) var(--ss-ease-in-out);
    
    /* ----------------------------------------
       Z-Index Scale
       ---------------------------------------- */
    
    --ss-z-negative: -1;
    --ss-z-0: 0;
    --ss-z-10: 10;
    --ss-z-20: 20;
    --ss-z-30: 30;
    --ss-z-40: 40;
    --ss-z-50: 50;
    --ss-z-dropdown: 1000;
    --ss-z-sticky: 1020;
    --ss-z-fixed: 1030;
    --ss-z-drawer: 1040;
    --ss-z-modal-backdrop: 1050;
    --ss-z-modal: 1060;
    --ss-z-popover: 1070;
    --ss-z-tooltip: 1080;
    --ss-z-toast: 1090;
    
    /* ----------------------------------------
       Layout
       ---------------------------------------- */
    
    /* Container max widths */
    --ss-container-sm: 640px;
    --ss-container-md: 768px;
    --ss-container-lg: 1024px;
    --ss-container-xl: 1280px;
    --ss-container-2xl: 1536px;
    
    /* Sidebar widths */
    --ss-sidebar-width: 260px;
    --ss-sidebar-collapsed: 72px;
    
    /* Header heights */
    --ss-header-height: 64px;
    --ss-header-height-mobile: 56px;
    
    /* ----------------------------------------
       Focus Ring
       ---------------------------------------- */
    
    --ss-ring-width: 2px;
    --ss-ring-offset: 2px;
    --ss-ring-color: var(--ss-primary-500);
    --ss-ring: 0 0 0 var(--ss-ring-offset) var(--ss-color-bg), 0 0 0 calc(var(--ss-ring-width) + var(--ss-ring-offset)) var(--ss-ring-color);
}


/* ============================================
   2. LIGHT THEME (Default)
   ============================================ */

:root,
[data-theme="light"] {
    /* Background colors */
    --ss-color-bg: #ffffff;
    --ss-color-bg-secondary: #f9fafb;
    --ss-color-bg-tertiary: #f3f4f6;
    --ss-color-bg-elevated: #ffffff;
    --ss-color-bg-sunken: #f3f4f6;
    
    /* Surface colors (cards, modals, etc.) */
    --ss-color-surface: #ffffff;
    --ss-color-surface-hover: #f9fafb;
    --ss-color-surface-active: #f3f4f6;
    
    /* Text colors */
    --ss-color-text: #111827;
    --ss-color-text-secondary: #4b5563;
    --ss-color-text-tertiary: #6b7280;
    --ss-color-text-muted: #6b7280; /* Changed from #9ca3af for better contrast */
    --ss-color-text-inverted: #ffffff;
    
    /* Border colors */
    --ss-color-border: #e5e7eb;
    --ss-color-border-light: #f3f4f6;
    --ss-color-border-dark: #d1d5db;
    
    /* Interactive colors - WCAG AA compliant (4.5:1+ contrast with white) */
    --ss-color-primary: var(--ss-primary-700);  /* Changed from 600 for better contrast */
    --ss-color-primary-hover: var(--ss-primary-800);
    --ss-color-primary-active: var(--ss-primary-900);
    --ss-color-primary-light: #f0fdfa;
    --ss-color-primary-lighter: #ccfbf1;
    
    /* Status colors - WCAG AA compliant */
    --ss-color-success: var(--ss-success-700);  /* Changed from 600 for better contrast */
    --ss-color-success-light: #ecfdf5;
    --ss-color-warning: var(--ss-warning-700);  /* Changed from 600 for better contrast */
    --ss-color-warning-light: #fffbeb;
    --ss-color-error: var(--ss-error-600);
    --ss-color-error-light: #fff1f2;
    --ss-color-info: var(--ss-info-700);  /* Changed from 600 for better contrast */
    --ss-color-info-light: #f0f9ff;
    
    /* Input colors */
    --ss-color-input-bg: #ffffff;
    --ss-color-input-border: #d1d5db;
    --ss-color-input-border-hover: #9ca3af;
    --ss-color-input-border-focus: var(--ss-primary-600);
    --ss-color-input-placeholder: #6b7280; /* Changed from #9ca3af for better contrast */
    
    /* Overlay */
    --ss-color-overlay: rgb(0 0 0 / 0.5);
    
    /* Scrollbar */
    --ss-color-scrollbar: #d1d5db;
    --ss-color-scrollbar-hover: #9ca3af;
}


/* ============================================
   3. DARK THEME
   Soft, flat dark with good teal contrast
   ============================================ */

[data-theme="dark"] {
    /* Background colors - true neutrals, no blue */
    --ss-color-bg: #121212;
    --ss-color-bg-secondary: #1a1a1a;
    --ss-color-bg-tertiary: #242424;
    --ss-color-bg-elevated: #1e1e1e;
    --ss-color-bg-sunken: #0a0a0a;
    
    /* Surface colors */
    --ss-color-surface: #1e1e1e;
    --ss-color-surface-hover: #2a2a2a;
    --ss-color-surface-active: #333333;
    
    /* Text colors */
    --ss-color-text: #f5f5f5;
    --ss-color-text-secondary: #a3a3a3;
    --ss-color-text-tertiary: #737373;
    --ss-color-text-muted: #525252;
    --ss-color-text-inverted: #121212;
    
    /* Border colors */
    --ss-color-border: #2e2e2e;
    --ss-color-border-light: #262626;
    --ss-color-border-dark: #404040;
    
    /* Interactive colors (brighter for dark mode) */
    --ss-color-primary: var(--ss-primary-400);
    --ss-color-primary-hover: var(--ss-primary-300);
    --ss-color-primary-active: var(--ss-primary-200);
    --ss-color-primary-light: rgba(20, 184, 166, 0.12);
    --ss-color-primary-lighter: rgba(20, 184, 166, 0.2);
    
    /* Status colors (adjusted for dark backgrounds) */
    --ss-color-success: var(--ss-success-400);
    --ss-color-success-light: rgba(16, 185, 129, 0.12);
    --ss-color-warning: var(--ss-warning-400);
    --ss-color-warning-light: rgba(251, 191, 36, 0.12);
    --ss-color-error: var(--ss-error-400);
    --ss-color-error-light: rgba(251, 113, 133, 0.12);
    --ss-color-info: var(--ss-info-400);
    --ss-color-info-light: rgba(56, 189, 248, 0.12);
    
    /* Input colors */
    --ss-color-input-bg: #1e1e1e;
    --ss-color-input-border: #3d3d3d;
    --ss-color-input-border-hover: #525252;
    --ss-color-input-border-focus: var(--ss-primary-400);
    --ss-color-input-placeholder: #525252;
    
    /* Overlay */
    --ss-color-overlay: rgb(0 0 0 / 0.75);
    
    /* Scrollbar */
    --ss-color-scrollbar: #3d3d3d;
    --ss-color-scrollbar-hover: #525252;
    
    /* Shadows (subtle for dark mode) */
    --ss-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --ss-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --ss-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --ss-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);
    
    /* Colored shadows for dark mode */
    --ss-shadow-primary: 0 4px 14px 0 rgb(45 212 191 / 0.2);
}


/* ============================================
   4. SYSTEM PREFERENCE (Auto Theme)
   ============================================ */

@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        /* Background colors */
        --ss-color-bg: #121212;
        --ss-color-bg-secondary: #1a1a1a;
        --ss-color-bg-tertiary: #242424;
        --ss-color-bg-elevated: #1e1e1e;
        --ss-color-bg-sunken: #0a0a0a;
        
        /* Surface colors */
        --ss-color-surface: #1e1e1e;
        --ss-color-surface-hover: #2a2a2a;
        --ss-color-surface-active: #333333;
        
        /* Text colors */
        --ss-color-text: #f5f5f5;
        --ss-color-text-secondary: #a3a3a3;
        --ss-color-text-tertiary: #737373;
        --ss-color-text-muted: #525252;
        --ss-color-text-inverted: #121212;
        
        /* Border colors */
        --ss-color-border: #2e2e2e;
        --ss-color-border-light: #262626;
        --ss-color-border-dark: #404040;
        
        /* Interactive colors */
        --ss-color-primary: var(--ss-primary-400);
        --ss-color-primary-hover: var(--ss-primary-300);
        --ss-color-primary-active: var(--ss-primary-200);
        --ss-color-primary-light: rgba(20, 184, 166, 0.12);
        --ss-color-primary-lighter: rgba(20, 184, 166, 0.2);
        
        /* Status colors */
        --ss-color-success: var(--ss-success-400);
        --ss-color-success-light: rgba(16, 185, 129, 0.12);
        --ss-color-warning: var(--ss-warning-400);
        --ss-color-warning-light: rgba(251, 191, 36, 0.12);
        --ss-color-error: var(--ss-error-400);
        --ss-color-error-light: rgba(251, 113, 133, 0.12);
        --ss-color-info: var(--ss-info-400);
        --ss-color-info-light: rgba(56, 189, 248, 0.12);
        
        /* Input colors */
        --ss-color-input-bg: #1e1e1e;
        --ss-color-input-border: #3d3d3d;
        --ss-color-input-border-hover: #525252;
        --ss-color-input-border-focus: var(--ss-primary-400);
        --ss-color-input-placeholder: #525252;
        
        /* Overlay */
        --ss-color-overlay: rgb(0 0 0 / 0.75);
        
        /* Scrollbar */
        --ss-color-scrollbar: #3d3d3d;
        --ss-color-scrollbar-hover: #525252;
        
        /* Shadows */
        --ss-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
        --ss-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
        --ss-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
        --ss-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);
        --ss-shadow-primary: 0 4px 14px 0 rgb(45 212 191 / 0.2);
    }
}


/* ============================================
   5. RTL SUPPORT
   ============================================ */

[dir="rtl"] {
    /* Flip directional properties */
    --ss-space-start: var(--ss-space-4);
    --ss-space-end: var(--ss-space-4);
}

/* Arabic Typography Enhancements */
html[dir="rtl"],
body.ss-rtl {
    /* Arabic text often needs more line height */
    --ss-leading-normal: 1.7;
    --ss-leading-relaxed: 1.8;
    
    /* Slightly larger base text for Arabic readability */
    font-size: 1.0625rem; /* 17px */
    
    /* Better text rendering for Arabic */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Arabic heading adjustments */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
body.ss-rtl h1,
body.ss-rtl h2,
body.ss-rtl h3,
body.ss-rtl h4,
body.ss-rtl h5,
body.ss-rtl h6 {
    font-weight: var(--ss-font-semibold);
    line-height: 1.4;
}

/* Arabic buttons and inputs */
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
body.ss-rtl button,
body.ss-rtl input,
body.ss-rtl select,
body.ss-rtl textarea {
    font-family: var(--ss-font-arabic);
}

/* Direction-aware utilities */
.ss-ms-auto { margin-inline-start: auto; }
.ss-me-auto { margin-inline-end: auto; }
.ss-ps-4 { padding-inline-start: var(--ss-space-4); }
.ss-pe-4 { padding-inline-end: var(--ss-space-4); }


/* ============================================
   6. REDUCED MOTION
   ============================================ */

@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;
    }
}
/**
 * Super Shop - Base Styles & Reset
 * 
 * Modern CSS reset with sensible defaults
 * 
 * @package SuperShop
 */

/* ============================================
   1. CSS RESET (Modern Reset)
   ============================================ */

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

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    line-height: var(--ss-leading-normal);
    font-family: var(--ss-font-sans);
    font-size: var(--ss-text-base);
    font-weight: var(--ss-font-normal);
    color: var(--ss-color-text, #111827);
    background-color: var(--ss-color-bg, #ffffff);
}

/* RTL Arabic Font */
html[dir="rtl"] body,
body.ss-rtl {
    font-family: var(--ss-font-arabic);
}

[data-theme="dark"] body {
    color: var(--ss-color-text, #f5f5f5);
    background-color: var(--ss-color-bg, #121212);
}

/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Remove built-in form typography styles */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* Remove list styles on ul, ol with role="list" */
ul[role="list"],
ol[role="list"] {
    list-style: none;
}

/* Anchor defaults */
a {
    color: inherit;
    text-decoration: none;
}

/* Button reset */
button {
    background: none;
    border: none;
    cursor: pointer;
}

/* Table defaults */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Remove fieldset styles */
fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* Legend styling */
legend {
    padding: 0;
}

/* Hidden elements */
[hidden] {
    display: none !important;
}


/* ============================================
   2. TYPOGRAPHY BASE
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--ss-font-semibold);
    line-height: var(--ss-leading-tight);
    color: var(--ss-color-text);
}

h1 {
    font-size: var(--ss-text-4xl);
    letter-spacing: var(--ss-tracking-tight);
}

h2 {
    font-size: var(--ss-text-3xl);
    letter-spacing: var(--ss-tracking-tight);
}

h3 {
    font-size: var(--ss-text-2xl);
}

h4 {
    font-size: var(--ss-text-xl);
}

h5 {
    font-size: var(--ss-text-lg);
}

h6 {
    font-size: var(--ss-text-base);
}

p {
    line-height: var(--ss-leading-relaxed);
}

small {
    font-size: var(--ss-text-sm);
}

strong, b {
    font-weight: var(--ss-font-semibold);
}

em, i {
    font-style: italic;
}

code, kbd, samp, pre {
    font-family: var(--ss-font-mono);
    font-size: 0.9em;
}

code {
    padding: var(--ss-space-0-5) var(--ss-space-1);
    background-color: var(--ss-color-bg-tertiary);
    border-radius: var(--ss-radius-sm);
}

pre {
    padding: var(--ss-space-4);
    background-color: var(--ss-color-bg-tertiary);
    border-radius: var(--ss-radius-lg);
    overflow-x: auto;
}

pre code {
    padding: 0;
    background: none;
    border-radius: 0;
}

blockquote {
    padding-inline-start: var(--ss-space-4);
    border-inline-start: 3px solid var(--ss-color-primary);
    color: var(--ss-color-text-secondary);
    font-style: italic;
}

hr {
    border: none;
    border-top: 1px solid var(--ss-color-border);
    margin: var(--ss-space-6) 0;
}

mark {
    background-color: var(--ss-warning-200);
    color: var(--ss-color-text);
    padding: 0 var(--ss-space-1);
    border-radius: var(--ss-radius-sm);
}

abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}


/* ============================================
   3. LINKS
   ============================================ */

a:not([class]) {
    color: var(--ss-color-primary);
    text-decoration: none;
    transition: var(--ss-transition-fast);
}

a:not([class]):hover {
    color: var(--ss-color-primary-hover);
    text-decoration: underline;
}

a:not([class]):focus-visible {
    outline: none;
    box-shadow: var(--ss-ring);
    border-radius: var(--ss-radius-sm);
}


/* ============================================
   4. LISTS
   ============================================ */

ul:not([class]),
ol:not([class]) {
    padding-inline-start: var(--ss-space-6);
}

ul:not([class]) li,
ol:not([class]) li {
    margin-bottom: var(--ss-space-2);
}

ul:not([class]) li::marker {
    color: var(--ss-color-primary);
}

ol:not([class]) li::marker {
    color: var(--ss-color-text-secondary);
    font-weight: var(--ss-font-medium);
}

dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--ss-space-2) var(--ss-space-4);
}

dt {
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
}

dd {
    color: var(--ss-color-text-secondary);
}


/* ============================================
   5. TABLES
   ============================================ */

table:not([class]) {
    width: 100%;
    text-align: start;
}

table:not([class]) th {
    font-weight: var(--ss-font-semibold);
    text-align: inherit;
    padding: var(--ss-space-3) var(--ss-space-4);
    background-color: var(--ss-color-bg-secondary);
    border-bottom: 1px solid var(--ss-color-border);
}

table:not([class]) td {
    padding: var(--ss-space-3) var(--ss-space-4);
    border-bottom: 1px solid var(--ss-color-border-light);
}

table:not([class]) tbody tr:hover {
    background-color: var(--ss-color-surface-hover);
}


/* ============================================
   6. FORM ELEMENTS BASE
   ============================================ */

label {
    display: block;
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
    margin-bottom: var(--ss-space-1-5);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
    width: 100%;
    padding: var(--ss-space-2-5) var(--ss-space-3);
    background-color: var(--ss-color-input-bg);
    border: 1px solid var(--ss-color-input-border);
    border-radius: var(--ss-radius-lg);
    font-size: var(--ss-text-sm);
    line-height: var(--ss-leading-normal);
    color: var(--ss-color-text);
    transition: var(--ss-transition-fast);
}

input::placeholder,
textarea::placeholder {
    color: var(--ss-color-input-placeholder);
}

input:hover,
textarea:hover,
select:hover {
    border-color: var(--ss-color-input-border-hover);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--ss-color-input-border-focus);
    box-shadow: 0 0 0 3px var(--ss-primary-100);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    box-shadow: 0 0 0 3px rgb(13 148 136 / 0.2);
}

input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--ss-color-bg-tertiary);
}

textarea {
    min-height: 100px;
    resize: vertical;
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ss-space-3) center;
    padding-inline-end: var(--ss-space-10);
}

[dir="rtl"] select {
    background-position: left var(--ss-space-3) center;
    padding-inline-end: var(--ss-space-3);
    padding-inline-start: var(--ss-space-10);
}

/* Checkbox and Radio */
input[type="checkbox"],
input[type="radio"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--ss-color-primary);
}

/* File input */
input[type="file"] {
    padding: var(--ss-space-2);
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    padding: var(--ss-space-2) var(--ss-space-4);
    margin-inline-end: var(--ss-space-3);
    background-color: var(--ss-color-primary);
    color: white;
    border: none;
    border-radius: var(--ss-radius-md);
    font-weight: var(--ss-font-medium);
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

input[type="file"]::file-selector-button:hover {
    background-color: var(--ss-color-primary-hover);
}

/* Range input */
input[type="range"] {
    width: 100%;
    height: 6px;
    background: var(--ss-color-border);
    border-radius: var(--ss-radius-full);
    cursor: pointer;
    accent-color: var(--ss-color-primary);
}


/* ============================================
   7. FOCUS STYLES
   ============================================ */

:focus-visible {
    outline: none;
    box-shadow: var(--ss-ring);
}

/* Skip link */
.ss-skip-link {
    position: absolute;
    top: -100%;
    left: var(--ss-space-4);
    padding: var(--ss-space-2) var(--ss-space-4);
    background-color: var(--ss-color-primary);
    color: white;
    border-radius: var(--ss-radius-md);
    z-index: var(--ss-z-toast);
    transition: top var(--ss-duration-200);
}

.ss-skip-link:focus {
    top: var(--ss-space-4);
}


/* ============================================
   8. SCROLLBAR STYLING
   ============================================ */

/* Webkit browsers */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--ss-color-scrollbar);
    border-radius: var(--ss-radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--ss-color-scrollbar-hover);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ss-color-scrollbar) transparent;
}


/* ============================================
   9. SELECTION STYLING
   ============================================ */

::selection {
    background-color: var(--ss-primary-200);
    color: var(--ss-primary-900);
}

[data-theme="dark"] ::selection {
    background-color: var(--ss-primary-800);
    color: var(--ss-primary-100);
}


/* ============================================
   10. UTILITY HELPERS
   ============================================ */

/* Screen reader only */
.ss-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ss-sr-only-focusable:focus,
.ss-sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Not screen reader only (make visible) */
.ss-not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}
/**
 * Super Shop - Utility Classes
 * 
 * Reusable, composable utility classes
 * Organized by property type
 * 
 * @package SuperShop
 */

/* ============================================
   1. DISPLAY
   ============================================ */

.ss-hidden { display: none; }
.ss-block { display: block; }
.ss-inline { display: inline; }
.ss-inline-block { display: inline-block; }
.ss-flex { display: flex; }
.ss-inline-flex { display: inline-flex; }
.ss-grid { display: grid; }
.ss-inline-grid { display: inline-grid; }


/* ============================================
   2. FLEXBOX
   ============================================ */

/* Direction */
.ss-flex-row { flex-direction: row; }
.ss-flex-row-reverse { flex-direction: row-reverse; }
.ss-flex-col { flex-direction: column; }
.ss-flex-col-reverse { flex-direction: column-reverse; }

/* Wrap */
.ss-flex-wrap { flex-wrap: wrap; }
.ss-flex-nowrap { flex-wrap: nowrap; }
.ss-flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Justify Content */
.ss-justify-start { justify-content: flex-start; }
.ss-justify-end { justify-content: flex-end; }
.ss-justify-center { justify-content: center; }
.ss-justify-between { justify-content: space-between; }
.ss-justify-around { justify-content: space-around; }
.ss-justify-evenly { justify-content: space-evenly; }

/* Align Items */
.ss-items-start { align-items: flex-start; }
.ss-items-end { align-items: flex-end; }
.ss-items-center { align-items: center; }
.ss-items-baseline { align-items: baseline; }
.ss-items-stretch { align-items: stretch; }

/* Align Self */
.ss-self-auto { align-self: auto; }
.ss-self-start { align-self: flex-start; }
.ss-self-end { align-self: flex-end; }
.ss-self-center { align-self: center; }
.ss-self-stretch { align-self: stretch; }

/* Flex */
.ss-flex-1 { flex: 1 1 0%; }
.ss-flex-auto { flex: 1 1 auto; }
.ss-flex-initial { flex: 0 1 auto; }
.ss-flex-none { flex: none; }

/* Grow & Shrink */
.ss-grow { flex-grow: 1; }
.ss-grow-0 { flex-grow: 0; }
.ss-shrink { flex-shrink: 1; }
.ss-shrink-0 { flex-shrink: 0; }


/* ============================================
   3. GRID
   ============================================ */

.ss-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ss-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ss-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ss-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ss-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Column Span */
.ss-col-span-1 { grid-column: span 1 / span 1; }
.ss-col-span-2 { grid-column: span 2 / span 2; }
.ss-col-span-3 { grid-column: span 3 / span 3; }
.ss-col-span-4 { grid-column: span 4 / span 4; }
.ss-col-span-6 { grid-column: span 6 / span 6; }
.ss-col-span-full { grid-column: 1 / -1; }


/* ============================================
   4. GAP
   ============================================ */

.ss-gap-0 { gap: 0; }
.ss-gap-1 { gap: var(--ss-space-1); }
.ss-gap-2 { gap: var(--ss-space-2); }
.ss-gap-3 { gap: var(--ss-space-3); }
.ss-gap-4 { gap: var(--ss-space-4); }
.ss-gap-5 { gap: var(--ss-space-5); }
.ss-gap-6 { gap: var(--ss-space-6); }
.ss-gap-8 { gap: var(--ss-space-8); }
.ss-gap-10 { gap: var(--ss-space-10); }
.ss-gap-12 { gap: var(--ss-space-12); }

.ss-gap-x-4 { column-gap: var(--ss-space-4); }
.ss-gap-y-4 { row-gap: var(--ss-space-4); }


/* ============================================
   5. SPACING (Margin & Padding)
   ============================================ */

/* Margin All */
.ss-m-0 { margin: 0; }
.ss-m-1 { margin: var(--ss-space-1); }
.ss-m-2 { margin: var(--ss-space-2); }
.ss-m-3 { margin: var(--ss-space-3); }
.ss-m-4 { margin: var(--ss-space-4); }
.ss-m-5 { margin: var(--ss-space-5); }
.ss-m-6 { margin: var(--ss-space-6); }
.ss-m-8 { margin: var(--ss-space-8); }
.ss-m-auto { margin: auto; }

/* Margin X (horizontal) */
.ss-mx-0 { margin-inline: 0; }
.ss-mx-2 { margin-inline: var(--ss-space-2); }
.ss-mx-4 { margin-inline: var(--ss-space-4); }
.ss-mx-6 { margin-inline: var(--ss-space-6); }
.ss-mx-auto { margin-inline: auto; }

/* Margin Y (vertical) */
.ss-my-0 { margin-block: 0; }
.ss-my-2 { margin-block: var(--ss-space-2); }
.ss-my-4 { margin-block: var(--ss-space-4); }
.ss-my-6 { margin-block: var(--ss-space-6); }
.ss-my-8 { margin-block: var(--ss-space-8); }
.ss-my-auto { margin-block: auto; }

/* Margin Top */
.ss-mt-0 { margin-top: 0; }
.ss-mt-1 { margin-top: var(--ss-space-1); }
.ss-mt-2 { margin-top: var(--ss-space-2); }
.ss-mt-3 { margin-top: var(--ss-space-3); }
.ss-mt-4 { margin-top: var(--ss-space-4); }
.ss-mt-5 { margin-top: var(--ss-space-5); }
.ss-mt-6 { margin-top: var(--ss-space-6); }
.ss-mt-8 { margin-top: var(--ss-space-8); }
.ss-mt-10 { margin-top: var(--ss-space-10); }
.ss-mt-12 { margin-top: var(--ss-space-12); }
.ss-mt-auto { margin-top: auto; }

/* Margin Bottom */
.ss-mb-0 { margin-bottom: 0; }
.ss-mb-1 { margin-bottom: var(--ss-space-1); }
.ss-mb-2 { margin-bottom: var(--ss-space-2); }
.ss-mb-3 { margin-bottom: var(--ss-space-3); }
.ss-mb-4 { margin-bottom: var(--ss-space-4); }
.ss-mb-5 { margin-bottom: var(--ss-space-5); }
.ss-mb-6 { margin-bottom: var(--ss-space-6); }
.ss-mb-8 { margin-bottom: var(--ss-space-8); }

/* Margin Start/End (RTL-aware) */
.ss-ms-0 { margin-inline-start: 0; }
.ss-ms-2 { margin-inline-start: var(--ss-space-2); }
.ss-ms-3 { margin-inline-start: var(--ss-space-3); }
.ss-ms-4 { margin-inline-start: var(--ss-space-4); }
.ss-ms-auto { margin-inline-start: auto; }

.ss-me-0 { margin-inline-end: 0; }
.ss-me-2 { margin-inline-end: var(--ss-space-2); }
.ss-me-3 { margin-inline-end: var(--ss-space-3); }
.ss-me-4 { margin-inline-end: var(--ss-space-4); }
.ss-me-auto { margin-inline-end: auto; }

/* Padding All */
.ss-p-0 { padding: 0; }
.ss-p-1 { padding: var(--ss-space-1); }
.ss-p-2 { padding: var(--ss-space-2); }
.ss-p-3 { padding: var(--ss-space-3); }
.ss-p-4 { padding: var(--ss-space-4); }
.ss-p-5 { padding: var(--ss-space-5); }
.ss-p-6 { padding: var(--ss-space-6); }
.ss-p-8 { padding: var(--ss-space-8); }
.ss-p-10 { padding: var(--ss-space-10); }

/* Padding X */
.ss-px-0 { padding-inline: 0; }
.ss-px-2 { padding-inline: var(--ss-space-2); }
.ss-px-3 { padding-inline: var(--ss-space-3); }
.ss-px-4 { padding-inline: var(--ss-space-4); }
.ss-px-5 { padding-inline: var(--ss-space-5); }
.ss-px-6 { padding-inline: var(--ss-space-6); }
.ss-px-8 { padding-inline: var(--ss-space-8); }

/* Padding Y */
.ss-py-0 { padding-block: 0; }
.ss-py-1 { padding-block: var(--ss-space-1); }
.ss-py-2 { padding-block: var(--ss-space-2); }
.ss-py-3 { padding-block: var(--ss-space-3); }
.ss-py-4 { padding-block: var(--ss-space-4); }
.ss-py-5 { padding-block: var(--ss-space-5); }
.ss-py-6 { padding-block: var(--ss-space-6); }
.ss-py-8 { padding-block: var(--ss-space-8); }

/* Padding Start/End */
.ss-ps-0 { padding-inline-start: 0; }
.ss-ps-2 { padding-inline-start: var(--ss-space-2); }
.ss-ps-4 { padding-inline-start: var(--ss-space-4); }
.ss-ps-6 { padding-inline-start: var(--ss-space-6); }

.ss-pe-0 { padding-inline-end: 0; }
.ss-pe-2 { padding-inline-end: var(--ss-space-2); }
.ss-pe-4 { padding-inline-end: var(--ss-space-4); }
.ss-pe-6 { padding-inline-end: var(--ss-space-6); }


/* ============================================
   6. WIDTH & HEIGHT
   ============================================ */

/* Width */
.ss-w-auto { width: auto; }
.ss-w-full { width: 100%; }
.ss-w-screen { width: 100vw; }
.ss-w-min { width: min-content; }
.ss-w-max { width: max-content; }
.ss-w-fit { width: fit-content; }

/* Fixed widths */
.ss-w-4 { width: var(--ss-space-4); }
.ss-w-5 { width: var(--ss-space-5); }
.ss-w-6 { width: var(--ss-space-6); }
.ss-w-8 { width: var(--ss-space-8); }
.ss-w-10 { width: var(--ss-space-10); }
.ss-w-12 { width: var(--ss-space-12); }
.ss-w-16 { width: var(--ss-space-16); }

/* Percentage widths */
.ss-w-1\/2 { width: 50%; }
.ss-w-1\/3 { width: 33.333333%; }
.ss-w-2\/3 { width: 66.666667%; }
.ss-w-1\/4 { width: 25%; }
.ss-w-3\/4 { width: 75%; }

/* Max Width */
.ss-max-w-none { max-width: none; }
.ss-max-w-xs { max-width: 20rem; }
.ss-max-w-sm { max-width: 24rem; }
.ss-max-w-md { max-width: 28rem; }
.ss-max-w-lg { max-width: 32rem; }
.ss-max-w-xl { max-width: 36rem; }
.ss-max-w-2xl { max-width: 42rem; }
.ss-max-w-3xl { max-width: 48rem; }
.ss-max-w-4xl { max-width: 56rem; }
.ss-max-w-5xl { max-width: 64rem; }
.ss-max-w-full { max-width: 100%; }
.ss-max-w-prose { max-width: 65ch; }

/* Height */
.ss-h-auto { height: auto; }
.ss-h-full { height: 100%; }
.ss-h-screen { height: 100vh; }
.ss-h-min { height: min-content; }
.ss-h-max { height: max-content; }
.ss-h-fit { height: fit-content; }

/* Fixed heights */
.ss-h-4 { height: var(--ss-space-4); }
.ss-h-5 { height: var(--ss-space-5); }
.ss-h-6 { height: var(--ss-space-6); }
.ss-h-8 { height: var(--ss-space-8); }
.ss-h-10 { height: var(--ss-space-10); }
.ss-h-12 { height: var(--ss-space-12); }
.ss-h-16 { height: var(--ss-space-16); }

/* Min Height */
.ss-min-h-0 { min-height: 0; }
.ss-min-h-full { min-height: 100%; }
.ss-min-h-screen { min-height: 100vh; }


/* ============================================
   7. TYPOGRAPHY
   ============================================ */

/* Font Size */
.ss-text-xs { font-size: var(--ss-text-xs); line-height: 1rem; }
.ss-text-sm { font-size: var(--ss-text-sm); line-height: 1.25rem; }
.ss-text-base { font-size: var(--ss-text-base); line-height: 1.5rem; }
.ss-text-lg { font-size: var(--ss-text-lg); line-height: 1.75rem; }
.ss-text-xl { font-size: var(--ss-text-xl); line-height: 1.75rem; }
.ss-text-2xl { font-size: var(--ss-text-2xl); line-height: 2rem; }
.ss-text-3xl { font-size: var(--ss-text-3xl); line-height: 2.25rem; }
.ss-text-4xl { font-size: var(--ss-text-4xl); line-height: 2.5rem; }
.ss-text-5xl { font-size: var(--ss-text-5xl); line-height: 1; }

/* Font Weight */
.ss-font-light { font-weight: var(--ss-font-light); }
.ss-font-normal { font-weight: var(--ss-font-normal); }
.ss-font-medium { font-weight: var(--ss-font-medium); }
.ss-font-semibold { font-weight: var(--ss-font-semibold); }
.ss-font-bold { font-weight: var(--ss-font-bold); }

/* Font Style */
.ss-italic { font-style: italic; }
.ss-not-italic { font-style: normal; }

/* Text Alignment */
.ss-text-start { text-align: start; }
.ss-text-end { text-align: end; }
.ss-text-center { text-align: center; }
.ss-text-justify { text-align: justify; }

/* Line Height */
.ss-leading-none { line-height: 1; }
.ss-leading-tight { line-height: 1.25; }
.ss-leading-snug { line-height: 1.375; }
.ss-leading-normal { line-height: 1.5; }
.ss-leading-relaxed { line-height: 1.625; }
.ss-leading-loose { line-height: 2; }

/* Letter Spacing */
.ss-tracking-tighter { letter-spacing: -0.05em; }
.ss-tracking-tight { letter-spacing: -0.025em; }
.ss-tracking-normal { letter-spacing: 0; }
.ss-tracking-wide { letter-spacing: 0.025em; }
.ss-tracking-wider { letter-spacing: 0.05em; }

/* Text Decoration */
.ss-underline { text-decoration: underline; }
.ss-no-underline { text-decoration: none; }
.ss-line-through { text-decoration: line-through; }

/* Text Transform */
.ss-uppercase { text-transform: uppercase; }
.ss-lowercase { text-transform: lowercase; }
.ss-capitalize { text-transform: capitalize; }
.ss-normal-case { text-transform: none; }

/* Text Overflow */
.ss-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ss-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ss-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Whitespace */
.ss-whitespace-normal { white-space: normal; }
.ss-whitespace-nowrap { white-space: nowrap; }
.ss-whitespace-pre { white-space: pre; }
.ss-whitespace-pre-wrap { white-space: pre-wrap; }

/* Word Break */
.ss-break-normal { word-break: normal; overflow-wrap: normal; }
.ss-break-words { overflow-wrap: break-word; }
.ss-break-all { word-break: break-all; }


/* ============================================
   8. COLORS (Text & Background)
   ============================================ */

/* Text Colors */
.ss-text-inherit { color: inherit; }
.ss-text-current { color: currentColor; }
.ss-text-primary { color: var(--ss-color-primary); }
.ss-text-secondary { color: var(--ss-color-text-secondary); }
.ss-text-tertiary { color: var(--ss-color-text-tertiary); }
.ss-text-muted { color: var(--ss-color-text-muted); }

/* Prose - formatted content styling */
.ss-prose {
    color: var(--ss-color-text-secondary);
    line-height: 1.75;
}

.ss-prose p {
    margin-bottom: 1.25em;
}

.ss-prose p:last-child {
    margin-bottom: 0;
}

.ss-prose strong {
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

.ss-prose ul,
.ss-prose ol {
    margin: 1.25em 0;
    padding-left: 1.5em;
}

.ss-prose li {
    margin-bottom: 0.5em;
}

.ss-prose h2,
.ss-prose h3,
.ss-prose h4 {
    color: var(--ss-color-text);
    font-weight: var(--ss-font-semibold);
    margin-top: 2em;
    margin-bottom: 1em;
}

.ss-prose h2 {
    font-size: 1.5em;
}

.ss-prose h3 {
    font-size: 1.25em;
}

.ss-prose h4 {
    font-size: 1.125em;
}

.ss-prose a {
    color: var(--ss-color-primary);
    text-decoration: underline;
}

.ss-prose a:hover {
    text-decoration: none;
}

.ss-prose blockquote {
    border-left: 4px solid var(--ss-color-border);
    padding-left: 1em;
    margin: 1.5em 0;
    font-style: italic;
    color: var(--ss-color-text-secondary);
}

.ss-prose code {
    font-family: var(--ss-font-mono);
    font-size: 0.875em;
    background: var(--ss-color-bg-secondary);
    padding: 0.2em 0.4em;
    border-radius: var(--ss-radius-sm);
}

.ss-prose pre {
    background: var(--ss-color-bg-secondary);
    padding: 1em;
    border-radius: var(--ss-radius-md);
    overflow-x: auto;
    margin: 1.5em 0;
}

.ss-prose pre code {
    background: none;
    padding: 0;
}

.ss-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ss-radius-md);
    margin: 1.5em 0;
}

.ss-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

.ss-prose th,
.ss-prose td {
    padding: 0.75em;
    border: 1px solid var(--ss-color-border);
    text-align: left;
}

.ss-prose th {
    background: var(--ss-color-bg-secondary);
    font-weight: var(--ss-font-medium);
}
.ss-text-success { color: var(--ss-color-success); }
.ss-text-warning { color: var(--ss-color-warning); }
.ss-text-error { color: var(--ss-color-error); }
.ss-text-info { color: var(--ss-color-info); }

/* Background Colors */
.ss-bg-transparent { background-color: transparent; }
.ss-bg-primary { background-color: var(--ss-color-primary); }
.ss-bg-primary-light { background-color: var(--ss-color-primary-light); }
.ss-bg-surface { background-color: var(--ss-color-surface); }
.ss-bg-secondary { background-color: var(--ss-color-bg-secondary); }
.ss-bg-tertiary { background-color: var(--ss-color-bg-tertiary); }
.ss-bg-success { background-color: var(--ss-color-success); }
.ss-bg-success-light { background-color: var(--ss-color-success-light); }
.ss-bg-warning { background-color: var(--ss-color-warning); }
.ss-bg-warning-light { background-color: var(--ss-color-warning-light); }
.ss-bg-error { background-color: var(--ss-color-error); }
.ss-bg-error-light { background-color: var(--ss-color-error-light); }
.ss-bg-info { background-color: var(--ss-color-info); }
.ss-bg-info-light { background-color: var(--ss-color-info-light); }


/* ============================================
   9. BORDERS
   ============================================ */

/* Border Width */
.ss-border-0 { border-width: 0; }
.ss-border { border-width: 1px; }
.ss-border-2 { border-width: 2px; }
.ss-border-t { border-top-width: 1px; }
.ss-border-r { border-inline-end-width: 1px; }
.ss-border-b { border-bottom-width: 1px; }
.ss-border-l { border-inline-start-width: 1px; }

/* Border Style */
.ss-border-solid { border-style: solid; }
.ss-border-dashed { border-style: dashed; }
.ss-border-dotted { border-style: dotted; }
.ss-border-none { border-style: none; }

/* Border Color */
.ss-border-transparent { border-color: transparent; }
.ss-border-current { border-color: currentColor; }
.ss-border-default { border-color: var(--ss-color-border); }
.ss-border-light { border-color: var(--ss-color-border-light); }
.ss-border-dark { border-color: var(--ss-color-border-dark); }
.ss-border-primary { border-color: var(--ss-color-primary); }
.ss-border-success { border-color: var(--ss-color-success); }
.ss-border-warning { border-color: var(--ss-color-warning); }
.ss-border-error { border-color: var(--ss-color-error); }

/* Border Radius */
.ss-rounded-none { border-radius: 0; }
.ss-rounded-sm { border-radius: var(--ss-radius-sm); }
.ss-rounded { border-radius: var(--ss-radius-md); }
.ss-rounded-md { border-radius: var(--ss-radius-md); }
.ss-rounded-lg { border-radius: var(--ss-radius-lg); }
.ss-rounded-xl { border-radius: var(--ss-radius-xl); }
.ss-rounded-2xl { border-radius: var(--ss-radius-2xl); }
.ss-rounded-full { border-radius: var(--ss-radius-full); }


/* ============================================
   10. SHADOWS
   ============================================ */

.ss-shadow-none { box-shadow: none; }
.ss-shadow-xs { box-shadow: var(--ss-shadow-xs); }
.ss-shadow-sm { box-shadow: var(--ss-shadow-sm); }
.ss-shadow { box-shadow: var(--ss-shadow-md); }
.ss-shadow-md { box-shadow: var(--ss-shadow-md); }
.ss-shadow-lg { box-shadow: var(--ss-shadow-lg); }
.ss-shadow-xl { box-shadow: var(--ss-shadow-xl); }
.ss-shadow-2xl { box-shadow: var(--ss-shadow-2xl); }
.ss-shadow-inner { box-shadow: var(--ss-shadow-inner); }
.ss-shadow-primary { box-shadow: var(--ss-shadow-primary); }


/* ============================================
   11. POSITION
   ============================================ */

.ss-static { position: static; }
.ss-relative { position: relative; }
.ss-absolute { position: absolute; }
.ss-fixed { position: fixed; }
.ss-sticky { position: sticky; }

/* Inset */
.ss-inset-0 { inset: 0; }
.ss-inset-auto { inset: auto; }
.ss-top-0 { top: 0; }
.ss-right-0 { right: 0; }
.ss-bottom-0 { bottom: 0; }
.ss-left-0 { left: 0; }
.ss-inset-x-0 { left: 0; right: 0; }
.ss-inset-y-0 { top: 0; bottom: 0; }

/* Start/End (RTL-aware) */
.ss-start-0 { inset-inline-start: 0; }
.ss-end-0 { inset-inline-end: 0; }


/* ============================================
   12. OVERFLOW
   ============================================ */

.ss-overflow-auto { overflow: auto; }
.ss-overflow-hidden { overflow: hidden; }
.ss-overflow-visible { overflow: visible; }
.ss-overflow-scroll { overflow: scroll; }
.ss-overflow-x-auto { overflow-x: auto; }
.ss-overflow-y-auto { overflow-y: auto; }
.ss-overflow-x-hidden { overflow-x: hidden; }
.ss-overflow-y-hidden { overflow-y: hidden; }


/* ============================================
   13. Z-INDEX
   ============================================ */

.ss-z-0 { z-index: var(--ss-z-0); }
.ss-z-10 { z-index: var(--ss-z-10); }
.ss-z-20 { z-index: var(--ss-z-20); }
.ss-z-30 { z-index: var(--ss-z-30); }
.ss-z-40 { z-index: var(--ss-z-40); }
.ss-z-50 { z-index: var(--ss-z-50); }
.ss-z-dropdown { z-index: var(--ss-z-dropdown); }
.ss-z-sticky { z-index: var(--ss-z-sticky); }
.ss-z-fixed { z-index: var(--ss-z-fixed); }
.ss-z-modal { z-index: var(--ss-z-modal); }


/* ============================================
   14. OPACITY
   ============================================ */

.ss-opacity-0 { opacity: 0; }
.ss-opacity-25 { opacity: 0.25; }
.ss-opacity-50 { opacity: 0.5; }
.ss-opacity-75 { opacity: 0.75; }
.ss-opacity-100 { opacity: 1; }


/* ============================================
   15. CURSOR
   ============================================ */

.ss-cursor-auto { cursor: auto; }
.ss-cursor-default { cursor: default; }
.ss-cursor-pointer { cursor: pointer; }
.ss-cursor-wait { cursor: wait; }
.ss-cursor-text { cursor: text; }
.ss-cursor-move { cursor: move; }
.ss-cursor-not-allowed { cursor: not-allowed; }
.ss-cursor-grab { cursor: grab; }
.ss-cursor-grabbing { cursor: grabbing; }


/* ============================================
   16. TRANSITIONS
   ============================================ */

.ss-transition-none { transition: none; }
.ss-transition { transition: var(--ss-transition); }
.ss-transition-fast { transition: var(--ss-transition-fast); }
.ss-transition-slow { transition: var(--ss-transition-slow); }
.ss-transition-colors { 
    transition-property: color, background-color, border-color, fill, stroke;
    transition-duration: var(--ss-duration-200);
    transition-timing-function: var(--ss-ease-in-out);
}
.ss-transition-opacity {
    transition-property: opacity;
    transition-duration: var(--ss-duration-200);
    transition-timing-function: var(--ss-ease-in-out);
}
.ss-transition-transform {
    transition-property: transform;
    transition-duration: var(--ss-duration-200);
    transition-timing-function: var(--ss-ease-in-out);
}


/* ============================================
   17. TRANSFORMS
   ============================================ */

.ss-scale-0 { transform: scale(0); }
.ss-scale-50 { transform: scale(0.5); }
.ss-scale-75 { transform: scale(0.75); }
.ss-scale-90 { transform: scale(0.9); }
.ss-scale-95 { transform: scale(0.95); }
.ss-scale-100 { transform: scale(1); }
.ss-scale-105 { transform: scale(1.05); }
.ss-scale-110 { transform: scale(1.1); }

.ss-rotate-0 { transform: rotate(0deg); }
.ss-rotate-45 { transform: rotate(45deg); }
.ss-rotate-90 { transform: rotate(90deg); }
.ss-rotate-180 { transform: rotate(180deg); }

.ss-translate-x-0 { transform: translateX(0); }
.ss-translate-y-0 { transform: translateY(0); }
.ss--translate-y-full { transform: translateY(-100%); }
.ss-translate-y-full { transform: translateY(100%); }


/* ============================================
   18. POINTER EVENTS & USER SELECT
   ============================================ */

.ss-pointer-events-none { pointer-events: none; }
.ss-pointer-events-auto { pointer-events: auto; }

.ss-select-none { user-select: none; }
.ss-select-text { user-select: text; }
.ss-select-all { user-select: all; }
.ss-select-auto { user-select: auto; }


/* ============================================
   19. RESPONSIVE UTILITIES
   ============================================ */

/* Tablet and up (768px) */
@media (min-width: 768px) {
    .md\:ss-hidden { display: none; }
    .md\:ss-block { display: block; }
    .md\:ss-flex { display: flex; }
    .md\:ss-grid { display: grid; }
    .md\:ss-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:ss-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:ss-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:ss-flex-row { flex-direction: row; }
    .md\:ss-w-auto { width: auto; }
    .md\:ss-w-1\/2 { width: 50%; }
    .md\:ss-w-1\/3 { width: 33.333333%; }
    .md\:ss-text-start { text-align: start; }
    .md\:ss-text-center { text-align: center; }
}

/* Desktop and up (1024px) */
@media (min-width: 1024px) {
    .lg\:ss-hidden { display: none; }
    .lg\:ss-block { display: block; }
    .lg\:ss-flex { display: flex; }
    .lg\:ss-grid { display: grid; }
    .lg\:ss-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:ss-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:ss-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:ss-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:ss-flex-row { flex-direction: row; }
    .lg\:ss-w-auto { width: auto; }
    .lg\:ss-w-1\/4 { width: 25%; }
    .lg\:ss-w-1\/3 { width: 33.333333%; }
}

/* Large desktop (1280px) */
@media (min-width: 1280px) {
    .xl\:ss-hidden { display: none; }
    .xl\:ss-block { display: block; }
    .xl\:ss-flex { display: flex; }
    .xl\:ss-grid { display: grid; }
    .xl\:ss-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl\:ss-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xl\:ss-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/**
 * Super Shop - Button Components
 * 
 * Consistent, accessible button styles
 * 
 * @package SuperShop
 */

/* ============================================
   1. BASE BUTTON
   ============================================ */

.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ss-space-2);
    padding: var(--ss-space-2-5) var(--ss-space-4);
    font-family: inherit;
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    line-height: var(--ss-leading-normal);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--ss-btn-radius, var(--ss-radius-lg));
    transition: var(--ss-transition-fast);
}

.ss-btn:focus-visible {
    outline: none;
    box-shadow: var(--ss-ring);
}

.ss-btn:disabled,
.ss-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button with icon only */
.ss-btn--icon {
    padding: var(--ss-space-2-5);
}

.ss-btn--icon.ss-btn--sm {
    padding: var(--ss-space-2);
}

.ss-btn--icon.ss-btn--lg {
    padding: var(--ss-space-3);
}


/* ============================================
   2. BUTTON VARIANTS
   ============================================ */

/* Primary - Filled teal */
.ss-btn--primary {
    background-color: var(--ss-color-primary);
    color: white;
    border-color: var(--ss-color-primary);
}

.ss-btn--primary:hover {
    background-color: var(--ss-color-primary-hover);
    border-color: var(--ss-color-primary-hover);
}

.ss-btn--primary:active {
    background-color: var(--ss-color-primary-active);
    border-color: var(--ss-color-primary-active);
}

/* Secondary - Outlined */
.ss-btn--secondary {
    background-color: transparent;
    color: var(--ss-color-text);
    border-color: var(--ss-color-border);
}

.ss-btn--secondary:hover {
    background-color: var(--ss-color-surface-hover);
    border-color: var(--ss-color-border-dark);
}

.ss-btn--secondary:active {
    background-color: var(--ss-color-surface-active);
}

/* Tertiary - Ghost/Text */
.ss-btn--tertiary {
    background-color: transparent;
    color: var(--ss-color-text-secondary);
    border-color: transparent;
}

.ss-btn--tertiary:hover {
    background-color: var(--ss-color-surface-hover);
    color: var(--ss-color-text);
}

.ss-btn--tertiary:active {
    background-color: var(--ss-color-surface-active);
}

/* Soft - Light background with primary text */
.ss-btn--soft {
    background-color: var(--ss-color-primary-light);
    color: var(--ss-color-primary);
    border-color: transparent;
}

.ss-btn--soft:hover {
    background-color: var(--ss-color-primary-lighter);
}

.ss-btn--soft:active {
    background-color: var(--ss-primary-200);
}

[data-theme="dark"] .ss-btn--soft:active {
    background-color: var(--ss-primary-800);
}

/* Success */
.ss-btn--success {
    background-color: var(--ss-color-success);
    color: white;
    border-color: var(--ss-color-success);
}

.ss-btn--success:hover {
    background-color: var(--ss-success-700);
    border-color: var(--ss-success-700);
}

/* Warning */
.ss-btn--warning {
    background-color: var(--ss-color-warning);
    color: white;
    border-color: var(--ss-color-warning);
}

.ss-btn--warning:hover {
    background-color: var(--ss-warning-700);
    border-color: var(--ss-warning-700);
}

/* Error/Danger */
.ss-btn--danger {
    background-color: var(--ss-color-error);
    color: white;
    border-color: var(--ss-color-error);
}

.ss-btn--danger:hover {
    background-color: var(--ss-error-700);
    border-color: var(--ss-error-700);
}

/* Danger Soft */
.ss-btn--danger-soft {
    background-color: var(--ss-color-error-light);
    color: var(--ss-color-error);
    border-color: transparent;
}

.ss-btn--danger-soft:hover {
    background-color: var(--ss-error-100);
}

[data-theme="dark"] .ss-btn--danger-soft:hover {
    background-color: rgb(244 63 94 / 0.25);
}

/* Link style */
.ss-btn--link {
    background-color: transparent;
    color: var(--ss-color-primary);
    border-color: transparent;
    padding-inline: 0;
}

.ss-btn--link:hover {
    color: var(--ss-color-primary-hover);
    text-decoration: underline;
}


/* ============================================
   3. BUTTON SIZES
   ============================================ */

/* Extra Small */
.ss-btn--xs {
    padding: var(--ss-space-1) var(--ss-space-2);
    font-size: var(--ss-text-xs);
    border-radius: var(--ss-radius-md);
}

/* Small */
.ss-btn--sm {
    padding: var(--ss-space-2) var(--ss-space-3);
    font-size: var(--ss-text-sm);
}

/* Large */
.ss-btn--lg {
    padding: var(--ss-space-3) var(--ss-space-5);
    font-size: var(--ss-text-base);
}

/* Extra Large */
.ss-btn--xl {
    padding: var(--ss-space-3-5) var(--ss-space-6);
    font-size: var(--ss-text-lg);
    border-radius: var(--ss-radius-xl);
}

/* Full Width */
.ss-btn--block {
    display: flex;
    width: 100%;
}


/* ============================================
   4. BUTTON STATES
   ============================================ */

/* Loading state */
.ss-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.ss-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--ss-radius-full);
    animation: ss-spin 0.6s linear infinite;
}

.ss-btn--primary.is-loading::after,
.ss-btn--success.is-loading::after,
.ss-btn--warning.is-loading::after,
.ss-btn--danger.is-loading::after {
    border-color: white;
    border-right-color: transparent;
}

@keyframes ss-spin {
    to { transform: rotate(360deg); }
}

/* Active/Selected state */
.ss-btn.is-active {
    background-color: var(--ss-color-primary-light);
    color: var(--ss-color-primary);
    border-color: var(--ss-color-primary);
}


/* ============================================
   5. BUTTON GROUPS
   ============================================ */

.ss-btn-group {
    display: inline-flex;
}

.ss-btn-group .ss-btn {
    border-radius: 0;
}

.ss-btn-group .ss-btn:first-child {
    border-start-start-radius: var(--ss-radius-lg);
    border-end-start-radius: var(--ss-radius-lg);
}

.ss-btn-group .ss-btn:last-child {
    border-start-end-radius: var(--ss-radius-lg);
    border-end-end-radius: var(--ss-radius-lg);
}

.ss-btn-group .ss-btn:not(:first-child) {
    margin-inline-start: -1px;
}

.ss-btn-group .ss-btn:hover,
.ss-btn-group .ss-btn:focus {
    z-index: 1;
}

/* Vertical button group */
.ss-btn-group--vertical {
    flex-direction: column;
}

.ss-btn-group--vertical .ss-btn:first-child {
    border-radius: 0;
    border-start-start-radius: var(--ss-radius-lg);
    border-start-end-radius: var(--ss-radius-lg);
}

.ss-btn-group--vertical .ss-btn:last-child {
    border-radius: 0;
    border-end-start-radius: var(--ss-radius-lg);
    border-end-end-radius: var(--ss-radius-lg);
}

.ss-btn-group--vertical .ss-btn:not(:first-child) {
    margin-inline-start: 0;
    margin-top: -1px;
}


/* ============================================
   6. ICON BUTTON VARIANTS
   ============================================ */

.ss-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-space-10);
    height: var(--ss-space-10);
    padding: 0;
    background-color: transparent;
    color: var(--ss-color-text-secondary);
    border: none;
    border-radius: var(--ss-radius-lg);
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-icon-btn:hover {
    background-color: var(--ss-color-surface-hover);
    color: var(--ss-color-text);
}

.ss-icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--ss-ring);
}

.ss-icon-btn--sm {
    width: var(--ss-space-8);
    height: var(--ss-space-8);
}

.ss-icon-btn--lg {
    width: var(--ss-space-12);
    height: var(--ss-space-12);
}

.ss-icon-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ss-icon-btn--sm svg {
    width: 1rem;
    height: 1rem;
}

.ss-icon-btn--lg svg {
    width: 1.5rem;
    height: 1.5rem;
}


/* ============================================
   7. FLOATING ACTION BUTTON (FAB)
   ============================================ */

.ss-fab {
    position: fixed;
    bottom: var(--ss-space-6);
    inset-inline-end: var(--ss-space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    background-color: var(--ss-color-primary);
    color: white;
    border: none;
    border-radius: var(--ss-radius-full);
    box-shadow: var(--ss-shadow-lg);
    cursor: pointer;
    transition: var(--ss-transition);
    z-index: var(--ss-z-fixed);
}

.ss-fab:hover {
    background-color: var(--ss-color-primary-hover);
    transform: scale(1.05);
    box-shadow: var(--ss-shadow-xl);
}

.ss-fab:active {
    transform: scale(0.98);
}

.ss-fab svg {
    width: 1.5rem;
    height: 1.5rem;
}
/**
 * Super Shop - Form Components
 * 
 * Consistent, accessible form styles
 * 
 * @package SuperShop
 */

/* ============================================
   1. FORM LAYOUT
   ============================================ */

.ss-form {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-5);
}

.ss-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-4);
}

.ss-form-row > * {
    flex: 1;
    min-width: 200px;
}

.ss-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-1-5);
}

.ss-form-actions {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding-top: var(--ss-space-4);
}

.ss-form-actions--end {
    justify-content: flex-end;
}

.ss-form-actions--between {
    justify-content: space-between;
}


/* ============================================
   2. LABELS
   ============================================ */

.ss-label {
    display: block;
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
}

.ss-label--required::after {
    content: ' *';
    color: var(--ss-color-error);
}

.ss-label--optional::after {
    content: ' (optional)';
    font-weight: var(--ss-font-normal);
    color: var(--ss-color-text-muted);
}


/* ============================================
   3. TEXT INPUTS
   ============================================ */

.ss-input {
    width: 100%;
    padding: var(--ss-space-2-5) var(--ss-space-3);
    background-color: var(--ss-color-input-bg);
    color: var(--ss-color-text);
    font-size: var(--ss-text-sm);
    line-height: var(--ss-leading-normal);
    border: 1px solid var(--ss-color-input-border);
    border-radius: var(--ss-radius-lg);
    transition: var(--ss-transition-fast);
}

.ss-input::placeholder {
    color: var(--ss-color-input-placeholder);
}

.ss-input:hover:not(:disabled) {
    border-color: var(--ss-color-input-border-hover);
}

.ss-input:focus {
    outline: none;
    border-color: var(--ss-color-input-border-focus);
    box-shadow: 0 0 0 3px var(--ss-primary-100);
}

[data-theme="dark"] .ss-input:focus {
    box-shadow: 0 0 0 3px rgb(13 148 136 / 0.2);
}

.ss-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--ss-color-bg-tertiary);
}

.ss-input:read-only {
    background-color: var(--ss-color-bg-secondary);
}

/* Input sizes */
.ss-input--sm {
    padding: var(--ss-space-2) var(--ss-space-2-5);
    font-size: var(--ss-text-xs);
}

.ss-input--lg {
    padding: var(--ss-space-3) var(--ss-space-4);
    font-size: var(--ss-text-base);
}

/* Input states */
.ss-input.is-valid {
    border-color: var(--ss-color-success);
}

.ss-input.is-valid:focus {
    box-shadow: 0 0 0 3px var(--ss-success-100);
}

[data-theme="dark"] .ss-input.is-valid:focus {
    box-shadow: 0 0 0 3px rgb(16 185 129 / 0.2);
}

.ss-input.is-invalid {
    border-color: var(--ss-color-error);
}

.ss-input.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--ss-error-100);
}

[data-theme="dark"] .ss-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgb(244 63 94 / 0.2);
}


/* ============================================
   4. INPUT WITH ICON/ADDON
   ============================================ */

.ss-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
}

.ss-input-group .ss-input {
    flex: 1;
}

/* Icon inside input */
.ss-input-icon {
    position: relative;
}

.ss-input-icon .ss-input {
    padding-inline-start: var(--ss-space-10);
}

.ss-input-icon--end .ss-input {
    padding-inline-start: var(--ss-space-3);
    padding-inline-end: var(--ss-space-10);
}

.ss-input-icon__icon {
    position: absolute;
    top: 50%;
    inset-inline-start: var(--ss-space-3);
    transform: translateY(-50%);
    color: var(--ss-color-text-muted);
    pointer-events: none;
}

.ss-input-icon--end .ss-input-icon__icon {
    inset-inline-start: auto;
    inset-inline-end: var(--ss-space-3);
}

.ss-input-icon__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Clickable icon (for password toggle, clear, etc.) */
.ss-input-icon__action {
    position: absolute;
    top: 50%;
    inset-inline-end: var(--ss-space-1);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-space-8);
    height: var(--ss-space-8);
    color: var(--ss-color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--ss-radius-md);
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-input-icon__action:hover {
    color: var(--ss-color-text);
    background-color: var(--ss-color-surface-hover);
}

/* Addons (prefix/suffix) */
.ss-input-addon {
    display: flex;
    align-items: center;
    padding: var(--ss-space-2-5) var(--ss-space-3);
    background-color: var(--ss-color-bg-secondary);
    color: var(--ss-color-text-secondary);
    font-size: var(--ss-text-sm);
    border: 1px solid var(--ss-color-input-border);
    white-space: nowrap;
}

.ss-input-addon:first-child {
    border-inline-end: none;
    border-start-start-radius: var(--ss-radius-lg);
    border-end-start-radius: var(--ss-radius-lg);
}

.ss-input-addon:last-child {
    border-inline-start: none;
    border-start-end-radius: var(--ss-radius-lg);
    border-end-end-radius: var(--ss-radius-lg);
}

.ss-input-group .ss-input:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.ss-input-group .ss-input:first-child {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.ss-input-group .ss-input:last-child {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}


/* ============================================
   5. TEXTAREA
   ============================================ */

.ss-textarea {
    width: 100%;
    min-height: 100px;
    padding: var(--ss-space-3);
    background-color: var(--ss-color-input-bg);
    color: var(--ss-color-text);
    font-size: var(--ss-text-sm);
    line-height: var(--ss-leading-relaxed);
    border: 1px solid var(--ss-color-input-border);
    border-radius: var(--ss-radius-lg);
    resize: vertical;
    transition: var(--ss-transition-fast);
}

.ss-textarea::placeholder {
    color: var(--ss-color-input-placeholder);
}

.ss-textarea:hover:not(:disabled) {
    border-color: var(--ss-color-input-border-hover);
}

.ss-textarea:focus {
    outline: none;
    border-color: var(--ss-color-input-border-focus);
    box-shadow: 0 0 0 3px var(--ss-primary-100);
}

[data-theme="dark"] .ss-textarea:focus {
    box-shadow: 0 0 0 3px rgb(13 148 136 / 0.2);
}

.ss-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    resize: none;
}

/* Auto-resize textarea */
.ss-textarea--auto {
    resize: none;
    overflow: hidden;
}


/* ============================================
   6. SELECT
   ============================================ */

.ss-select {
    width: 100%;
    padding: var(--ss-space-2-5) var(--ss-space-10) var(--ss-space-2-5) var(--ss-space-3);
    background-color: var(--ss-color-input-bg);
    color: var(--ss-color-text);
    font-size: var(--ss-text-sm);
    line-height: var(--ss-leading-normal);
    border: 1px solid var(--ss-color-input-border);
    border-radius: var(--ss-radius-lg);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ss-space-3) center;
    transition: var(--ss-transition-fast);
}

[dir="rtl"] .ss-select {
    padding: var(--ss-space-2-5) var(--ss-space-3) var(--ss-space-2-5) var(--ss-space-10);
    background-position: left var(--ss-space-3) center;
}

.ss-select:hover:not(:disabled) {
    border-color: var(--ss-color-input-border-hover);
}

.ss-select:focus {
    outline: none;
    border-color: var(--ss-color-input-border-focus);
    box-shadow: 0 0 0 3px var(--ss-primary-100);
}

[data-theme="dark"] .ss-select:focus {
    box-shadow: 0 0 0 3px rgb(13 148 136 / 0.2);
}

.ss-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Multiple select */
.ss-select[multiple] {
    padding: var(--ss-space-2);
    background-image: none;
    height: auto;
}

.ss-select[multiple] option {
    padding: var(--ss-space-2);
    border-radius: var(--ss-radius-md);
}

/* Select sizes */
.ss-select--sm {
    padding: var(--ss-space-2) var(--ss-space-8) var(--ss-space-2) var(--ss-space-2-5);
    font-size: var(--ss-text-xs);
}

.ss-select--lg {
    padding: var(--ss-space-3) var(--ss-space-12) var(--ss-space-3) var(--ss-space-4);
    font-size: var(--ss-text-base);
}


/* ============================================
   7. CHECKBOX
   ============================================ */

.ss-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-2);
    cursor: pointer;
    user-select: none;
}

.ss-checkbox__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ss-checkbox__box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    background-color: var(--ss-color-input-bg);
    border: 1.5px solid var(--ss-color-input-border);
    border-radius: var(--ss-radius-sm);
    transition: var(--ss-transition-fast);
    flex-shrink: 0;
}

.ss-checkbox__box svg {
    width: 0.75rem;
    height: 0.75rem;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: var(--ss-transition-fast);
}

.ss-checkbox__label {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text);
}

/* Hover */
.ss-checkbox:hover .ss-checkbox__box {
    border-color: var(--ss-color-primary);
}

/* Focus */
.ss-checkbox__input:focus-visible + .ss-checkbox__box {
    box-shadow: var(--ss-ring);
}

/* Checked */
.ss-checkbox__input:checked + .ss-checkbox__box {
    background-color: var(--ss-color-primary);
    border-color: var(--ss-color-primary);
}

.ss-checkbox__input:checked + .ss-checkbox__box svg {
    opacity: 1;
    transform: scale(1);
}

/* Indeterminate */
.ss-checkbox__input:indeterminate + .ss-checkbox__box {
    background-color: var(--ss-color-primary);
    border-color: var(--ss-color-primary);
}

.ss-checkbox__input:indeterminate + .ss-checkbox__box::before {
    content: '';
    width: 0.5rem;
    height: 2px;
    background-color: white;
    border-radius: 1px;
}

/* Disabled */
.ss-checkbox__input:disabled + .ss-checkbox__box {
    opacity: 0.5;
    cursor: not-allowed;
}

.ss-checkbox__input:disabled ~ .ss-checkbox__label {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ============================================
   8. RADIO
   ============================================ */

.ss-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-2);
    cursor: pointer;
    user-select: none;
}

.ss-radio__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ss-radio__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    background-color: var(--ss-color-input-bg);
    border: 1.5px solid var(--ss-color-input-border);
    border-radius: var(--ss-radius-full);
    transition: var(--ss-transition-fast);
    flex-shrink: 0;
}

.ss-radio__circle::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    background-color: white;
    border-radius: var(--ss-radius-full);
    opacity: 0;
    transform: scale(0);
    transition: var(--ss-transition-fast);
}

.ss-radio__label {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text);
}

/* Hover */
.ss-radio:hover .ss-radio__circle {
    border-color: var(--ss-color-primary);
}

/* Focus */
.ss-radio__input:focus-visible + .ss-radio__circle {
    box-shadow: var(--ss-ring);
}

/* Checked */
.ss-radio__input:checked + .ss-radio__circle {
    background-color: var(--ss-color-primary);
    border-color: var(--ss-color-primary);
}

.ss-radio__input:checked + .ss-radio__circle::after {
    opacity: 1;
    transform: scale(1);
}

/* Disabled */
.ss-radio__input:disabled + .ss-radio__circle {
    opacity: 0.5;
    cursor: not-allowed;
}

.ss-radio__input:disabled ~ .ss-radio__label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Radio Group */
.ss-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-2);
}

.ss-radio-group--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--ss-space-4);
}


/* ============================================
   9. SWITCH/TOGGLE
   ============================================ */

.ss-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-3);
    cursor: pointer;
    user-select: none;
}

.ss-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ss-switch__track {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    background-color: var(--ss-color-border-dark);
    border-radius: var(--ss-radius-full);
    transition: var(--ss-transition-fast);
    flex-shrink: 0;
}

.ss-switch__thumb {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: calc(1.5rem - 4px);
    height: calc(1.5rem - 4px);
    background-color: white;
    border-radius: var(--ss-radius-full);
    box-shadow: var(--ss-shadow-sm);
    transition: var(--ss-transition-fast);
}

.ss-switch__label {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text);
}

/* Focus */
.ss-switch__input:focus-visible + .ss-switch__track {
    box-shadow: var(--ss-ring);
}

/* Checked */
.ss-switch__input:checked + .ss-switch__track {
    background-color: var(--ss-color-primary);
}

.ss-switch__input:checked + .ss-switch__track .ss-switch__thumb {
    inset-inline-start: calc(100% - 1.5rem + 2px);
}

/* Disabled */
.ss-switch__input:disabled + .ss-switch__track {
    opacity: 0.5;
    cursor: not-allowed;
}

.ss-switch__input:disabled ~ .ss-switch__label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Switch sizes */
.ss-switch--sm .ss-switch__track {
    width: 2rem;
    height: 1.125rem;
}

.ss-switch--sm .ss-switch__thumb {
    width: calc(1.125rem - 4px);
    height: calc(1.125rem - 4px);
}

.ss-switch--sm .ss-switch__input:checked + .ss-switch__track .ss-switch__thumb {
    inset-inline-start: calc(100% - 1.125rem + 2px);
}


/* ============================================
   10. FILE INPUT
   ============================================ */

.ss-file-input {
    position: relative;
}

.ss-file-input__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.ss-file-input__display {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-3);
    background-color: var(--ss-color-input-bg);
    border: 1px dashed var(--ss-color-border);
    border-radius: var(--ss-radius-lg);
    transition: var(--ss-transition-fast);
}

.ss-file-input:hover .ss-file-input__display {
    border-color: var(--ss-color-primary);
    background-color: var(--ss-color-primary-light);
}

.ss-file-input__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-space-10);
    height: var(--ss-space-10);
    background-color: var(--ss-color-primary-light);
    color: var(--ss-color-primary);
    border-radius: var(--ss-radius-lg);
}

.ss-file-input__text {
    flex: 1;
}

.ss-file-input__title {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
}

.ss-file-input__hint {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-muted);
    margin-top: var(--ss-space-0-5);
}

/* Drag active */
.ss-file-input.is-drag-active .ss-file-input__display {
    border-color: var(--ss-color-primary);
    background-color: var(--ss-color-primary-light);
    border-style: solid;
}


/* ============================================
   11. FORM FEEDBACK
   ============================================ */

.ss-form-hint {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-muted);
    margin-top: var(--ss-space-1);
}

.ss-form-error {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-error);
    margin-top: var(--ss-space-1);
    display: flex;
    align-items: center;
    gap: var(--ss-space-1);
}

.ss-form-error svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.ss-form-success {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-success);
    margin-top: var(--ss-space-1);
    display: flex;
    align-items: center;
    gap: var(--ss-space-1);
}


/* ============================================
   12. FORM FIELD COUNTER
   ============================================ */

.ss-field-counter {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-muted);
    text-align: end;
    margin-top: var(--ss-space-1);
}

.ss-field-counter.is-warning {
    color: var(--ss-color-warning);
}

.ss-field-counter.is-error {
    color: var(--ss-color-error);
}
/**
 * Super Shop - Card & Surface Components
 * 
 * Cards, panels, and elevated surfaces
 * 
 * @package SuperShop
 */

/* ============================================
   1. BASE CARD
   ============================================ */

.ss-card {
    background-color: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border-light);
    border-radius: var(--ss-radius-xl);
    overflow: hidden;
}

/* Card with shadow */
.ss-card--elevated {
    border-color: transparent;
    box-shadow: var(--ss-shadow-sm);
}

.ss-card--elevated:hover {
    box-shadow: var(--ss-shadow-md);
}

/* Clickable card */
.ss-card--clickable {
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-card--clickable:hover {
    border-color: var(--ss-color-border);
    box-shadow: var(--ss-shadow-md);
}

.ss-card--clickable:active {
    transform: scale(0.99);
}

/* Hover card (for links) */
.ss-card--hover {
    cursor: pointer;
    text-decoration: none;
    display: block;
    transition: all var(--ss-duration-150);
}

.ss-card--hover:hover {
    border-color: var(--ss-color-primary);
    transform: translateY(-2px);
    box-shadow: var(--ss-shadow-md);
}

.ss-card--hover .ss-card__title {
    color: var(--ss-color-text);
    transition: color var(--ss-duration-150);
}

.ss-card--hover:hover .ss-card__title {
    color: var(--ss-color-primary);
}

/* Selected card */
.ss-card.is-selected {
    border-color: var(--ss-color-primary);
    box-shadow: 0 0 0 1px var(--ss-color-primary);
}


/* ============================================
   2. CARD SECTIONS
   ============================================ */

.ss-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-space-4);
    padding: var(--ss-space-4) var(--ss-space-5);
    border-bottom: 1px solid var(--ss-color-border-light);
}

.ss-card__header-content {
    flex: 1;
    min-width: 0;
}

.ss-card__title {
    font-size: var(--ss-text-base);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    margin: 0;
}

.ss-card__subtitle {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    margin-top: var(--ss-space-0-5);
}

.ss-card__actions {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
    flex-shrink: 0;
}

.ss-card__body {
    padding: var(--ss-space-5);
}

.ss-card__body--flush {
    padding: 0;
}

.ss-card__body--sm {
    padding: var(--ss-space-4);
}

.ss-card__body--lg {
    padding: var(--ss-space-6);
}

.ss-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-space-4);
    padding: var(--ss-space-4) var(--ss-space-5);
    border-top: 1px solid var(--ss-color-border-light);
    background-color: var(--ss-color-bg-secondary);
}

.ss-card__footer--center {
    justify-content: center;
}

.ss-card__footer--end {
    justify-content: flex-end;
}


/* ============================================
   3. CARD MEDIA
   ============================================ */

.ss-card__media {
    position: relative;
    overflow: hidden;
}

.ss-card__media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.ss-card__media--ratio-1 {
    aspect-ratio: 1 / 1;
}

.ss-card__media--ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.ss-card__media--ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.ss-card__media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.6), transparent);
    display: flex;
    align-items: flex-end;
    padding: var(--ss-space-4);
}

.ss-card__media-overlay--full {
    background: rgb(0 0 0 / 0.4);
    align-items: center;
    justify-content: center;
}


/* ============================================
   4. CARD VARIANTS
   ============================================ */

/* Compact card */
.ss-card--compact .ss-card__header {
    padding: var(--ss-space-3) var(--ss-space-4);
}

.ss-card--compact .ss-card__body {
    padding: var(--ss-space-4);
}

.ss-card--compact .ss-card__footer {
    padding: var(--ss-space-3) var(--ss-space-4);
}

/* Bordered card (no shadow) */
.ss-card--bordered {
    border: 1px solid var(--ss-color-border);
    box-shadow: none;
}

/* Flat card (no border, no shadow) */
.ss-card--flat {
    border: none;
    box-shadow: none;
    background-color: var(--ss-color-bg-secondary);
}

/* Ghost card (transparent until hover) */
.ss-card--ghost {
    background-color: transparent;
    border-color: transparent;
}

.ss-card--ghost:hover {
    background-color: var(--ss-color-surface);
    border-color: var(--ss-color-border-light);
}


/* ============================================
   5. STAT CARD
   ============================================ */

.ss-stat-card {
    padding: var(--ss-space-5);
}

.ss-stat-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ss-space-3);
    margin-bottom: var(--ss-space-3);
}

.ss-stat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-space-10);
    height: var(--ss-space-10);
    border-radius: var(--ss-radius-lg);
    flex-shrink: 0;
}

.ss-stat-card__icon--primary {
    background-color: var(--ss-color-primary-light);
    color: var(--ss-color-primary);
}

.ss-stat-card__icon--success {
    background-color: var(--ss-color-success-light);
    color: var(--ss-color-success);
}

.ss-stat-card__icon--warning {
    background-color: var(--ss-color-warning-light);
    color: var(--ss-color-warning);
}

.ss-stat-card__icon--error {
    background-color: var(--ss-color-error-light);
    color: var(--ss-color-error);
}

.ss-stat-card__icon--info {
    background-color: var(--ss-color-info-light);
    color: var(--ss-color-info);
}

.ss-stat-card__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ss-stat-card__label {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
}

.ss-stat-card__value {
    font-size: var(--ss-text-2xl);
    font-weight: var(--ss-font-bold);
    color: var(--ss-color-text);
    line-height: var(--ss-leading-tight);
}

.ss-stat-card__change {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-1);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    margin-top: var(--ss-space-2);
}

.ss-stat-card__change--up {
    color: var(--ss-color-success);
}

.ss-stat-card__change--down {
    color: var(--ss-color-error);
}

.ss-stat-card__change svg {
    width: 1rem;
    height: 1rem;
}

.ss-stat-card__footer {
    margin-top: var(--ss-space-3);
    padding-top: var(--ss-space-3);
    border-top: 1px solid var(--ss-color-border-light);
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-muted);
}


/* ============================================
   6. LIST CARD
   ============================================ */

.ss-list-card {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ss-list-card__item {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-3) var(--ss-space-4);
    border-bottom: 1px solid var(--ss-color-border-light);
    transition: var(--ss-transition-fast);
}

.ss-list-card__item:last-child {
    border-bottom: none;
}

.ss-list-card__item--clickable {
    cursor: pointer;
}

.ss-list-card__item--clickable:hover {
    background-color: var(--ss-color-surface-hover);
}

.ss-list-card__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-space-10);
    height: var(--ss-space-10);
    background-color: var(--ss-color-bg-secondary);
    border-radius: var(--ss-radius-lg);
    flex-shrink: 0;
}

.ss-list-card__item-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ss-color-text-secondary);
}

.ss-list-card__item-content {
    flex: 1;
    min-width: 0;
}

.ss-list-card__item-title {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
}

.ss-list-card__item-subtitle {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-muted);
    margin-top: var(--ss-space-0-5);
}

.ss-list-card__item-meta {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    text-align: end;
    flex-shrink: 0;
}


/* ============================================
   7. EMPTY STATE
   ============================================ */

.ss-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--ss-space-10) var(--ss-space-6);
}

.ss-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background-color: var(--ss-color-bg-secondary);
    color: var(--ss-color-text-muted);
    border-radius: var(--ss-radius-full);
    margin-bottom: var(--ss-space-4);
}

.ss-empty__icon svg {
    width: 2rem;
    height: 2rem;
}

.ss-empty__title {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    margin-bottom: var(--ss-space-2);
}

.ss-empty__description {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    max-width: 24rem;
    margin-bottom: var(--ss-space-6);
}

.ss-empty__action {
    display: flex;
    gap: var(--ss-space-3);
}


/* ============================================
   8. PANEL
   ============================================ */

.ss-panel {
    background-color: var(--ss-color-surface);
    border-radius: var(--ss-radius-xl);
}

.ss-panel--bordered {
    border: 1px solid var(--ss-color-border);
}

.ss-panel--padded {
    padding: var(--ss-space-6);
}

.ss-panel__section {
    padding: var(--ss-space-5);
}

.ss-panel__section + .ss-panel__section {
    border-top: 1px solid var(--ss-color-border-light);
}

.ss-panel__section-title {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    margin-bottom: var(--ss-space-4);
}


/* ============================================
   9. DIVIDER
   ============================================ */

.ss-divider {
    border: none;
    border-top: 1px solid var(--ss-color-border-light);
    margin: var(--ss-space-4) 0;
}

.ss-divider--dark {
    border-color: var(--ss-color-border);
}

.ss-divider--with-text {
    display: flex;
    align-items: center;
    gap: var(--ss-space-4);
    border: none;
    margin: var(--ss-space-6) 0;
}

.ss-divider--with-text::before,
.ss-divider--with-text::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--ss-color-border-light);
}

.ss-divider__text {
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ss-tracking-wider);
}
/**
 * Super Shop - Table Components
 * 
 * Data tables, lists, and data display
 * 
 * @package SuperShop
 */

/* ============================================
   1. BASE TABLE
   ============================================ */

.ss-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ss-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
    font-size: var(--ss-text-sm);
}

.ss-table th {
    padding: var(--ss-space-3) var(--ss-space-4);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    text-align: inherit;
    background-color: var(--ss-color-bg-secondary);
    border-bottom: 1px solid var(--ss-color-border);
    white-space: nowrap;
}

.ss-table td {
    padding: var(--ss-space-3) var(--ss-space-4);
    color: var(--ss-color-text);
    border-bottom: 1px solid var(--ss-color-border-light);
    vertical-align: middle;
}

.ss-table tbody tr:last-child td {
    border-bottom: none;
}

/* Hover row */
.ss-table--hover tbody tr:hover {
    background-color: var(--ss-color-surface-hover);
}

/* Striped rows */
.ss-table--striped tbody tr:nth-child(even) {
    background-color: var(--ss-color-bg-secondary);
}

/* Bordered table */
.ss-table--bordered {
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-lg);
}

.ss-table--bordered th,
.ss-table--bordered td {
    border: 1px solid var(--ss-color-border-light);
}

/* Compact table */
.ss-table--compact th,
.ss-table--compact td {
    padding: var(--ss-space-2) var(--ss-space-3);
}


/* ============================================
   2. TABLE CELL VARIANTS
   ============================================ */

/* Checkbox cell */
.ss-table__checkbox {
    width: 3rem;
    text-align: center;
}

/* Actions cell */
.ss-table__actions {
    width: 1%;
    white-space: nowrap;
    text-align: end;
}

.ss-table__actions .ss-btn {
    opacity: 0;
    transition: opacity var(--ss-duration-150);
}

.ss-table tbody tr:hover .ss-table__actions .ss-btn {
    opacity: 1;
}

/* Image cell */
.ss-table__image {
    width: 4rem;
    padding: var(--ss-space-2);
}

.ss-table__image img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ss-radius-md);
    object-fit: cover;
}

/* Numeric cell */
.ss-table__numeric {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* Truncate cell */
.ss-table__truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================
   3. SORTABLE TABLE HEADERS
   ============================================ */

.ss-table__sortable {
    cursor: pointer;
    user-select: none;
    transition: var(--ss-transition-fast);
}

.ss-table__sortable:hover {
    color: var(--ss-color-primary);
}

.ss-table__sort-icon {
    display: inline-flex;
    margin-inline-start: var(--ss-space-1);
    vertical-align: middle;
    opacity: 0.3;
}

.ss-table__sortable:hover .ss-table__sort-icon {
    opacity: 0.6;
}

.ss-table__sortable.is-sorted .ss-table__sort-icon {
    opacity: 1;
    color: var(--ss-color-primary);
}

.ss-table__sortable.is-sorted-desc .ss-table__sort-icon {
    transform: rotate(180deg);
}


/* ============================================
   4. SELECTABLE ROWS
   ============================================ */

.ss-table tbody tr.is-selected {
    background-color: var(--ss-color-primary-light);
}

.ss-table tbody tr.is-selected:hover {
    background-color: var(--ss-color-primary-lighter);
}


/* ============================================
   5. EXPANDABLE ROWS
   ============================================ */

.ss-table__expand-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-space-6);
    height: var(--ss-space-6);
    background: transparent;
    border: none;
    border-radius: var(--ss-radius-md);
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-table__expand-trigger:hover {
    background-color: var(--ss-color-surface-hover);
}

.ss-table__expand-trigger svg {
    width: 1rem;
    height: 1rem;
    color: var(--ss-color-text-muted);
    transition: transform var(--ss-duration-200);
}

.ss-table__expand-trigger.is-expanded svg {
    transform: rotate(90deg);
}

.ss-table__expanded-row {
    display: none;
}

.ss-table__expanded-row.is-visible {
    display: table-row;
}

.ss-table__expanded-content {
    padding: var(--ss-space-4);
    background-color: var(--ss-color-bg-secondary);
}


/* ============================================
   6. TABLE LOADING STATE
   ============================================ */

.ss-table--loading {
    position: relative;
}

.ss-table--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--ss-color-overlay);
    opacity: 0.5;
}

.ss-table__skeleton td {
    height: 3rem;
}

.ss-table__skeleton-cell {
    height: 1rem;
    background: linear-gradient(
        90deg,
        var(--ss-color-bg-tertiary) 25%,
        var(--ss-color-bg-secondary) 50%,
        var(--ss-color-bg-tertiary) 75%
    );
    background-size: 200% 100%;
    border-radius: var(--ss-radius-sm);
    animation: ss-skeleton 1.5s ease-in-out infinite;
}

@keyframes ss-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ============================================
   7. TABLE PAGINATION
   ============================================ */

.ss-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-space-4);
    padding: var(--ss-space-4);
    border-top: 1px solid var(--ss-color-border-light);
    background-color: var(--ss-color-bg-secondary);
}

.ss-table-pagination__info {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
}

.ss-table-pagination__controls {
    display: flex;
    align-items: center;
    gap: var(--ss-space-1);
}

.ss-table-pagination__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ss-space-8);
    height: var(--ss-space-8);
    padding: 0 var(--ss-space-2);
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ss-radius-md);
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-table-pagination__btn:hover:not(:disabled) {
    color: var(--ss-color-text);
    background-color: var(--ss-color-surface-hover);
}

.ss-table-pagination__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ss-table-pagination__btn.is-active {
    color: var(--ss-color-primary);
    background-color: var(--ss-color-primary-light);
    border-color: var(--ss-color-primary);
    font-weight: var(--ss-font-medium);
}

.ss-table-pagination__btn svg {
    width: 1rem;
    height: 1rem;
}

.ss-table-pagination__ellipsis {
    padding: 0 var(--ss-space-1);
    color: var(--ss-color-text-muted);
}


/* ============================================
   8. TABLE FILTERS
   ============================================ */

.ss-table-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-4);
    border-bottom: 1px solid var(--ss-color-border-light);
}

.ss-table-filters__search {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}

.ss-table-filters__actions {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
    margin-inline-start: auto;
}


/* ============================================
   9. TABLE BULK ACTIONS BAR
   ============================================ */

.ss-table-bulk {
    display: flex;
    align-items: center;
    gap: var(--ss-space-4);
    padding: var(--ss-space-3) var(--ss-space-4);
    background-color: var(--ss-color-primary-light);
    border-bottom: 1px solid var(--ss-color-primary);
    animation: ss-slide-down 0.2s var(--ss-ease-out);
}

@keyframes ss-slide-down {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ss-table-bulk__count {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-primary);
}

.ss-table-bulk__actions {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
}

.ss-table-bulk__clear {
    margin-inline-start: auto;
}


/* ============================================
   10. RESPONSIVE TABLE
   ============================================ */

@media (max-width: 767px) {
    .ss-table--responsive {
        display: block;
    }
    
    .ss-table--responsive thead {
        display: none;
    }
    
    .ss-table--responsive tbody {
        display: block;
    }
    
    .ss-table--responsive tr {
        display: block;
        padding: var(--ss-space-4);
        border-bottom: 1px solid var(--ss-color-border);
    }
    
    .ss-table--responsive td {
        display: flex;
        justify-content: space-between;
        padding: var(--ss-space-2) 0;
        border: none;
    }
    
    .ss-table--responsive td::before {
        content: attr(data-label);
        font-weight: var(--ss-font-medium);
        color: var(--ss-color-text-secondary);
        margin-inline-end: var(--ss-space-4);
    }
    
    .ss-table--responsive td:last-child {
        border-bottom: none;
    }
}
/**
 * Super Shop - Modal, Drawer & Overlay Components
 * 
 * Dialogs, side panels, and overlay surfaces
 * 
 * @package SuperShop
 */

/* ============================================
   1. OVERLAY/BACKDROP
   ============================================ */

.ss-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--ss-color-overlay);
    z-index: var(--ss-z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ss-duration-200) var(--ss-ease-out),
                visibility var(--ss-duration-200) var(--ss-ease-out);
}

.ss-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Blur backdrop variant */
.ss-overlay--blur {
    backdrop-filter: blur(4px);
}


/* ============================================
   2. MODAL
   ============================================ */

.ss-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ss-space-4);
    z-index: var(--ss-z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ss-duration-200) var(--ss-ease-out),
                visibility var(--ss-duration-200) var(--ss-ease-out);
}

.ss-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.ss-modal__container {
    position: relative;
    width: 100%;
    max-width: 32rem;
    max-height: calc(100vh - var(--ss-space-8));
    background-color: var(--ss-color-surface);
    border-radius: var(--ss-radius-2xl);
    box-shadow: var(--ss-shadow-2xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(10px);
    transition: transform var(--ss-duration-200) var(--ss-ease-out);
}

.ss-modal.is-visible .ss-modal__container {
    transform: scale(1) translateY(0);
}

/* Modal sizes */
.ss-modal--sm .ss-modal__container {
    max-width: 24rem;
}

.ss-modal--lg .ss-modal__container {
    max-width: 42rem;
}

.ss-modal--xl .ss-modal__container {
    max-width: 56rem;
}

.ss-modal--full .ss-modal__container {
    max-width: calc(100vw - var(--ss-space-8));
    max-height: calc(100vh - var(--ss-space-8));
}

/* Modal header */
.ss-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-space-4);
    padding: var(--ss-space-5) var(--ss-space-6);
    border-bottom: 1px solid var(--ss-color-border-light);
    flex-shrink: 0;
}

.ss-modal__title {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    margin: 0;
}

.ss-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-space-8);
    height: var(--ss-space-8);
    margin-inline-end: calc(var(--ss-space-2) * -1);
    color: var(--ss-color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--ss-radius-md);
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-modal__close:hover {
    color: var(--ss-color-text);
    background-color: var(--ss-color-surface-hover);
}

.ss-modal__close svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Modal body */
.ss-modal__body {
    flex: 1;
    padding: var(--ss-space-6);
    overflow-y: auto;
}

.ss-modal__body--flush {
    padding: 0;
}

/* Modal footer */
.ss-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ss-space-3);
    padding: var(--ss-space-4) var(--ss-space-6);
    border-top: 1px solid var(--ss-color-border-light);
    background-color: var(--ss-color-bg-secondary);
    flex-shrink: 0;
}

.ss-modal__footer--between {
    justify-content: space-between;
}

.ss-modal__footer--start {
    justify-content: flex-start;
}

.ss-modal__footer--center {
    justify-content: center;
}


/* ============================================
   3. DRAWER
   ============================================ */

.ss-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--ss-z-drawer);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--ss-duration-200) var(--ss-ease-out),
                visibility var(--ss-duration-200) var(--ss-ease-out);
}

.ss-drawer.is-visible,
.ss-drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ss-drawer__backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--ss-color-overlay);
    cursor: pointer;
}

.ss-drawer__container {
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: var(--ss-color-surface);
    box-shadow: var(--ss-shadow-2xl);
    transition: transform var(--ss-duration-300) var(--ss-ease-out);
}

/* Drawer from right (default) */
.ss-drawer--end .ss-drawer__container {
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 100%;
    max-width: 28rem;
    transform: translateX(100%);
}

[dir="rtl"] .ss-drawer--end .ss-drawer__container {
    transform: translateX(-100%);
}

.ss-drawer--end.is-visible .ss-drawer__container {
    transform: translateX(0);
}

/* Drawer from left */
.ss-drawer--start .ss-drawer__container {
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 100%;
    max-width: 28rem;
    transform: translateX(-100%);
}

[dir="rtl"] .ss-drawer--start .ss-drawer__container {
    transform: translateX(100%);
}

.ss-drawer--start.is-visible .ss-drawer__container {
    transform: translateX(0);
}

/* Drawer from bottom */
.ss-drawer--bottom .ss-drawer__container {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 90vh;
    border-radius: var(--ss-radius-2xl) var(--ss-radius-2xl) 0 0;
    transform: translateY(100%);
}

.ss-drawer--bottom.is-visible .ss-drawer__container {
    transform: translateY(0);
}

/* Drawer from top */
.ss-drawer--top .ss-drawer__container {
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    max-height: 90vh;
    border-radius: 0 0 var(--ss-radius-2xl) var(--ss-radius-2xl);
    transform: translateY(-100%);
}

.ss-drawer--top.is-visible .ss-drawer__container {
    transform: translateY(0);
}

/* Drawer sizes */
.ss-drawer--sm .ss-drawer__container {
    max-width: 20rem;
}

.ss-drawer--lg .ss-drawer__container {
    max-width: 36rem;
}

.ss-drawer--xl .ss-drawer__container {
    max-width: 48rem;
}

.ss-drawer--full .ss-drawer__container {
    max-width: 100%;
}

/* Drawer header */
.ss-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-space-4);
    padding: var(--ss-space-4) var(--ss-space-5);
    border-bottom: 1px solid var(--ss-color-border-light);
    flex-shrink: 0;
}

.ss-drawer__title {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    margin: 0;
}

.ss-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-space-8);
    height: var(--ss-space-8);
    color: var(--ss-color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--ss-radius-md);
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-drawer__close:hover {
    color: var(--ss-color-text);
    background-color: var(--ss-color-surface-hover);
}

.ss-drawer__close svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Drawer body */
.ss-drawer__body {
    flex: 1;
    padding: var(--ss-space-5);
    overflow-y: auto;
}

.ss-drawer__body--flush {
    padding: 0;
}

/* Drawer footer */
.ss-drawer__footer {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-4) var(--ss-space-5);
    border-top: 1px solid var(--ss-color-border-light);
    background-color: var(--ss-color-bg-secondary);
    flex-shrink: 0;
}


/* ============================================
   4. ALERT DIALOG
   ============================================ */

.ss-alert-dialog .ss-modal__container {
    max-width: 28rem;
}

.ss-alert-dialog__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--ss-space-4);
    border-radius: var(--ss-radius-full);
}

.ss-alert-dialog__icon--warning {
    background-color: var(--ss-color-warning-light);
    color: var(--ss-color-warning);
}

.ss-alert-dialog__icon--danger {
    background-color: var(--ss-color-error-light);
    color: var(--ss-color-error);
}

.ss-alert-dialog__icon--success {
    background-color: var(--ss-color-success-light);
    color: var(--ss-color-success);
}

.ss-alert-dialog__icon--info {
    background-color: var(--ss-color-info-light);
    color: var(--ss-color-info);
}

.ss-alert-dialog__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.ss-alert-dialog__content {
    text-align: center;
}

.ss-alert-dialog__title {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    margin-bottom: var(--ss-space-2);
}

.ss-alert-dialog__message {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    line-height: var(--ss-leading-relaxed);
}

.ss-alert-dialog .ss-modal__footer {
    justify-content: center;
}


/* ============================================
   5. TOAST / NOTIFICATION
   ============================================ */

.ss-toast-container {
    position: fixed;
    bottom: var(--ss-space-6);
    inset-inline-end: var(--ss-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-3);
    z-index: var(--ss-z-toast);
    pointer-events: none;
}

/* Top position */
.ss-toast-container--top {
    bottom: auto;
    top: var(--ss-space-6);
}

/* Center position */
.ss-toast-container--center {
    inset-inline-end: 50%;
    transform: translateX(50%);
}

[dir="rtl"] .ss-toast-container--center {
    transform: translateX(-50%);
}

.ss-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--ss-space-3);
    min-width: 300px;
    max-width: 420px;
    padding: var(--ss-space-4);
    background-color: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border-light);
    border-radius: var(--ss-radius-xl);
    box-shadow: var(--ss-shadow-lg);
    pointer-events: auto;
    animation: ss-toast-in 0.3s var(--ss-ease-out) forwards;
}

.ss-toast.is-leaving {
    animation: ss-toast-out 0.2s var(--ss-ease-in) forwards;
}

@keyframes ss-toast-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ss-toast-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

[dir="rtl"] .ss-toast {
    animation-name: ss-toast-in-rtl;
}

[dir="rtl"] .ss-toast.is-leaving {
    animation-name: ss-toast-out-rtl;
}

@keyframes ss-toast-in-rtl {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ss-toast-out-rtl {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

.ss-toast__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 1px;
}

.ss-toast__content {
    flex: 1;
    min-width: 0;
}

.ss-toast__title {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
}

.ss-toast__message {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    margin-top: var(--ss-space-0-5);
}

.ss-toast__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-space-6);
    height: var(--ss-space-6);
    margin: calc(var(--ss-space-1) * -1);
    color: var(--ss-color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--ss-radius-md);
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-toast__close:hover {
    color: var(--ss-color-text);
    background-color: var(--ss-color-surface-hover);
}

.ss-toast__close svg {
    width: 1rem;
    height: 1rem;
}

/* Toast variants */
.ss-toast--success {
    border-color: var(--ss-success-200);
    background-color: var(--ss-success-50);
}

.ss-toast--success .ss-toast__icon {
    color: var(--ss-color-success);
}

[data-theme="dark"] .ss-toast--success {
    background-color: var(--ss-color-success-light);
    border-color: transparent;
}

.ss-toast--error {
    border-color: var(--ss-error-200);
    background-color: var(--ss-error-50);
}

.ss-toast--error .ss-toast__icon {
    color: var(--ss-color-error);
}

[data-theme="dark"] .ss-toast--error {
    background-color: var(--ss-color-error-light);
    border-color: transparent;
}

.ss-toast--warning {
    border-color: var(--ss-warning-200);
    background-color: var(--ss-warning-50);
}

.ss-toast--warning .ss-toast__icon {
    color: var(--ss-color-warning);
}

[data-theme="dark"] .ss-toast--warning {
    background-color: var(--ss-color-warning-light);
    border-color: transparent;
}

.ss-toast--info {
    border-color: var(--ss-info-200);
    background-color: var(--ss-info-50);
}

.ss-toast--info .ss-toast__icon {
    color: var(--ss-color-info);
}

[data-theme="dark"] .ss-toast--info {
    background-color: var(--ss-color-info-light);
    border-color: transparent;
}

/* Toast progress bar */
.ss-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--ss-color-border-light);
    border-radius: 0 0 var(--ss-radius-xl) var(--ss-radius-xl);
    overflow: hidden;
}

.ss-toast__progress-bar {
    height: 100%;
    background-color: var(--ss-color-primary);
    animation: ss-toast-progress linear forwards;
}

@keyframes ss-toast-progress {
    from { width: 100%; }
    to { width: 0%; }
}


/* ============================================
   6. POPOVER
   ============================================ */

.ss-popover {
    position: absolute;
    z-index: var(--ss-z-popover);
    min-width: 12rem;
    max-width: 20rem;
    padding: var(--ss-space-3);
    background-color: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border-light);
    border-radius: var(--ss-radius-xl);
    box-shadow: var(--ss-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: opacity var(--ss-duration-150) var(--ss-ease-out),
                visibility var(--ss-duration-150) var(--ss-ease-out),
                transform var(--ss-duration-150) var(--ss-ease-out);
}

.ss-popover.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.ss-popover__arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border-light);
    transform: rotate(45deg);
}

/* Arrow positions */
.ss-popover--top .ss-popover__arrow {
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    border-top: none;
    border-left: none;
}

.ss-popover--bottom .ss-popover__arrow {
    top: -5px;
    left: 50%;
    margin-left: -5px;
    border-bottom: none;
    border-right: none;
}


/* ============================================
   7. TOOLTIP
   ============================================ */

.ss-tooltip {
    position: absolute;
    z-index: var(--ss-z-tooltip);
    max-width: 200px;
    padding: var(--ss-space-1-5) var(--ss-space-2-5);
    background-color: var(--ss-secondary-800);
    color: white;
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-medium);
    line-height: var(--ss-leading-snug);
    text-align: center;
    border-radius: var(--ss-radius-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--ss-duration-150) var(--ss-ease-out);
}

.ss-tooltip.is-visible {
    opacity: 1;
}

[data-theme="dark"] .ss-tooltip {
    background-color: var(--ss-secondary-200);
    color: var(--ss-secondary-900);
}
/**
 * Super Shop - Badge & Tag Components
 * 
 * Status indicators, labels, and tags
 * 
 * @package SuperShop
 */

/* ============================================
   1. BADGE
   ============================================ */

.ss-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-1);
    padding: var(--ss-space-0-5) var(--ss-space-2);
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-medium);
    line-height: var(--ss-leading-normal);
    border-radius: var(--ss-radius-full);
    white-space: nowrap;
}

/* Badge variants */
.ss-badge--default {
    background-color: var(--ss-color-bg-tertiary);
    color: var(--ss-color-text-secondary);
}

.ss-badge--primary {
    background-color: var(--ss-color-primary-light);
    color: var(--ss-color-primary);
}

.ss-badge--success {
    background-color: var(--ss-color-success-light);
    color: var(--ss-color-success);
}

.ss-badge--warning {
    background-color: var(--ss-color-warning-light);
    color: var(--ss-color-warning);
}

.ss-badge--error {
    background-color: var(--ss-color-error-light);
    color: var(--ss-color-error);
}

.ss-badge--info {
    background-color: var(--ss-color-info-light);
    color: var(--ss-color-info);
}

/* Solid badges */
.ss-badge--solid.ss-badge--primary {
    background-color: var(--ss-color-primary);
    color: white;
}

.ss-badge--solid.ss-badge--success {
    background-color: var(--ss-color-success);
    color: white;
}

.ss-badge--solid.ss-badge--warning {
    background-color: var(--ss-color-warning);
    color: white;
}

.ss-badge--solid.ss-badge--error {
    background-color: var(--ss-color-error);
    color: white;
}

.ss-badge--solid.ss-badge--info {
    background-color: var(--ss-color-info);
    color: white;
}

/* Outlined badges */
.ss-badge--outlined {
    background-color: transparent;
    border: 1px solid currentColor;
}

/* Badge sizes */
.ss-badge--sm {
    padding: var(--ss-space-0-5) var(--ss-space-1-5);
    font-size: 0.65rem;
}

.ss-badge--lg {
    padding: var(--ss-space-1) var(--ss-space-3);
    font-size: var(--ss-text-sm);
}

/* Badge with dot indicator */
.ss-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--ss-radius-full);
    background-color: currentColor;
}

/* Badge with icon */
.ss-badge svg {
    width: 0.75rem;
    height: 0.75rem;
}


/* ============================================
   2. STATUS BADGE (For Orders, etc.)
   ============================================ */

.ss-status {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-1-5);
    padding: var(--ss-space-1) var(--ss-space-2-5);
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-medium);
    border-radius: var(--ss-radius-full);
}

.ss-status__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--ss-radius-full);
    flex-shrink: 0;
}

/* Order status variants */
.ss-status--pending {
    background-color: var(--ss-secondary-100);
    color: var(--ss-secondary-700);
}

.ss-status--pending .ss-status__dot {
    background-color: var(--ss-secondary-500);
}

[data-theme="dark"] .ss-status--pending {
    background-color: rgb(100 116 139 / 0.2);
    color: var(--ss-secondary-300);
}

.ss-status--processing {
    background-color: var(--ss-info-50);
    color: var(--ss-info-700);
}

.ss-status--processing .ss-status__dot {
    background-color: var(--ss-info-500);
    animation: ss-pulse 2s infinite;
}

[data-theme="dark"] .ss-status--processing {
    background-color: var(--ss-color-info-light);
    color: var(--ss-info-300);
}

.ss-status--shipped,
.ss-status--on-hold {
    background-color: var(--ss-warning-50);
    color: var(--ss-warning-700);
}

.ss-status--shipped .ss-status__dot,
.ss-status--on-hold .ss-status__dot {
    background-color: var(--ss-warning-500);
}

[data-theme="dark"] .ss-status--shipped,
[data-theme="dark"] .ss-status--on-hold {
    background-color: var(--ss-color-warning-light);
    color: var(--ss-warning-300);
}

.ss-status--delivered,
.ss-status--completed {
    background-color: var(--ss-success-50);
    color: var(--ss-success-700);
}

.ss-status--delivered .ss-status__dot,
.ss-status--completed .ss-status__dot {
    background-color: var(--ss-success-500);
}

[data-theme="dark"] .ss-status--delivered,
[data-theme="dark"] .ss-status--completed {
    background-color: var(--ss-color-success-light);
    color: var(--ss-success-300);
}

.ss-status--cancelled,
.ss-status--refunded,
.ss-status--failed {
    background-color: var(--ss-error-50);
    color: var(--ss-error-700);
}

.ss-status--cancelled .ss-status__dot,
.ss-status--refunded .ss-status__dot,
.ss-status--failed .ss-status__dot {
    background-color: var(--ss-error-500);
}

[data-theme="dark"] .ss-status--cancelled,
[data-theme="dark"] .ss-status--refunded,
[data-theme="dark"] .ss-status--failed {
    background-color: var(--ss-color-error-light);
    color: var(--ss-error-300);
}

@keyframes ss-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}


/* ============================================
   3. TAG
   ============================================ */

.ss-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-1);
    padding: var(--ss-space-1) var(--ss-space-2);
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
    background-color: var(--ss-color-bg-tertiary);
    border-radius: var(--ss-radius-md);
    transition: var(--ss-transition-fast);
}

.ss-tag--clickable {
    cursor: pointer;
}

.ss-tag--clickable:hover {
    background-color: var(--ss-color-border);
}

/* Removable tag */
.ss-tag__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-inline-start: var(--ss-space-0-5);
    margin-inline-end: calc(var(--ss-space-1) * -1);
    color: var(--ss-color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--ss-radius-full);
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-tag__remove:hover {
    color: var(--ss-color-text);
    background-color: var(--ss-color-surface-hover);
}

.ss-tag__remove svg {
    width: 0.75rem;
    height: 0.75rem;
}

/* Tag colors */
.ss-tag--primary {
    background-color: var(--ss-color-primary-light);
    color: var(--ss-color-primary);
}

.ss-tag--primary.ss-tag--clickable:hover {
    background-color: var(--ss-color-primary-lighter);
}

/* Tag group */
.ss-tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-2);
}


/* ============================================
   4. LABEL
   ============================================ */

.ss-label-tag {
    display: inline-block;
    padding: var(--ss-space-0-5) var(--ss-space-1-5);
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ss-tracking-wide);
    border-radius: var(--ss-radius-sm);
}

.ss-label-tag--new {
    background-color: var(--ss-primary-500);
    color: white;
}

.ss-label-tag--sale {
    background-color: var(--ss-error-500);
    color: white;
}

.ss-label-tag--featured {
    background-color: var(--ss-warning-500);
    color: white;
}

.ss-label-tag--out-of-stock {
    background-color: var(--ss-secondary-500);
    color: white;
}


/* ============================================
   5. COUNTER BADGE
   ============================================ */

.ss-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--ss-space-1);
    font-size: 0.65rem;
    font-weight: var(--ss-font-bold);
    color: white;
    background-color: var(--ss-color-primary);
    border-radius: var(--ss-radius-full);
}

.ss-counter--error {
    background-color: var(--ss-color-error);
}

.ss-counter--sm {
    min-width: 1rem;
    height: 1rem;
    font-size: 0.6rem;
}

/* Dot only (no number) */
.ss-counter--dot {
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
}


/* ============================================
   6. AVATAR BADGE (Status indicator)
   ============================================ */

.ss-avatar-badge {
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    width: 12px;
    height: 12px;
    background-color: var(--ss-color-success);
    border: 2px solid var(--ss-color-surface);
    border-radius: var(--ss-radius-full);
}

.ss-avatar-badge--offline {
    background-color: var(--ss-secondary-400);
}

.ss-avatar-badge--busy {
    background-color: var(--ss-color-error);
}

.ss-avatar-badge--away {
    background-color: var(--ss-color-warning);
}


/* ============================================
   7. STOCK STATUS
   ============================================ */

.ss-stock {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-1-5);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
}

.ss-stock__icon {
    width: 1rem;
    height: 1rem;
}

.ss-stock--in-stock {
    color: var(--ss-color-success);
}

.ss-stock--low-stock {
    color: var(--ss-color-warning);
}

.ss-stock--out-of-stock {
    color: var(--ss-color-error);
}

.ss-stock--backorder {
    color: var(--ss-color-info);
}


/* ============================================
   8. RATING
   ============================================ */

.ss-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-0-5);
}

.ss-rating__star {
    width: 1rem;
    height: 1rem;
    color: var(--ss-secondary-300);
}

.ss-rating__star--filled {
    color: var(--ss-warning-400);
}

.ss-rating__star--half {
    position: relative;
}

.ss-rating__star--half::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 50%;
    overflow: hidden;
}

.ss-rating__count {
    margin-inline-start: var(--ss-space-1);
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
}

/* Rating sizes */
.ss-rating--sm .ss-rating__star {
    width: 0.875rem;
    height: 0.875rem;
}

.ss-rating--lg .ss-rating__star {
    width: 1.25rem;
    height: 1.25rem;
}
/**
 * Super Shop - Navigation Components
 * 
 * Sidebar, header, and navigation styles
 * 
 * @package SuperShop
 */

/* ============================================
   1. SIDEBAR
   ============================================ */

.ss-sidebar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: var(--ss-sidebar-width);
    height: 100vh;
    background-color: var(--ss-color-surface, #ffffff);
    border-inline-end: 1px solid var(--ss-color-border-light, #f3f4f6);
    display: flex;
    flex-direction: column;
    z-index: var(--ss-z-fixed);
    transition: transform var(--ss-duration-300) var(--ss-ease-in-out),
                width var(--ss-duration-300) var(--ss-ease-in-out);
}

[data-theme="dark"] .ss-sidebar {
    background-color: var(--ss-color-surface, #1e1e1e);
    border-inline-end-color: var(--ss-color-border-light, #262626);
}

/* Collapsed state */
.ss-sidebar.is-collapsed {
    width: var(--ss-sidebar-collapsed);
}

.ss-sidebar.is-collapsed .ss-sidebar__text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.ss-sidebar.is-collapsed .ss-sidebar__logo-text {
    display: none;
}

/* Mobile hidden */
@media (max-width: 1023px) {
    .ss-sidebar {
        transform: translateX(-100%);
    }
    
    [dir="rtl"] .ss-sidebar {
        transform: translateX(100%);
    }
    
    .ss-sidebar.is-open {
        transform: translateX(0);
    }
}

/* Sidebar header/logo */
.ss-sidebar__header {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-5) var(--ss-space-4);
    border-bottom: 1px solid var(--ss-color-border-light);
    min-height: var(--ss-header-height);
}

.ss-sidebar__logo {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.ss-sidebar__logo-text {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-bold);
    color: var(--ss-color-text);
    transition: opacity var(--ss-duration-200);
}

/* Sidebar content */
.ss-sidebar__content {
    flex: 1;
    overflow-y: auto;
    padding: var(--ss-space-4) 0;
}

/* Sidebar footer */
.ss-sidebar__footer {
    padding: var(--ss-space-4);
    border-top: 1px solid var(--ss-color-border-light);
}


/* ============================================
   2. NAVIGATION MENU
   ============================================ */

.ss-nav {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-1);
    padding: 0 var(--ss-space-3);
}

.ss-nav__section {
    margin-bottom: var(--ss-space-4);
}

.ss-nav__section-title {
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ss-tracking-wider);
    color: var(--ss-color-text-muted);
    padding: var(--ss-space-2) var(--ss-space-3);
    margin-bottom: var(--ss-space-1);
}

.ss-sidebar.is-collapsed .ss-nav__section-title {
    text-align: center;
    padding: var(--ss-space-2) 0;
}

/* Navigation item */
.ss-nav__item {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-2-5) var(--ss-space-3);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text-secondary);
    border-radius: var(--ss-radius-lg);
    text-decoration: none;
    transition: var(--ss-transition-fast);
    cursor: pointer;
}

.ss-nav__item:hover {
    background-color: var(--ss-color-surface-hover);
    color: var(--ss-color-text);
}

.ss-nav__item.is-active {
    background-color: var(--ss-color-primary-light);
    color: var(--ss-color-primary);
}

.ss-nav__item.is-active .ss-nav__icon {
    color: var(--ss-color-primary);
}

/* Navigation icon */
.ss-nav__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--ss-color-text-tertiary);
    transition: color var(--ss-duration-150);
}

.ss-nav__item:hover .ss-nav__icon {
    color: var(--ss-color-text);
}

/* Navigation text */
.ss-nav__text {
    flex: 1;
    white-space: nowrap;
    transition: opacity var(--ss-duration-200), width var(--ss-duration-200);
}

/* Navigation badge */
.ss-nav__badge {
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-semibold);
    padding: var(--ss-space-0-5) var(--ss-space-2);
    background-color: var(--ss-color-error);
    color: white;
    border-radius: var(--ss-radius-full);
    min-width: 1.25rem;
    text-align: center;
}

.ss-sidebar.is-collapsed .ss-nav__badge {
    position: absolute;
    top: var(--ss-space-1);
    inset-inline-end: var(--ss-space-1);
    min-width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    font-size: 0;
}

/* Collapsed state - center icons */
.ss-sidebar.is-collapsed .ss-nav__item {
    justify-content: center;
    padding: var(--ss-space-2-5);
    position: relative;
}


/* ============================================
   3. HEADER
   ============================================ */

.ss-header {
    position: sticky;
    top: 0;
    height: var(--ss-header-height);
    background-color: var(--ss-color-surface, #ffffff);
    border-bottom: 1px solid var(--ss-color-border-light, #f3f4f6);
    display: flex;
    align-items: center;
    padding: 0 var(--ss-space-6);
    gap: var(--ss-space-4);
    z-index: var(--ss-z-sticky);
}

[data-theme="dark"] .ss-header {
    background-color: var(--ss-color-surface, #1e1e1e);
    border-bottom-color: var(--ss-color-border-light, #262626);
}

/* Header with sidebar offset */
.ss-header--with-sidebar {
    margin-inline-start: var(--ss-sidebar-width);
    transition: margin var(--ss-duration-300) var(--ss-ease-in-out);
}

.ss-sidebar.is-collapsed ~ .ss-main .ss-header--with-sidebar,
.ss-sidebar.is-collapsed ~ .ss-header--with-sidebar {
    margin-inline-start: var(--ss-sidebar-collapsed);
}

@media (max-width: 1023px) {
    .ss-header--with-sidebar {
        margin-inline-start: 0;
    }
}

/* Mobile menu toggle */
.ss-header__menu-toggle {
    display: none;
    padding: var(--ss-space-2);
    color: var(--ss-color-text-secondary);
    border-radius: var(--ss-radius-lg);
    transition: var(--ss-transition-fast);
}

.ss-header__menu-toggle:hover {
    background-color: var(--ss-color-surface-hover);
    color: var(--ss-color-text);
}

@media (max-width: 1023px) {
    .ss-header__menu-toggle {
        display: flex;
    }
}

/* Header title */
.ss-header__title {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

/* Header spacer */
.ss-header__spacer {
    flex: 1;
}

/* Header actions */
.ss-header__actions {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
}

/* Header icon button */
.ss-header__icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--ss-color-text-secondary);
    border-radius: var(--ss-radius-lg);
    transition: var(--ss-transition-fast);
}

.ss-header__icon-btn:hover {
    background-color: var(--ss-color-surface-hover);
    color: var(--ss-color-text);
}

.ss-header__icon-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Icon button badge */
.ss-header__icon-btn .ss-badge {
    position: absolute;
    top: var(--ss-space-1);
    inset-inline-end: var(--ss-space-1);
    min-width: 1rem;
    height: 1rem;
    font-size: 0.625rem;
}


/* ============================================
   4. USER MENU
   ============================================ */

.ss-user-menu {
    position: relative;
}

.ss-user-menu__trigger {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-1-5) var(--ss-space-2);
    border-radius: var(--ss-radius-lg);
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-user-menu__trigger:hover {
    background-color: var(--ss-color-surface-hover);
}

.ss-user-menu__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--ss-radius-full);
    object-fit: cover;
    background-color: var(--ss-color-primary-light);
}

.ss-user-menu__info {
    display: none;
}

@media (min-width: 768px) {
    .ss-user-menu__info {
        display: block;
        text-align: start;
    }
}

.ss-user-menu__name {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
    line-height: 1.2;
}

.ss-user-menu__role {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-muted);
}

.ss-user-menu__chevron {
    width: 1rem;
    height: 1rem;
    color: var(--ss-color-text-muted);
    transition: transform var(--ss-duration-200);
}

.ss-user-menu.is-open .ss-user-menu__chevron {
    transform: rotate(180deg);
}


/* ============================================
   5. BREADCRUMBS
   ============================================ */

.ss-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ss-space-1);
    font-size: var(--ss-text-sm);
}

.ss-breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: var(--ss-space-1);
    color: var(--ss-color-text-secondary);
}

.ss-breadcrumbs__link {
    color: var(--ss-color-text-secondary);
    text-decoration: none;
    transition: color var(--ss-duration-150);
}

.ss-breadcrumbs__link:hover {
    color: var(--ss-color-primary);
}

.ss-breadcrumbs__separator {
    color: var(--ss-color-text-muted);
}

.ss-breadcrumbs__item:last-child .ss-breadcrumbs__link {
    color: var(--ss-color-text);
    font-weight: var(--ss-font-medium);
    pointer-events: none;
}


/* ============================================
   6. TABS
   ============================================ */

.ss-tabs {
    display: flex;
    gap: var(--ss-space-1);
    border-bottom: 1px solid var(--ss-color-border);
}

.ss-tabs__item {
    position: relative;
    padding: var(--ss-space-3) var(--ss-space-4);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: var(--ss-transition-fast);
}

.ss-tabs__item:hover {
    color: var(--ss-color-text);
}

.ss-tabs__item.is-active {
    color: var(--ss-color-primary);
    border-bottom-color: var(--ss-color-primary);
}

/* Pills variant */
.ss-tabs--pills {
    border-bottom: none;
    background-color: var(--ss-color-bg-secondary);
    padding: var(--ss-space-1);
    border-radius: var(--ss-radius-lg);
    gap: var(--ss-space-1);
}

.ss-tabs--pills .ss-tabs__item {
    border-bottom: none;
    border-radius: var(--ss-radius-md);
    margin-bottom: 0;
}

.ss-tabs--pills .ss-tabs__item.is-active {
    background-color: var(--ss-color-surface);
    box-shadow: var(--ss-shadow-sm);
}


/* ============================================
   7. PAGINATION
   ============================================ */

.ss-pagination {
    display: flex;
    align-items: center;
    gap: var(--ss-space-1);
}

.ss-pagination__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--ss-space-2);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text-secondary);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--ss-radius-lg);
    text-decoration: none;
    transition: var(--ss-transition-fast);
}

.ss-pagination__item:hover:not(.is-disabled) {
    background-color: var(--ss-color-surface-hover);
    color: var(--ss-color-text);
}

.ss-pagination__item.is-active {
    background-color: var(--ss-color-primary);
    color: white;
}

.ss-pagination__item.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ss-pagination__ellipsis {
    color: var(--ss-color-text-muted);
    padding: 0 var(--ss-space-2);
}

/* Pagination info text */
.ss-pagination__info {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    margin-inline-end: var(--ss-space-4);
}
/**
 * Super Shop - Alerts & Notifications
 * 
 * Alert boxes, toasts, and notification styles
 * 
 * @package SuperShop
 */

/* ============================================
   1. ALERTS
   ============================================ */

.ss-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ss-space-3);
    padding: var(--ss-space-4);
    border-radius: var(--ss-radius-lg);
    border: 1px solid transparent;
}

.ss-alert__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: var(--ss-space-0-5);
}

.ss-alert__content {
    flex: 1;
    min-width: 0;
}

.ss-alert__title {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    margin-bottom: var(--ss-space-1);
}

.ss-alert__message {
    font-size: var(--ss-text-sm);
    line-height: var(--ss-leading-relaxed);
}

.ss-alert__close {
    flex-shrink: 0;
    padding: var(--ss-space-1);
    margin: calc(var(--ss-space-1) * -1);
    color: inherit;
    opacity: 0.7;
    border-radius: var(--ss-radius-md);
    transition: var(--ss-transition-fast);
}

.ss-alert__close:hover {
    opacity: 1;
    background-color: rgb(0 0 0 / 0.1);
}

.ss-alert__close svg {
    width: 1rem;
    height: 1rem;
}

/* Alert variants */
.ss-alert--info {
    background-color: var(--ss-color-info-light);
    border-color: var(--ss-info-200);
    color: var(--ss-info-800);
}

[data-theme="dark"] .ss-alert--info {
    border-color: var(--ss-info-800);
    color: var(--ss-info-200);
}

.ss-alert--success {
    background-color: var(--ss-color-success-light);
    border-color: var(--ss-success-200);
    color: var(--ss-success-800);
}

[data-theme="dark"] .ss-alert--success {
    border-color: var(--ss-success-800);
    color: var(--ss-success-200);
}

.ss-alert--warning {
    background-color: var(--ss-color-warning-light);
    border-color: var(--ss-warning-200);
    color: var(--ss-warning-800);
}

[data-theme="dark"] .ss-alert--warning {
    border-color: var(--ss-warning-800);
    color: var(--ss-warning-200);
}

.ss-alert--error {
    background-color: var(--ss-color-error-light);
    border-color: var(--ss-error-200);
    color: var(--ss-error-800);
}

[data-theme="dark"] .ss-alert--error {
    border-color: var(--ss-error-800);
    color: var(--ss-error-200);
}

/* Compact alert */
.ss-alert--compact {
    padding: var(--ss-space-3);
}

.ss-alert--compact .ss-alert__icon {
    margin-top: 0;
}

/* Alert with actions */
.ss-alert__actions {
    display: flex;
    gap: var(--ss-space-3);
    margin-top: var(--ss-space-3);
}


/* ============================================
   2. TOAST NOTIFICATIONS
   ============================================ */

.ss-toast-container {
    position: fixed;
    z-index: var(--ss-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-3);
    padding: var(--ss-space-4);
    pointer-events: none;
    max-width: 420px;
    width: 100%;
}

/* Position variants */
.ss-toast-container--top-right {
    top: 0;
    inset-inline-end: 0;
}

.ss-toast-container--top-left {
    top: 0;
    inset-inline-start: 0;
}

.ss-toast-container--top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.ss-toast-container--bottom-right {
    bottom: 0;
    inset-inline-end: 0;
}

.ss-toast-container--bottom-left {
    bottom: 0;
    inset-inline-start: 0;
}

.ss-toast-container--bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Toast item */
.ss-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--ss-space-3);
    padding: var(--ss-space-4);
    background-color: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-xl);
    box-shadow: var(--ss-shadow-lg);
    pointer-events: auto;
    animation: ss-toast-in var(--ss-duration-300) var(--ss-ease-out);
}

.ss-toast.is-leaving {
    animation: ss-toast-out var(--ss-duration-200) var(--ss-ease-in) forwards;
}

@keyframes ss-toast-in {
    from {
        opacity: 0;
        transform: translateY(-1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ss-toast-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-1rem);
    }
}

/* Toast from bottom */
.ss-toast-container--bottom-right .ss-toast,
.ss-toast-container--bottom-left .ss-toast,
.ss-toast-container--bottom-center .ss-toast {
    animation-name: ss-toast-in-bottom;
}

.ss-toast-container--bottom-right .ss-toast.is-leaving,
.ss-toast-container--bottom-left .ss-toast.is-leaving,
.ss-toast-container--bottom-center .ss-toast.is-leaving {
    animation-name: ss-toast-out-bottom;
}

@keyframes ss-toast-in-bottom {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ss-toast-out-bottom {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(1rem);
    }
}

/* Toast parts */
.ss-toast__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: var(--ss-space-0-5);
}

.ss-toast__content {
    flex: 1;
    min-width: 0;
}

.ss-toast__title {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    margin-bottom: var(--ss-space-0-5);
}

.ss-toast__message {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    line-height: var(--ss-leading-relaxed);
}

.ss-toast__close {
    flex-shrink: 0;
    padding: var(--ss-space-1);
    margin: calc(var(--ss-space-1) * -1);
    color: var(--ss-color-text-muted);
    border-radius: var(--ss-radius-md);
    transition: var(--ss-transition-fast);
}

.ss-toast__close:hover {
    color: var(--ss-color-text);
    background-color: var(--ss-color-surface-hover);
}

.ss-toast__close svg {
    width: 1rem;
    height: 1rem;
}

/* Toast progress bar */
.ss-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--ss-color-primary);
    border-radius: 0 0 var(--ss-radius-xl) var(--ss-radius-xl);
    transform-origin: left;
    animation: ss-toast-progress linear forwards;
}

@keyframes ss-toast-progress {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

/* Toast variants */
.ss-toast--success .ss-toast__icon {
    color: var(--ss-color-success);
}

.ss-toast--success .ss-toast__progress {
    background-color: var(--ss-color-success);
}

.ss-toast--warning .ss-toast__icon {
    color: var(--ss-color-warning);
}

.ss-toast--warning .ss-toast__progress {
    background-color: var(--ss-color-warning);
}

.ss-toast--error .ss-toast__icon {
    color: var(--ss-color-error);
}

.ss-toast--error .ss-toast__progress {
    background-color: var(--ss-color-error);
}

.ss-toast--info .ss-toast__icon {
    color: var(--ss-color-info);
}

.ss-toast--info .ss-toast__progress {
    background-color: var(--ss-color-info);
}


/* ============================================
   3. INLINE MESSAGES
   ============================================ */

.ss-message {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
    font-size: var(--ss-text-sm);
}

.ss-message__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.ss-message--success {
    color: var(--ss-color-success);
}

.ss-message--error {
    color: var(--ss-color-error);
}

.ss-message--warning {
    color: var(--ss-color-warning);
}

.ss-message--info {
    color: var(--ss-color-info);
}


/* ============================================
   4. EMPTY STATES
   ============================================ */

.ss-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ss-space-12) var(--ss-space-6);
    text-align: center;
}

.ss-empty__icon {
    width: 4rem;
    height: 4rem;
    color: var(--ss-color-text-muted);
    margin-bottom: var(--ss-space-4);
}

.ss-empty__title {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    margin-bottom: var(--ss-space-2);
}

.ss-empty__message {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    max-width: 320px;
    margin-bottom: var(--ss-space-6);
}

.ss-empty__actions {
    display: flex;
    gap: var(--ss-space-3);
}


/* ============================================
   5. BANNERS
   ============================================ */

.ss-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ss-space-4);
    padding: var(--ss-space-3) var(--ss-space-6);
    background-color: var(--ss-color-primary);
    color: white;
}

.ss-banner__message {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
}

.ss-banner__action {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    text-decoration: underline;
    color: inherit;
}

.ss-banner__action:hover {
    opacity: 0.9;
}

.ss-banner__close {
    padding: var(--ss-space-1);
    margin-inline-start: var(--ss-space-2);
    opacity: 0.8;
    border-radius: var(--ss-radius-md);
    transition: var(--ss-transition-fast);
}

.ss-banner__close:hover {
    opacity: 1;
    background-color: rgb(255 255 255 / 0.1);
}

.ss-banner__close svg {
    width: 1rem;
    height: 1rem;
}

/* Banner variants */
.ss-banner--warning {
    background-color: var(--ss-color-warning);
}

.ss-banner--error {
    background-color: var(--ss-color-error);
}

.ss-banner--info {
    background-color: var(--ss-color-info);
}

.ss-banner--success {
    background-color: var(--ss-color-success);
}
/**
 * Super Shop - Dropdowns & Popovers
 * 
 * Dropdown menus, popovers, and tooltips
 * 
 * @package SuperShop
 */

/* ============================================
   1. DROPDOWN BASE
   ============================================ */

.ss-dropdown {
    position: relative;
    display: inline-block;
}

.ss-dropdown__trigger {
    cursor: pointer;
}

.ss-dropdown__menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 200px;
    padding: var(--ss-space-1);
    background-color: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-xl);
    box-shadow: var(--ss-shadow-lg);
    z-index: var(--ss-z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--ss-space-2));
    transition: opacity var(--ss-duration-150),
                transform var(--ss-duration-150),
                visibility var(--ss-duration-150);
}

.ss-dropdown.is-open .ss-dropdown__menu,
.ss-dropdown__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(var(--ss-space-1));
}

/* Position variants */
.ss-dropdown--end .ss-dropdown__menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.ss-dropdown--top .ss-dropdown__menu {
    top: auto;
    bottom: 100%;
    transform: translateY(calc(var(--ss-space-2) * -1));
}

.ss-dropdown--top.is-open .ss-dropdown__menu {
    transform: translateY(calc(var(--ss-space-1) * -1));
}

/* Full width dropdown */
.ss-dropdown--full .ss-dropdown__menu {
    width: 100%;
    min-width: 100%;
}


/* ============================================
   2. DROPDOWN ITEMS
   ============================================ */

.ss-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    width: 100%;
    padding: var(--ss-space-2) var(--ss-space-3);
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text);
    text-align: start;
    text-decoration: none;
    border-radius: var(--ss-radius-lg);
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-dropdown__item:hover {
    background-color: var(--ss-color-surface-hover);
}

.ss-dropdown__item:focus-visible {
    background-color: var(--ss-color-surface-hover);
    outline: none;
}

.ss-dropdown__item.is-active {
    background-color: var(--ss-color-primary-light);
    color: var(--ss-color-primary);
}

.ss-dropdown__item.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Item with danger styling */
.ss-dropdown__item--danger {
    color: var(--ss-color-error);
}

.ss-dropdown__item--danger:hover {
    background-color: var(--ss-color-error-light);
}

/* Item icon */
.ss-dropdown__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--ss-color-text-tertiary);
}

.ss-dropdown__item:hover .ss-dropdown__icon {
    color: var(--ss-color-text-secondary);
}

.ss-dropdown__item.is-active .ss-dropdown__icon {
    color: var(--ss-color-primary);
}

.ss-dropdown__item--danger .ss-dropdown__icon {
    color: var(--ss-color-error);
}

/* Item with shortcut */
.ss-dropdown__shortcut {
    margin-inline-start: auto;
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-muted);
}


/* ============================================
   3. DROPDOWN SECTIONS
   ============================================ */

.ss-dropdown__header {
    padding: var(--ss-space-2) var(--ss-space-3);
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ss-tracking-wider);
    color: var(--ss-color-text-muted);
}

.ss-dropdown__divider {
    height: 1px;
    margin: var(--ss-space-1) 0;
    background-color: var(--ss-color-border);
}


/* ============================================
   4. SELECT DROPDOWN
   ============================================ */

.ss-select-dropdown {
    position: relative;
}

.ss-select-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-space-2);
    width: 100%;
    padding: var(--ss-space-2-5) var(--ss-space-3);
    background-color: var(--ss-color-input-bg);
    border: 1px solid var(--ss-color-input-border);
    border-radius: var(--ss-radius-lg);
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text);
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-select-dropdown__trigger:hover {
    border-color: var(--ss-color-input-border-hover);
}

.ss-select-dropdown__trigger:focus {
    outline: none;
    border-color: var(--ss-color-input-border-focus);
    box-shadow: 0 0 0 3px var(--ss-primary-100);
}

[data-theme="dark"] .ss-select-dropdown__trigger:focus {
    box-shadow: 0 0 0 3px rgb(13 148 136 / 0.2);
}

.ss-select-dropdown__value {
    flex: 1;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-select-dropdown__placeholder {
    color: var(--ss-color-input-placeholder);
}

.ss-select-dropdown__chevron {
    width: 1rem;
    height: 1rem;
    color: var(--ss-color-text-muted);
    transition: transform var(--ss-duration-200);
}

.ss-select-dropdown.is-open .ss-select-dropdown__chevron {
    transform: rotate(180deg);
}

.ss-select-dropdown__menu {
    max-height: 240px;
    overflow-y: auto;
}


/* ============================================
   5. POPOVER
   ============================================ */

.ss-popover {
    position: relative;
    display: inline-block;
}

.ss-popover__content {
    position: absolute;
    z-index: var(--ss-z-popover);
    min-width: 280px;
    padding: var(--ss-space-4);
    background-color: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-xl);
    box-shadow: var(--ss-shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: opacity var(--ss-duration-150),
                transform var(--ss-duration-150),
                visibility var(--ss-duration-150);
}

.ss-popover.is-open .ss-popover__content {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Popover positions */
.ss-popover--top .ss-popover__content {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    margin-bottom: var(--ss-space-2);
}

.ss-popover--top.is-open .ss-popover__content {
    transform: translateX(-50%) scale(1);
}

.ss-popover--bottom .ss-popover__content {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    margin-top: var(--ss-space-2);
}

.ss-popover--bottom.is-open .ss-popover__content {
    transform: translateX(-50%) scale(1);
}

.ss-popover--start .ss-popover__content {
    top: 50%;
    inset-inline-end: 100%;
    transform: translateY(-50%) scale(0.95);
    margin-inline-end: var(--ss-space-2);
}

.ss-popover--start.is-open .ss-popover__content {
    transform: translateY(-50%) scale(1);
}

.ss-popover--end .ss-popover__content {
    top: 50%;
    inset-inline-start: 100%;
    transform: translateY(-50%) scale(0.95);
    margin-inline-start: var(--ss-space-2);
}

.ss-popover--end.is-open .ss-popover__content {
    transform: translateY(-50%) scale(1);
}

/* Popover header */
.ss-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ss-space-3);
    padding-bottom: var(--ss-space-3);
    border-bottom: 1px solid var(--ss-color-border);
}

.ss-popover__title {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

.ss-popover__close {
    padding: var(--ss-space-1);
    color: var(--ss-color-text-muted);
    border-radius: var(--ss-radius-md);
    transition: var(--ss-transition-fast);
}

.ss-popover__close:hover {
    color: var(--ss-color-text);
    background-color: var(--ss-color-surface-hover);
}


/* ============================================
   6. TOOLTIP
   ============================================ */

.ss-tooltip {
    position: relative;
    display: inline-block;
}

.ss-tooltip__content {
    position: absolute;
    z-index: var(--ss-z-tooltip);
    padding: var(--ss-space-1-5) var(--ss-space-2-5);
    background-color: var(--ss-secondary-800);
    color: white;
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-medium);
    line-height: var(--ss-leading-normal);
    white-space: nowrap;
    border-radius: var(--ss-radius-md);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ss-duration-150),
                visibility var(--ss-duration-150);
}

[data-theme="dark"] .ss-tooltip__content {
    background-color: var(--ss-secondary-200);
    color: var(--ss-secondary-900);
}

.ss-tooltip:hover .ss-tooltip__content,
.ss-tooltip:focus-within .ss-tooltip__content {
    opacity: 1;
    visibility: visible;
}

/* Tooltip positions */
.ss-tooltip--top .ss-tooltip__content {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--ss-space-2);
}

.ss-tooltip--bottom .ss-tooltip__content {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--ss-space-2);
}

.ss-tooltip--start .ss-tooltip__content {
    top: 50%;
    inset-inline-end: 100%;
    transform: translateY(-50%);
    margin-inline-end: var(--ss-space-2);
}

.ss-tooltip--end .ss-tooltip__content {
    top: 50%;
    inset-inline-start: 100%;
    transform: translateY(-50%);
    margin-inline-start: var(--ss-space-2);
}

/* Tooltip with arrow */
.ss-tooltip__content::after {
    content: '';
    position: absolute;
    border: 5px solid transparent;
}

.ss-tooltip--top .ss-tooltip__content::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--ss-secondary-800);
}

[data-theme="dark"] .ss-tooltip--top .ss-tooltip__content::after {
    border-top-color: var(--ss-secondary-200);
}

.ss-tooltip--bottom .ss-tooltip__content::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--ss-secondary-800);
}

[data-theme="dark"] .ss-tooltip--bottom .ss-tooltip__content::after {
    border-bottom-color: var(--ss-secondary-200);
}


/* ============================================
   7. CONTEXT MENU
   ============================================ */

.ss-context-menu {
    position: fixed;
    min-width: 180px;
    padding: var(--ss-space-1);
    background-color: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-xl);
    box-shadow: var(--ss-shadow-xl);
    z-index: var(--ss-z-popover);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transform-origin: top left;
    transition: opacity var(--ss-duration-100),
                transform var(--ss-duration-100),
                visibility var(--ss-duration-100);
}

.ss-context-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

[dir="rtl"] .ss-context-menu {
    transform-origin: top right;
}
/**
 * Super Shop - Loaders & Spinners
 * 
 * Loading states, spinners, skeletons, and progress indicators
 * 
 * @package SuperShop
 */

/* ============================================
   1. APP LOADER (Full Page)
   ============================================ */

.ss-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ss-color-bg);
    z-index: var(--ss-z-modal);
    transition: opacity var(--ss-duration-300);
}

.ss-loader.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.ss-loader__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ss-space-4);
}

.ss-loader__spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--ss-color-border);
    border-top-color: var(--ss-color-primary);
    border-radius: var(--ss-radius-full);
    animation: ss-spin 0.8s linear infinite;
}

.ss-loader__text {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
}


/* ============================================
   2. SPINNER
   ============================================ */

.ss-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--ss-radius-full);
    animation: ss-spin 0.6s linear infinite;
    opacity: 0.7;
}

/* Spinner sizes */
.ss-spinner--xs {
    width: 0.75rem;
    height: 0.75rem;
    border-width: 1.5px;
}

.ss-spinner--sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.ss-spinner--lg {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 2px;
}

.ss-spinner--xl {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
}

/* Spinner colors */
.ss-spinner--primary {
    color: var(--ss-color-primary);
}

.ss-spinner--white {
    color: white;
}

@keyframes ss-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================
   3. DOTS LOADER
   ============================================ */

.ss-dots {
    display: inline-flex;
    gap: var(--ss-space-1);
}

.ss-dots__dot {
    width: 6px;
    height: 6px;
    background-color: var(--ss-color-primary);
    border-radius: var(--ss-radius-full);
    animation: ss-dots-bounce 1.4s ease-in-out infinite both;
}

.ss-dots__dot:nth-child(1) {
    animation-delay: -0.32s;
}

.ss-dots__dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes ss-dots-bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}


/* ============================================
   4. PULSE LOADER
   ============================================ */

.ss-pulse {
    width: 40px;
    height: 40px;
    border-radius: var(--ss-radius-full);
    background-color: var(--ss-color-primary);
    animation: ss-pulse 1.5s ease-in-out infinite;
}

@keyframes ss-pulse {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}


/* ============================================
   5. SKELETON LOADING
   ============================================ */

.ss-skeleton {
    background: linear-gradient(
        90deg,
        var(--ss-color-bg-tertiary) 25%,
        var(--ss-color-bg-secondary) 50%,
        var(--ss-color-bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: ss-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--ss-radius-md);
}

@keyframes ss-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton variants */
.ss-skeleton--text {
    height: 1rem;
    width: 100%;
    margin-bottom: var(--ss-space-2);
}

.ss-skeleton--text:last-child {
    width: 80%;
}

.ss-skeleton--title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: var(--ss-space-3);
}

.ss-skeleton--avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--ss-radius-full);
}

.ss-skeleton--button {
    height: 40px;
    width: 120px;
    border-radius: var(--ss-radius-lg);
}

.ss-skeleton--image {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--ss-radius-lg);
}

.ss-skeleton--card {
    height: 200px;
    border-radius: var(--ss-radius-xl);
}

/* Skeleton for product card */
.ss-skeleton-product {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-3);
}

.ss-skeleton-product__image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--ss-radius-lg);
}

.ss-skeleton-product__title {
    height: 1rem;
    width: 80%;
}

.ss-skeleton-product__price {
    height: 1.25rem;
    width: 40%;
}

/* Skeleton for table row */
.ss-skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--ss-space-4);
    padding: var(--ss-space-3) var(--ss-space-4);
}

.ss-skeleton-row__cell {
    flex: 1;
    height: 1rem;
}

.ss-skeleton-row__cell:first-child {
    flex: 0 0 40px;
    height: 40px;
    border-radius: var(--ss-radius-md);
}


/* ============================================
   6. PROGRESS BAR
   ============================================ */

.ss-progress {
    width: 100%;
    height: 8px;
    background-color: var(--ss-color-bg-tertiary);
    border-radius: var(--ss-radius-full);
    overflow: hidden;
}

.ss-progress__bar {
    height: 100%;
    background-color: var(--ss-color-primary);
    border-radius: var(--ss-radius-full);
    transition: width var(--ss-duration-300) var(--ss-ease-out);
}

/* Progress sizes */
.ss-progress--sm {
    height: 4px;
}

.ss-progress--lg {
    height: 12px;
}

/* Progress colors */
.ss-progress--success .ss-progress__bar {
    background-color: var(--ss-color-success);
}

.ss-progress--warning .ss-progress__bar {
    background-color: var(--ss-color-warning);
}

.ss-progress--error .ss-progress__bar {
    background-color: var(--ss-color-error);
}

/* Indeterminate progress */
.ss-progress--indeterminate .ss-progress__bar {
    width: 30%;
    animation: ss-progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes ss-progress-indeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}

/* Progress with label */
.ss-progress-labeled {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-2);
}

.ss-progress-labeled__header {
    display: flex;
    justify-content: space-between;
    font-size: var(--ss-text-sm);
}

.ss-progress-labeled__label {
    color: var(--ss-color-text);
    font-weight: var(--ss-font-medium);
}

.ss-progress-labeled__value {
    color: var(--ss-color-text-secondary);
}


/* ============================================
   7. CIRCULAR PROGRESS
   ============================================ */

.ss-circular-progress {
    position: relative;
    width: 48px;
    height: 48px;
}

.ss-circular-progress__svg {
    transform: rotate(-90deg);
}

.ss-circular-progress__track {
    fill: none;
    stroke: var(--ss-color-bg-tertiary);
    stroke-width: 4;
}

.ss-circular-progress__bar {
    fill: none;
    stroke: var(--ss-color-primary);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--ss-duration-300) var(--ss-ease-out);
}

.ss-circular-progress__value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

/* Indeterminate circular */
.ss-circular-progress--indeterminate .ss-circular-progress__svg {
    animation: ss-spin 1s linear infinite;
}


/* ============================================
   8. LOADING OVERLAY
   ============================================ */

.ss-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ss-color-overlay);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    z-index: var(--ss-z-10);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ss-duration-200), visibility var(--ss-duration-200);
}

.ss-loading-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* Light overlay variant */
.ss-loading-overlay--light {
    background-color: rgb(255 255 255 / 0.8);
}

[data-theme="dark"] .ss-loading-overlay--light {
    background-color: rgb(18 18 18 / 0.8);
}


/* ============================================
   9. CONTENT LOADER (while fetching)
   ============================================ */

.ss-content-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ss-space-12);
    color: var(--ss-color-text-secondary);
}

.ss-content-loader__spinner {
    margin-bottom: var(--ss-space-4);
}

.ss-content-loader__text {
    font-size: var(--ss-text-sm);
}
/**
 * Super Shop - Layout
 * 
 * Page layouts for dashboard and storefront
 * 
 * @package SuperShop
 */

/* ============================================
   1. APP SHELL
   ============================================ */

.ss-app {
    min-height: 100vh;
    background-color: var(--ss-color-bg, #ffffff);
}

[data-theme="dark"] .ss-app {
    background-color: var(--ss-color-bg, #121212);
}


/* ============================================
   2. DASHBOARD LAYOUT
   ============================================ */

.ss-dashboard {
    display: flex;
    min-height: 100vh;
    background-color: var(--ss-color-bg-secondary, #f9fafb);
}

[data-theme="dark"] .ss-dashboard {
    background-color: var(--ss-color-bg-secondary, #1a1a1a);
}

/* When ss-dashboard is on body (from PHP), don't double-apply */
body.ss-dashboard {
    display: block;
}

body.ss-dashboard > .ss-app {
    background-color: transparent;
}

/* Main content area */
.ss-main {
    flex: 1;
    min-width: 0;
    margin-inline-start: var(--ss-sidebar-width);
    transition: margin var(--ss-duration-300) var(--ss-ease-in-out);
}

.ss-sidebar.is-collapsed ~ .ss-main {
    margin-inline-start: var(--ss-sidebar-collapsed);
}

@media (max-width: 1023px) {
    .ss-main {
        margin-inline-start: 0;
    }
}

/* Page container */
.ss-page {
    padding: var(--ss-space-6);
    max-width: 1600px;
}

@media (max-width: 767px) {
    .ss-page {
        padding: var(--ss-space-4);
    }
}

/* Page header */
.ss-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-space-4);
    margin-bottom: var(--ss-space-6);
}

.ss-page__title-section {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-1);
}

.ss-page__title {
    font-size: var(--ss-text-2xl);
    font-weight: var(--ss-font-bold);
    color: var(--ss-color-text);
    line-height: var(--ss-leading-tight);
}

.ss-page__subtitle {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
}

.ss-page__actions {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
}

/* Page content */
.ss-page__content {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-6);
}


/* ============================================
   3. GRID LAYOUTS
   ============================================ */

/* Stats grid */
.ss-stats-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--ss-space-4);
}

@media (min-width: 640px) {
    .ss-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ss-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Dashboard grid (charts + widgets) */
.ss-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ss-space-6);
}

@media (min-width: 1024px) {
    .ss-dashboard-grid {
        grid-template-columns: 2fr 1fr;
    }
}

/* Two column layout */
.ss-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ss-space-6);
}

@media (min-width: 1024px) {
    .ss-two-col {
        grid-template-columns: 1fr 1fr;
    }
}

/* Three column layout */
.ss-three-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ss-space-6);
}

@media (min-width: 768px) {
    .ss-three-col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .ss-three-col {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Product grid */
.ss-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ss-space-4);
}

@media (min-width: 640px) {
    .ss-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .ss-product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1280px) {
    .ss-product-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}


/* ============================================
   4. STOREFRONT LAYOUT
   ============================================ */

.ss-storefront {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--ss-color-bg, #ffffff);
}

[data-theme="dark"] .ss-storefront {
    background-color: var(--ss-color-bg, #121212);
}

/* ============================================
   STORE HEADER - COMPLETE REWRITE
   Mobile-first, RTL-ready with logical properties
   ============================================ */

/* Base Header */
.ss-header {
    position: sticky;
    top: 0;
    z-index: var(--ss-z-sticky, 100);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ss-neutral-200);
    transition: box-shadow 0.2s ease;
}

.ss-header.is-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .ss-header {
    background: rgba(23, 23, 23, 0.98);
    border-bottom-color: var(--ss-neutral-800);
}

[data-theme="dark"] .ss-header.is-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Inner Container */
.ss-header__inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: var(--ss-container-xl, 1280px);
    margin: 0 auto;
    padding: 0.75rem 1rem;
    min-height: 56px;
}

@media (min-width: 768px) {
    .ss-header__inner {
        gap: 1rem;
        padding: 0.75rem 1.5rem;
        min-height: 64px;
    }
}

@media (min-width: 1024px) {
    .ss-header__inner {
        gap: 1.5rem;
        padding: 0.75rem 2rem;
    }
}

/* Start Section (Menu + Logo) */
.ss-header__start {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .ss-header__start {
        gap: 0.75rem;
    }
}

/* Mobile Menu Toggle */
.ss-header__menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ss-header__menu-toggle:hover {
    background: var(--ss-neutral-100);
}

[data-theme="dark"] .ss-header__menu-toggle:hover {
    background: var(--ss-neutral-800);
}

@media (min-width: 768px) {
    .ss-header__menu-toggle {
        display: none;
    }
}

/* Hamburger Icon */
.ss-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 20px;
    height: 20px;
}

.ss-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ss-neutral-700);
    border-radius: 1px;
    transition: all 0.2s ease;
}

[data-theme="dark"] .ss-hamburger span {
    background: var(--ss-neutral-300);
}

/* Logo */
.ss-header__logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    flex-shrink: 0;
}

.ss-header__logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--ss-color-primary, #0f766e) 0%, var(--ss-color-primary-hover, #0d6560) 100%);
    border-radius: 0.5rem;
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
}

.ss-header__logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.ss-header__logo-text {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ss-neutral-900);
    white-space: nowrap;
    display: none;
}

@media (min-width: 480px) {
    .ss-header__logo-text {
        display: block;
    }
}

[data-theme="dark"] .ss-header__logo-text {
    color: #ffffff;
}

/* Navigation (Desktop) */
.ss-header__nav {
    display: none;
    align-items: center;
    gap: 0.25rem;
    margin-inline-start: 0.5rem;
}

@media (min-width: 768px) {
    .ss-header__nav {
        display: flex;
    }
}

.ss-header__nav-link {
    position: relative;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ss-neutral-600);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ss-header__nav-link:hover {
    color: var(--ss-neutral-900);
    background: var(--ss-neutral-100);
}

.ss-header__nav-link.is-active {
    color: var(--ss-color-primary, var(--ss-primary-700));
}

.ss-header__nav-link.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--ss-color-primary, var(--ss-primary-600));
    border-radius: 1px;
}

[dir="rtl"] .ss-header__nav-link.is-active::after {
    transform: translateX(50%);
}

[data-theme="dark"] .ss-header__nav-link {
    color: var(--ss-neutral-400);
}

[data-theme="dark"] .ss-header__nav-link:hover {
    color: #ffffff;
    background: var(--ss-neutral-800);
}

[data-theme="dark"] .ss-header__nav-link.is-active {
    color: var(--ss-primary-400);
}

/* Search Bar (Desktop) */
.ss-header__search {
    flex: 1;
    max-width: 400px;
    margin-inline: auto;
    display: none;
}

@media (min-width: 768px) {
    .ss-header__search {
        display: block;
    }
}

@media (min-width: 1024px) {
    .ss-header__search {
        max-width: 480px;
    }
}

.ss-header__search-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: var(--ss-neutral-100);
    border: 1px solid var(--ss-neutral-200);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ss-header__search-btn:hover {
    background: var(--ss-neutral-50);
    border-color: var(--ss-neutral-300);
}

.ss-header__search-btn svg {
    width: 18px;
    height: 18px;
    color: var(--ss-neutral-400);
    flex-shrink: 0;
}

.ss-header__search-text {
    flex: 1;
    text-align: start;
    font-size: 0.875rem;
    color: var(--ss-neutral-500);
}

.ss-header__search-kbd {
    display: none;
    padding: 2px 6px;
    background: var(--ss-neutral-200);
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--ss-font-mono, monospace);
    color: var(--ss-neutral-500);
}

@media (min-width: 1024px) {
    .ss-header__search-kbd {
        display: block;
    }
}

[data-theme="dark"] .ss-header__search-btn {
    background: var(--ss-neutral-800);
    border-color: var(--ss-neutral-700);
}

[data-theme="dark"] .ss-header__search-btn:hover {
    background: var(--ss-neutral-700);
    border-color: var(--ss-neutral-600);
}

[data-theme="dark"] .ss-header__search-kbd {
    background: var(--ss-neutral-700);
    color: var(--ss-neutral-400);
}

/* End Section (Actions) */
.ss-header__end {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-inline-start: auto;
}

@media (min-width: 768px) {
    .ss-header__end {
        gap: 0.375rem;
    }
}

/* Show/Hide Utilities */
.ss-header__mobile-only {
    display: flex;
}

.ss-header__desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .ss-header__mobile-only {
        display: none;
    }
    
    .ss-header__desktop-only {
        display: flex;
    }
}

/* Icon Buttons */
.ss-header__icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    color: var(--ss-neutral-600);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
    .ss-header__icon-btn {
        width: 40px;
        height: 40px;
    }
}

.ss-header__icon-btn:hover {
    background: var(--ss-neutral-100);
    color: var(--ss-neutral-900);
}

.ss-header__icon-btn svg {
    width: 20px;
    height: 20px;
}

[data-theme="dark"] .ss-header__icon-btn {
    color: var(--ss-neutral-400);
}

[data-theme="dark"] .ss-header__icon-btn:hover {
    background: var(--ss-neutral-800);
    color: #ffffff;
}

/* Theme Toggle Button */
.ss-header__theme-btn {
    position: relative;
    overflow: hidden;
}

.ss-header__theme-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ss-header__theme-icon.is-visible {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.ss-header__theme-icon svg {
    width: 20px;
    height: 20px;
}

/* Cart Button */
.ss-header__cart-btn {
    position: relative;
}

.ss-header__badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--ss-color-primary, var(--ss-primary-600));
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ss-badge-pop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes ss-badge-pop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Account Section */
.ss-header__account {
    position: relative;
}

.ss-header__account-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 2px;
    background: transparent;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
    .ss-header__account-btn {
        width: 40px;
        height: 40px;
    }
}

.ss-header__account-btn:hover {
    background: var(--ss-neutral-100);
}

[data-theme="dark"] .ss-header__account-btn:hover {
    background: var(--ss-neutral-800);
}

.ss-header__avatar {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    object-fit: cover;
}

.ss-header__avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--ss-primary-500) 0%, var(--ss-primary-700) 100%);
    border-radius: 9999px;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Account Dropdown */
.ss-header__account .ss-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.ss-header__account.is-open .ss-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Login Button */
.ss-header__login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--ss-color-primary, var(--ss-primary-600));
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
    .ss-header__login-btn {
        padding: 0.5rem 1rem;
    }
}

.ss-header__login-btn:hover {
    background: var(--ss-color-primary-hover, var(--ss-primary-700));
}

.ss-header__login-btn svg {
    width: 18px;
    height: 18px;
}

.ss-header__login-text {
    display: none;
}

@media (min-width: 768px) {
    .ss-header__login-text {
        display: block;
    }
}

/* Dropdown Menu Styles (Shared) */
.ss-dropdown__menu {
    min-width: 220px;
    background: #ffffff;
    border: 1px solid var(--ss-neutral-200);
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 1000;
}

[data-theme="dark"] .ss-dropdown__menu {
    background: var(--ss-neutral-900);
    border-color: var(--ss-neutral-800);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.ss-dropdown__menu--end {
    inset-inline-end: 0;
}

.ss-dropdown__header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ss-neutral-200);
}

[data-theme="dark"] .ss-dropdown__header {
    border-bottom-color: var(--ss-neutral-800);
}

.ss-dropdown__name {
    display: block;
    font-weight: 600;
    color: var(--ss-neutral-900);
    margin-bottom: 2px;
}

[data-theme="dark"] .ss-dropdown__name {
    color: #ffffff;
}

.ss-dropdown__email {
    display: block;
    font-size: 0.8125rem;
    color: var(--ss-neutral-500);
}

.ss-dropdown__divider {
    height: 1px;
    background: var(--ss-neutral-200);
    margin: 0.25rem 0;
}

[data-theme="dark"] .ss-dropdown__divider {
    background: var(--ss-neutral-800);
}

.ss-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: none;
    border: none;
    color: var(--ss-neutral-700);
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ss-dropdown__item:hover {
    background: var(--ss-neutral-100);
    color: var(--ss-neutral-900);
}

[data-theme="dark"] .ss-dropdown__item {
    color: var(--ss-neutral-300);
}

[data-theme="dark"] .ss-dropdown__item:hover {
    background: var(--ss-neutral-800);
    color: #ffffff;
}

.ss-dropdown__item--danger {
    color: var(--ss-red-600);
}

.ss-dropdown__item--danger:hover {
    background: var(--ss-red-50);
    color: var(--ss-red-700);
}

[data-theme="dark"] .ss-dropdown__item--danger {
    color: var(--ss-red-400);
}

[data-theme="dark"] .ss-dropdown__item--danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--ss-red-300);
}

.ss-dropdown__icon {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

/* Language Selector in Header */
.ss-header .ss-lang-selector {
    position: relative;
}

.ss-header .ss-lang-selector__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    color: var(--ss-neutral-600);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
    .ss-header .ss-lang-selector__btn {
        width: auto;
        height: 40px;
        padding: 0.5rem 0.75rem;
    }
}

.ss-header .ss-lang-selector__btn:hover {
    background: var(--ss-neutral-100);
    color: var(--ss-neutral-900);
}

[data-theme="dark"] .ss-header .ss-lang-selector__btn {
    color: var(--ss-neutral-400);
}

[data-theme="dark"] .ss-header .ss-lang-selector__btn:hover {
    background: var(--ss-neutral-800);
    color: #ffffff;
}

.ss-header .ss-lang-selector__flag {
    font-size: 1.125rem;
    line-height: 1;
}

.ss-header .ss-lang-selector__code {
    display: none;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .ss-header .ss-lang-selector__code {
        display: block;
    }
}

.ss-header .ss-lang-selector__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid var(--ss-neutral-200);
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.ss-header .ss-lang-selector.is-open .ss-lang-selector__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

[data-theme="dark"] .ss-header .ss-lang-selector__dropdown {
    background: var(--ss-neutral-900);
    border-color: var(--ss-neutral-800);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Currency Selector */
.ss-header .ss-currency-selector {
    position: relative;
}

.ss-header .ss-currency-selector__btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    color: var(--ss-neutral-600);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ss-header .ss-currency-selector__btn:hover {
    background: var(--ss-neutral-100);
    color: var(--ss-neutral-900);
}

[data-theme="dark"] .ss-header .ss-currency-selector__btn {
    color: var(--ss-neutral-400);
}

[data-theme="dark"] .ss-header .ss-currency-selector__btn:hover {
    background: var(--ss-neutral-800);
    color: #ffffff;
}

/* Currency Selector Menu */
.ss-currency-selector__menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid var(--ss-neutral-200);
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}

.ss-currency-selector__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

[data-theme="dark"] .ss-currency-selector__menu {
    background: var(--ss-neutral-900);
    border-color: var(--ss-neutral-800);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.ss-currency-selector__header {
    padding: 0.625rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ss-neutral-500);
    border-bottom: 1px solid var(--ss-neutral-200);
}

[data-theme="dark"] .ss-currency-selector__header {
    border-bottom-color: var(--ss-neutral-800);
}

.ss-currency-selector__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: none;
    border: none;
    color: var(--ss-neutral-700);
    font-size: 0.875rem;
    text-align: start;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ss-currency-selector__item:hover {
    background: var(--ss-neutral-100);
    color: var(--ss-neutral-900);
}

.ss-currency-selector__item.is-active {
    background: var(--ss-primary-50);
    color: var(--ss-primary-700);
}

[data-theme="dark"] .ss-currency-selector__item {
    color: var(--ss-neutral-300);
}

[data-theme="dark"] .ss-currency-selector__item:hover {
    background: var(--ss-neutral-800);
    color: #ffffff;
}

[data-theme="dark"] .ss-currency-selector__item.is-active {
    background: rgba(20, 184, 166, 0.15);
    color: var(--ss-primary-400);
}

.ss-currency-selector__item-symbol {
    font-weight: 600;
    min-width: 24px;
}

.ss-currency-selector__item-name {
    flex: 1;
}

.ss-currency-selector__item-code {
    font-size: 0.75rem;
    color: var(--ss-neutral-500);
}

/* Language Selector Additional Styles */
.ss-lang-selector__header {
    padding: 0.625rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ss-neutral-500);
    border-bottom: 1px solid var(--ss-neutral-200);
}

[data-theme="dark"] .ss-lang-selector__header {
    border-bottom-color: var(--ss-neutral-800);
}

.ss-lang-selector__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: none;
    border: none;
    color: var(--ss-neutral-700);
    font-size: 0.875rem;
    text-align: start;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ss-lang-selector__item:hover {
    background: var(--ss-neutral-100);
    color: var(--ss-neutral-900);
}

.ss-lang-selector__item.is-active {
    background: var(--ss-primary-50);
    color: var(--ss-primary-700);
}

[data-theme="dark"] .ss-lang-selector__item {
    color: var(--ss-neutral-300);
}

[data-theme="dark"] .ss-lang-selector__item:hover {
    background: var(--ss-neutral-800);
    color: #ffffff;
}

[data-theme="dark"] .ss-lang-selector__item.is-active {
    background: rgba(20, 184, 166, 0.15);
    color: var(--ss-primary-400);
}

.ss-lang-selector__item .ss-lang-selector__flag {
    font-size: 1.25rem;
    line-height: 1;
}

/* ============================================
   SEARCH MODAL
   ============================================ */

.ss-search-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    opacity: 0;
    visibility: hidden;
    transition: all var(--ss-duration-200);
}

.ss-search-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.ss-search-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.ss-search-modal__content {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 var(--ss-space-4);
    background: #ffffff;
    border-radius: var(--ss-radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: transform var(--ss-duration-200);
}

.ss-search-modal.is-open .ss-search-modal__content {
    transform: translateY(0) scale(1);
}

[data-theme="dark"] .ss-search-modal__content {
    background: var(--ss-neutral-900);
}

.ss-search-modal__input-wrap {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-4);
    border-bottom: 1px solid var(--ss-neutral-200);
}

[data-theme="dark"] .ss-search-modal__input-wrap {
    border-bottom-color: var(--ss-neutral-800);
}

.ss-search-modal__icon {
    width: 20px;
    height: 20px;
    color: var(--ss-neutral-400);
    flex-shrink: 0;
}

.ss-search-modal__input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--ss-text-lg);
    background: transparent;
    color: var(--ss-neutral-900);
}

.ss-search-modal__input::placeholder {
    color: var(--ss-neutral-400);
}

[data-theme="dark"] .ss-search-modal__input {
    color: #ffffff;
}

.ss-search-modal__kbd {
    padding: 4px 8px;
    background: var(--ss-neutral-100);
    border-radius: var(--ss-radius-md);
    font-size: 12px;
    font-family: var(--ss-font-mono);
    color: var(--ss-neutral-500);
}

[data-theme="dark"] .ss-search-modal__kbd {
    background: var(--ss-neutral-800);
    color: var(--ss-neutral-400);
}

.ss-search-modal__results {
    max-height: 400px;
    overflow-y: auto;
}

.ss-search-modal__hint,
.ss-search-modal__loading,
.ss-search-modal__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-8);
    color: var(--ss-neutral-500);
    font-size: var(--ss-text-sm);
}

.ss-search-modal__hint-icon,
.ss-search-modal__empty-icon {
    width: 20px;
    height: 20px;
}

.ss-search-modal__results-list {
    padding: var(--ss-space-2);
}

.ss-search-modal__result {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-3);
    border-radius: var(--ss-radius-lg);
    text-decoration: none;
    transition: background-color var(--ss-duration-150);
}

.ss-search-modal__result:hover {
    background: var(--ss-neutral-100);
}

[data-theme="dark"] .ss-search-modal__result:hover {
    background: var(--ss-neutral-800);
}

.ss-search-modal__result-img {
    width: 48px;
    height: 48px;
    border-radius: var(--ss-radius-md);
    object-fit: cover;
    background: var(--ss-neutral-100);
}

.ss-search-modal__result-info {
    flex: 1;
    min-width: 0;
}

.ss-search-modal__result-name {
    display: block;
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-neutral-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .ss-search-modal__result-name {
    color: #ffffff;
}

.ss-search-modal__result-price {
    font-size: var(--ss-text-sm);
    color: var(--ss-primary-600);
    font-weight: var(--ss-font-semibold);
}

.ss-search-modal__view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ss-space-2);
    padding: var(--ss-space-4);
    border-top: 1px solid var(--ss-neutral-200);
    color: var(--ss-primary-600);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    text-decoration: none;
    transition: background-color var(--ss-duration-150);
}

.ss-search-modal__view-all:hover {
    background: var(--ss-neutral-50);
}

[data-theme="dark"] .ss-search-modal__view-all {
    border-top-color: var(--ss-neutral-800);
}

[data-theme="dark"] .ss-search-modal__view-all:hover {
    background: var(--ss-neutral-800);
}

.ss-search-modal__view-all svg {
    width: 16px;
    height: 16px;
}

/* Search modal section title */
.ss-search-modal__section-title {
    padding: var(--ss-space-2) var(--ss-space-4);
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--ss-neutral-50);
}

[data-theme="dark"] .ss-search-modal__section-title {
    background: var(--ss-neutral-800);
}

/* Category result style */
.ss-search-modal__result--category {
    background: var(--ss-neutral-50);
}

[data-theme="dark"] .ss-search-modal__result--category {
    background: var(--ss-neutral-800);
}

/* Result icon */
.ss-search-modal__result-icon {
    width: 20px;
    height: 20px;
    color: var(--ss-color-text-secondary);
    flex-shrink: 0;
}

/* Highlight matched text */
.ss-search-modal__result-name mark {
    background: rgba(var(--ss-primary-rgb), 0.2);
    color: var(--ss-primary-600);
    padding: 0 2px;
    border-radius: 2px;
}

/* Popular searches */
.ss-search-modal__popular {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-2);
    padding: var(--ss-space-3) var(--ss-space-4);
}

.ss-search-modal__popular-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-1);
    padding: var(--ss-space-2) var(--ss-space-3);
    background: var(--ss-neutral-100);
    border: none;
    border-radius: var(--ss-radius-full);
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text);
    cursor: pointer;
    transition: all var(--ss-duration-150);
}

.ss-search-modal__popular-item:hover {
    background: var(--ss-primary-100);
    color: var(--ss-primary-700);
}

.ss-search-modal__popular-item svg {
    width: 14px;
    height: 14px;
    color: var(--ss-color-text-secondary);
}

[data-theme="dark"] .ss-search-modal__popular-item {
    background: var(--ss-neutral-800);
}

[data-theme="dark"] .ss-search-modal__popular-item:hover {
    background: var(--ss-neutral-700);
}

/* Browse link */
.ss-search-modal__browse {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ss-space-2);
    padding: var(--ss-space-3);
    color: var(--ss-color-text-secondary);
    font-size: var(--ss-text-sm);
    text-decoration: none;
    transition: color var(--ss-duration-150);
}

.ss-search-modal__browse:hover {
    color: var(--ss-primary-600);
}

.ss-search-modal__browse svg {
    width: 16px;
    height: 16px;
}

/* Error state */
.ss-search-modal__error {
    padding: var(--ss-space-6) var(--ss-space-4);
    text-align: center;
    color: var(--ss-color-error);
    font-size: var(--ss-text-sm);
}

/* Focused result */
.ss-search-modal__result.is-focused,
.ss-search-modal__view-all.is-focused {
    background: var(--ss-primary-50);
}

[data-theme="dark"] .ss-search-modal__result.is-focused,
[data-theme="dark"] .ss-search-modal__view-all.is-focused {
    background: var(--ss-neutral-700);
}

/* Body class when modal is open */
body.has-modal {
    overflow: hidden;
}

/* Store content */
.ss-store-content {
    flex: 1;
}

/* Store container */
.ss-store-container {
    max-width: var(--ss-container-xl);
    margin: 0 auto;
    padding: var(--ss-space-6);
}

@media (max-width: 767px) {
    .ss-store-container {
        padding: var(--ss-space-4);
    }
}

/* Store footer */
.ss-store-footer {
    background-color: var(--ss-color-bg-secondary, #f9fafb);
    border-top: 1px solid var(--ss-color-border-light, #f3f4f6);
    padding: var(--ss-space-12) var(--ss-space-6);
}

[data-theme="dark"] .ss-store-footer {
    background-color: var(--ss-color-bg-secondary, #1a1a1a);
    border-top-color: var(--ss-color-border-light, #262626);
}

.ss-store-footer__container {
    max-width: var(--ss-container-xl);
    margin: 0 auto;
}

.ss-store-footer__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ss-space-8);
}

@media (min-width: 768px) {
    .ss-store-footer__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ss-store-footer__section-title {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    margin-bottom: var(--ss-space-4);
}

.ss-store-footer__links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-2);
}

.ss-store-footer__link {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    text-decoration: none;
    transition: color var(--ss-duration-150);
}

.ss-store-footer__link:hover {
    color: var(--ss-color-primary);
}

.ss-store-footer__bottom {
    margin-top: var(--ss-space-8);
    padding-top: var(--ss-space-8);
    border-top: 1px solid var(--ss-color-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--ss-space-4);
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary); /* Changed from text-muted for better contrast */
}


/* ============================================
   5. SPLIT LAYOUTS
   ============================================ */

/* Product detail layout */
.ss-product-layout {
    display: block; /* Changed from grid - the PDP has its own grid */
}

/* Legacy product layout grid (for backward compatibility) */
.ss-product-layout--legacy {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ss-space-8);
}

@media (min-width: 1024px) {
    .ss-product-layout--legacy {
        grid-template-columns: 1fr 1fr;
    }
}

/* Checkout layout */
.ss-checkout-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ss-space-8);
}

@media (min-width: 1024px) {
    .ss-checkout-layout {
        grid-template-columns: 1fr 400px;
    }
}

/* Account layout */
.ss-account-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ss-space-6);
}

@media (min-width: 1024px) {
    .ss-account-layout {
        grid-template-columns: 240px 1fr;
    }
}

.ss-account-sidebar {
    background-color: var(--ss-color-surface);
    border-radius: var(--ss-radius-xl);
    border: 1px solid var(--ss-color-border-light);
    padding: var(--ss-space-4);
    height: fit-content;
}

.ss-account-nav {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-1);
}

.ss-account-nav__item {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-3) var(--ss-space-4);
    border-radius: var(--ss-radius-lg);
    color: var(--ss-color-text-secondary);
    text-decoration: none;
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    transition: all var(--ss-duration-150);
    border: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.ss-account-nav__item:hover {
    background-color: var(--ss-color-surface-hover);
    color: var(--ss-color-text);
}

.ss-account-nav__item.is-active {
    background-color: var(--ss-color-primary);
    color: white;
}

.ss-account-nav__item.is-active svg {
    color: white;
}

.ss-account-nav__item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ss-account-nav__item--logout {
    margin-top: var(--ss-space-4);
    padding-top: var(--ss-space-4);
    border-top: 1px solid var(--ss-color-border-light);
    color: var(--ss-color-error);
}

.ss-account-nav__item--logout:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--ss-color-error);
}

.ss-account-content {
    min-width: 0;
}

.ss-account-layout__sidebar {
    background-color: var(--ss-color-surface);
    border-radius: var(--ss-radius-xl);
    padding: var(--ss-space-4);
    height: fit-content;
}

/* Stat Cards */
.ss-stat-card {
    display: flex;
    align-items: center;
    gap: var(--ss-space-4);
    padding: var(--ss-space-4);
    background-color: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-lg);
    transition: all 0.2s ease;
}

.ss-stat-card:hover {
    border-color: var(--ss-color-primary);
    box-shadow: var(--ss-shadow-sm);
}

.ss-stat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--ss-color-primary), var(--ss-color-primary-dark));
    border-radius: var(--ss-radius-lg);
    color: white;
    flex-shrink: 0;
}

.ss-stat-card__icon svg {
    width: 24px;
    height: 24px;
}

.ss-stat-card__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ss-stat-card__value {
    font-size: var(--ss-text-2xl);
    font-weight: 700;
    color: var(--ss-color-text);
    line-height: 1.2;
}

.ss-stat-card__label {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
}

/* Subscription Cards */
.ss-subscriptions-list {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-4);
}

.ss-subscription-card {
    border-left: 4px solid var(--ss-color-primary);
}

.ss-subscription-card.is-paused {
    border-left-color: var(--ss-color-warning);
}

.ss-subscription-card.is-cancelled {
    border-left-color: var(--ss-color-error);
    opacity: 0.7;
}

/* Table compact variant */
.ss-table--compact th,
.ss-table--compact td {
    padding: var(--ss-space-2) var(--ss-space-3);
}

/* Responsive stat cards */
@media (max-width: 768px) {
    .ss-stat-card {
        padding: var(--ss-space-3);
    }
    
    .ss-stat-card__icon {
        width: 40px;
        height: 40px;
    }
    
    .ss-stat-card__icon svg {
        width: 20px;
        height: 20px;
    }
    
    .ss-stat-card__value {
        font-size: var(--ss-text-xl);
    }
}

/* Address Display */
.ss-address {
    font-style: normal;
    line-height: 1.6;
    color: var(--ss-color-text);
}

/* Table Responsive */
.ss-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Auth Forms */
.ss-auth-card {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

/* Password Reset Link */
.ss-forgot-password {
    display: block;
    text-align: right;
    margin-top: var(--ss-space-2);
    font-size: var(--ss-text-sm);
    color: var(--ss-color-primary);
}

.ss-forgot-password:hover {
    text-decoration: underline;
}

/* Order Status Colors */
.ss-badge--warning {
    background-color: #fef3c7;
    color: #92400e;
}

.ss-badge--info {
    background-color: #dbeafe;
    color: #1e40af;
}

.ss-badge--success {
    background-color: #d1fae5;
    color: #065f46;
}

.ss-badge--error {
    background-color: #fee2e2;
    color: #991b1b;
}

.ss-badge--secondary {
    background-color: var(--ss-color-bg-secondary);
    color: var(--ss-color-text-secondary);
}

/* Grid utilities for account */
.ss-grid--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ss-space-4);
}

@media (max-width: 768px) {
    .ss-grid--2 {
        grid-template-columns: 1fr;
    }
}

/* Modal Styles for Address Form */
.ss-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ss-space-4);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.2s, opacity 0.2s;
}

.ss-modal.is-active {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s;
}

.ss-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.ss-modal__content {
    position: relative;
    background-color: var(--ss-color-surface);
    border-radius: var(--ss-radius-xl);
    box-shadow: var(--ss-shadow-xl);
    max-height: 90vh;
    overflow-y: auto;
    width: 100%;
    max-width: 600px;
}

.ss-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ss-space-4) var(--ss-space-6);
    border-bottom: 1px solid var(--ss-color-border-light);
}

.ss-modal__title {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-semibold);
    margin: 0;
}

.ss-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--ss-color-text-secondary);
    border-radius: var(--ss-radius-md);
    cursor: pointer;
    transition: all var(--ss-duration-150);
}

.ss-modal__close:hover {
    background-color: var(--ss-color-surface-hover);
    color: var(--ss-color-text);
}

.ss-modal__body {
    padding: var(--ss-space-6);
}

.ss-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--ss-space-3);
    padding: var(--ss-space-4) var(--ss-space-6);
    border-top: 1px solid var(--ss-color-border-light);
}


/* ============================================
   6. MOBILE MENU / DRAWER
   ============================================ */

.ss-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--ss-z-drawer);
    visibility: hidden;
    pointer-events: none; /* Don't block clicks when closed */
}

.ss-drawer.is-open {
    visibility: visible;
    pointer-events: auto; /* Allow clicks when open */
}

.ss-drawer__backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--ss-color-overlay);
    opacity: 0;
    transition: opacity var(--ss-duration-300);
    cursor: pointer; /* Show it's clickable */
}

.ss-drawer.is-open .ss-drawer__backdrop {
    opacity: 1;
}

.ss-drawer__content {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 320px;
    background-color: var(--ss-color-surface, #ffffff);
    transform: translateX(-100%);
    transition: transform var(--ss-duration-300) var(--ss-ease-out);
    overflow-y: auto;
}

[data-theme="dark"] .ss-drawer__content {
    background-color: var(--ss-color-surface, #1e1e1e);
}

[dir="rtl"] .ss-drawer__content {
    transform: translateX(100%);
}

.ss-drawer.is-open .ss-drawer__content {
    transform: translateX(0);
}

/* Right side drawer */
.ss-drawer--end .ss-drawer__content {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: translateX(100%);
}

[dir="rtl"] .ss-drawer--end .ss-drawer__content {
    transform: translateX(-100%);
}

.ss-drawer--end.is-open .ss-drawer__content {
    transform: translateX(0);
}

.ss-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ss-space-4);
    border-bottom: 1px solid var(--ss-color-border-light);
}

.ss-drawer__title {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

.ss-drawer__close {
    padding: var(--ss-space-2);
    color: var(--ss-color-text-secondary);
    border-radius: var(--ss-radius-lg);
    transition: var(--ss-transition-fast);
}

.ss-drawer__close:hover {
    background-color: var(--ss-color-surface-hover);
    color: var(--ss-color-text);
}

.ss-drawer__body {
    padding: var(--ss-space-4);
}

.ss-drawer__footer {
    padding: var(--ss-space-4);
    border-top: 1px solid var(--ss-color-border-light);
}


/* ============================================
   7. MINI CART
   ============================================ */

.ss-mini-cart {
    max-width: 400px;
}

.ss-mini-cart__items {
    max-height: 400px;
    overflow-y: auto;
}

.ss-mini-cart__item {
    display: flex;
    gap: var(--ss-space-3);
    padding: var(--ss-space-3) 0;
    border-bottom: 1px solid var(--ss-color-border-light);
}

.ss-mini-cart__item:last-child {
    border-bottom: none;
}

.ss-mini-cart__image {
    width: 64px;
    height: 64px;
    border-radius: var(--ss-radius-lg);
    object-fit: cover;
    background-color: var(--ss-color-bg-secondary);
}

.ss-mini-cart__details {
    flex: 1;
    min-width: 0;
}

.ss-mini-cart__name {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
    margin-bottom: var(--ss-space-1);
}

.ss-mini-cart__meta {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-secondary);
}

.ss-mini-cart__price {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

.ss-mini-cart__totals {
    padding-top: var(--ss-space-4);
    border-top: 1px solid var(--ss-color-border);
}

.ss-mini-cart__row {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--ss-space-2);
    font-size: var(--ss-text-sm);
}

.ss-mini-cart__row--total {
    font-weight: var(--ss-font-semibold);
    font-size: var(--ss-text-base);
    padding-top: var(--ss-space-2);
    border-top: 1px solid var(--ss-color-border-light);
    margin-top: var(--ss-space-2);
}

/* ============================================
   STOREFRONT-SPECIFIC STYLES
   ============================================ */

/* ============================================
   ANNOUNCEMENT BAR
   ============================================ */

.ss-announcement-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ss-space-2) var(--ss-space-4);
    background: var(--bar-bg, var(--ss-color-primary));
    color: var(--bar-text, #ffffff);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    text-align: center;
    z-index: 1001;
    transition: all var(--ss-duration-300);
}

.ss-announcement-bar.is-dismissed {
    transform: translateY(-100%);
    opacity: 0;
}

.ss-announcement-bar__container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ss-space-2);
}

.ss-announcement-bar__text,
.ss-announcement-bar__link {
    color: inherit;
}

.ss-announcement-bar__link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ss-announcement-bar__link:hover {
    text-decoration-thickness: 2px;
}

.ss-announcement-bar__close {
    position: absolute;
    right: var(--ss-space-3);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: var(--ss-radius-full);
    color: inherit;
    cursor: pointer;
    transition: background-color var(--ss-duration-150);
}

.ss-announcement-bar__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.ss-announcement-bar__close svg {
    width: 14px;
    height: 14px;
}

/* RTL Announcement Bar */
[dir="rtl"] .ss-announcement-bar__close,
.ss-rtl .ss-announcement-bar__close {
    right: auto;
    left: var(--ss-space-3);
}

/* ============================================
   HERO SECTION - ENHANCED
   ============================================ */

.ss-hero {
    position: relative;
    padding: var(--ss-space-16) var(--ss-space-6);
    background: linear-gradient(135deg, var(--ss-color-primary), var(--ss-color-primary-hover));
    text-align: center;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .ss-hero {
    background: linear-gradient(135deg, var(--ss-neutral-900), var(--ss-neutral-800));
}

.ss-hero--centered {
    text-align: center;
}

.ss-hero--split {
    text-align: left;
}

.ss-hero--has-image {
    background: transparent;
}

.ss-hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ss-hero__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ss-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
}

.ss-hero__container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--ss-space-6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ss-hero--split .ss-hero__container {
    justify-content: space-between;
    gap: var(--ss-space-12);
}

.ss-hero__content {
    max-width: 640px;
    position: relative;
    z-index: 1;
}

.ss-hero--split .ss-hero__content {
    max-width: 50%;
    flex: 1;
}

.ss-hero__title {
    font-size: clamp(var(--ss-text-3xl), 5vw, var(--ss-text-5xl));
    font-weight: var(--ss-font-bold);
    color: white;
    margin-bottom: var(--ss-space-4);
    line-height: var(--ss-leading-tight);
}

.ss-hero__subtitle {
    font-size: var(--ss-text-lg);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--ss-space-8);
    line-height: var(--ss-leading-relaxed);
}

.ss-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-3);
}

.ss-hero--centered .ss-hero__actions {
    justify-content: center;
}

.ss-hero__actions .ss-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-2);
}

.ss-hero__actions .ss-btn svg {
    width: 18px;
    height: 18px;
    transition: transform var(--ss-duration-200);
}

.ss-hero__actions .ss-btn:hover svg {
    transform: translateX(4px);
}

/* Hero buttons - white for contrast */
.ss-hero__actions .ss-btn--primary {
    background: white;
    color: var(--ss-neutral-900);
    border: 2px solid white;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.ss-hero__actions .ss-btn--primary:hover {
    background: var(--ss-neutral-100);
    border-color: var(--ss-neutral-100);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.ss-hero__actions .ss-btn--secondary,
.ss-hero__actions .ss-btn--outline {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.7);
}

.ss-hero__actions .ss-btn--secondary:hover,
.ss-hero__actions .ss-btn--outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: white;
}

.ss-hero__media {
    flex: 1;
    max-width: 50%;
}

.ss-hero__split-image {
    width: 100%;
    height: auto;
    border-radius: var(--ss-radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Hero Slider */
.ss-hero-slider {
    position: relative;
    overflow: hidden;
}

.ss-hero-slider__track {
    position: relative;
}

.ss-hero-slider__slide {
    position: relative;
    min-height: 500px;
    display: none;
    align-items: center;
    justify-content: center;
}

.ss-hero-slider__slide.is-active {
    display: flex;
    animation: heroFadeIn 0.5s ease;
}

@keyframes heroFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ss-hero-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: var(--ss-radius-full);
    color: var(--ss-neutral-900);
    cursor: pointer;
    z-index: 10;
    transition: all var(--ss-duration-200);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ss-hero-slider__arrow:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
}

.ss-hero-slider__arrow--prev {
    left: var(--ss-space-6);
}

.ss-hero-slider__arrow--next {
    right: var(--ss-space-6);
}

.ss-hero-slider__dots {
    position: absolute;
    bottom: var(--ss-space-6);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--ss-space-2);
    z-index: 10;
}

.ss-hero-slider__dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: var(--ss-radius-full);
    cursor: pointer;
    transition: all var(--ss-duration-200);
}

.ss-hero-slider__dot.is-active,
.ss-hero-slider__dot:hover {
    background: white;
    transform: scale(1.2);
}

/* ============================================
   USP BAR (Trust Badges)
   ============================================ */

.ss-usp-bar {
    background: var(--ss-color-surface);
    border-bottom: 1px solid var(--ss-color-border-light);
    padding: var(--ss-space-6) 0;
}

[data-theme="dark"] .ss-usp-bar {
    background: var(--ss-neutral-900);
    border-bottom-color: var(--ss-neutral-800);
}

.ss-usp-bar__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--ss-space-6);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ss-space-6);
}

@media (max-width: 768px) {
    .ss-usp-bar__container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ss-space-4);
    }
}

@media (max-width: 480px) {
    .ss-usp-bar__container {
        grid-template-columns: 1fr 1fr;
    }
}

.ss-usp-bar__item {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
}

.ss-usp-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--ss-primary-50);
    border-radius: var(--ss-radius-lg);
    color: var(--ss-color-primary);
    flex-shrink: 0;
}

[data-theme="dark"] .ss-usp-bar__icon {
    background: rgba(var(--ss-primary-500-rgb, 20, 184, 166), 0.15);
}

.ss-usp-bar__icon svg {
    width: 24px;
    height: 24px;
}

.ss-usp-bar__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ss-usp-bar__title {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

.ss-usp-bar__subtitle {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-secondary);
}

/* ============================================
   SECTION LAYOUT
   ============================================ */

.ss-section {
    padding: var(--ss-space-16) 0;
}

.ss-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--ss-space-8);
    gap: var(--ss-space-4);
}

.ss-section__header--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ss-section__header-content {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-2);
}

.ss-section__title {
    font-size: var(--ss-text-2xl);
    font-weight: var(--ss-font-bold);
    color: var(--ss-color-text);
    line-height: var(--ss-leading-tight);
}

.ss-section__subtitle {
    font-size: var(--ss-text-base);
    color: var(--ss-color-text-secondary);
}

.ss-section__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-1);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--ss-duration-150);
}

.ss-section__link:hover {
    color: var(--ss-color-primary-hover);
}

.ss-section__link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--ss-duration-200);
}

.ss-section__link:hover svg {
    transform: translateX(4px);
}

/* ============================================
   CATEGORY CARDS
   ============================================ */

.ss-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--ss-space-4);
}

.ss-category-grid--cards {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.ss-category-grid--overlay {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

@media (min-width: 768px) {
    .ss-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .ss-category-grid--cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .ss-category-grid--cards {
        grid-template-columns: repeat(6, 1fr);
    }
}

.ss-category-card {
    display: flex;
    flex-direction: column;
    background: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border-light);
    border-radius: var(--ss-radius-xl);
    overflow: hidden;
    text-decoration: none;
    transition: all var(--ss-duration-200);
}

.ss-category-card:hover {
    border-color: var(--ss-color-border);
    box-shadow: var(--ss-shadow-md);
    transform: translateY(-4px);
}

.ss-category-card__image-wrap {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--ss-color-bg-secondary);
}

.ss-category-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ss-duration-300);
}

.ss-category-card:hover .ss-category-card__image {
    transform: scale(1.05);
}

.ss-category-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-color-text-tertiary);
}

.ss-category-card__placeholder svg {
    width: 48px;
    height: 48px;
}

.ss-category-card__content {
    padding: var(--ss-space-4);
    text-align: center;
}

.ss-category-card__name {
    display: block;
    font-size: var(--ss-text-base);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    margin-bottom: var(--ss-space-1);
}

.ss-category-card__count {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
}

/* Minimal style */
.ss-category-card--minimal {
    flex-direction: row;
    align-items: center;
    padding: var(--ss-space-4);
    gap: var(--ss-space-3);
}

.ss-category-card--minimal .ss-category-card__name {
    flex: 1;
    text-align: left;
    margin: 0;
}

.ss-category-card--minimal .ss-category-card__count {
    flex-shrink: 0;
}

/* Overlay style */
.ss-category-card--overlay {
    position: relative;
    aspect-ratio: 3/2;
}

.ss-category-card--overlay .ss-category-card__image {
    position: absolute;
    inset: 0;
}

.ss-category-card--overlay .ss-category-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: white;
    padding: var(--ss-space-4);
}

.ss-category-card--overlay .ss-category-card__name {
    color: white;
    font-size: var(--ss-text-lg);
}

.ss-category-card--overlay .ss-category-card__count {
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   PROMOTIONAL BANNERS
   ============================================ */

.ss-promo-banners__grid {
    display: grid;
    gap: var(--ss-space-6);
}

.ss-promo-banners__grid--single {
    grid-template-columns: 1fr;
}

.ss-promo-banners__grid--double {
    grid-template-columns: repeat(2, 1fr);
}

.ss-promo-banners__grid--triple {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .ss-promo-banners__grid--double,
    .ss-promo-banners__grid--triple {
        grid-template-columns: 1fr;
    }
}

.ss-promo-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 200px;
    padding: var(--ss-space-8);
    background: var(--banner-bg, var(--ss-primary-50));
    border-radius: var(--ss-radius-2xl);
    overflow: hidden;
    color: var(--banner-text, var(--ss-neutral-900));
}

.ss-promo-banner--has-image {
    background: transparent;
}

.ss-promo-banner__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.ss-promo-banner--has-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);
    z-index: 1;
}

.ss-promo-banner__content {
    position: relative;
    z-index: 2;
    max-width: 400px;
}

.ss-promo-banner--has-image .ss-promo-banner__content {
    color: white;
}

.ss-promo-banner__label {
    display: inline-block;
    padding: var(--ss-space-1) var(--ss-space-3);
    background: currentColor;
    color: var(--banner-bg, white);
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--ss-radius-full);
    margin-bottom: var(--ss-space-3);
}

.ss-promo-banner__title {
    font-size: var(--ss-text-2xl);
    font-weight: var(--ss-font-bold);
    margin-bottom: var(--ss-space-2);
    line-height: var(--ss-leading-tight);
}

.ss-promo-banner__subtitle {
    font-size: var(--ss-text-base);
    opacity: 0.9;
    margin-bottom: var(--ss-space-4);
}

.ss-promo-banner .ss-btn {
    background: var(--banner-text, var(--ss-neutral-900));
    color: var(--banner-bg, white);
    border: none;
}

.ss-promo-banner--has-image .ss-btn {
    background: white;
    color: var(--ss-neutral-900);
}

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

.ss-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--ss-space-6);
}

.ss-testimonial-card {
    background: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border-light);
    border-radius: var(--ss-radius-xl);
    padding: var(--ss-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-4);
}

.ss-testimonial-card__rating {
    display: flex;
}

.ss-stars {
    display: inline-flex;
    gap: 2px;
}

.ss-star {
    color: var(--ss-neutral-300);
}

.ss-star--filled {
    color: var(--ss-warning-400);
}

.ss-star svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.ss-testimonial-card__text {
    font-size: var(--ss-text-base);
    color: var(--ss-color-text);
    line-height: var(--ss-leading-relaxed);
    font-style: italic;
}

.ss-testimonial-card__author {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    margin-top: auto;
}

.ss-testimonial-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--ss-radius-full);
    object-fit: cover;
}

.ss-testimonial-card__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ss-primary-400), var(--ss-primary-600));
    color: white;
    font-weight: var(--ss-font-semibold);
    font-size: var(--ss-text-sm);
}

.ss-testimonial-card__name {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

/* ============================================
   BRANDS SECTION
   ============================================ */

.ss-brands__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ss-space-8);
}

.ss-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ss-space-4);
    opacity: 0.6;
    filter: grayscale(100%);
    transition: all var(--ss-duration-200);
}

.ss-brand-logo:hover {
    opacity: 1;
    filter: grayscale(0);
}

.ss-brand-logo img {
    max-height: 48px;
    max-width: 120px;
    object-fit: contain;
}

/* ============================================
   NEWSLETTER SECTION
   ============================================ */

.ss-newsletter {
    background: linear-gradient(135deg, var(--ss-color-primary), var(--ss-color-primary-hover));
    color: white;
}

.ss-newsletter--solid {
    background: var(--ss-color-primary);
}

[data-theme="dark"] .ss-newsletter {
    background: var(--ss-neutral-800);
}

.ss-newsletter__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ss-space-6);
}

@media (min-width: 768px) {
    .ss-newsletter__content {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
    }
}

.ss-newsletter__text {
    max-width: 400px;
}

.ss-newsletter__title {
    font-size: var(--ss-text-2xl);
    font-weight: var(--ss-font-bold);
    margin-bottom: var(--ss-space-2);
}

.ss-newsletter__subtitle {
    font-size: var(--ss-text-base);
    opacity: 0.9;
}

.ss-newsletter__form {
    width: 100%;
    max-width: 500px;
}

.ss-newsletter__input-group {
    display: flex;
    gap: var(--ss-space-2);
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--ss-radius-full);
    padding: var(--ss-space-1);
}

.ss-newsletter__input {
    flex: 1;
    min-width: 0;
    padding: var(--ss-space-3) var(--ss-space-4);
    background: transparent;
    border: none;
    color: white;
    font-size: var(--ss-text-base);
}

.ss-newsletter__input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.ss-newsletter__input:focus {
    outline: none;
}

.ss-newsletter__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-2);
    padding: var(--ss-space-3) var(--ss-space-6);
    background: white;
    color: var(--ss-neutral-900);
    border: none;
    border-radius: var(--ss-radius-full);
    font-weight: var(--ss-font-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--ss-duration-200);
}

.ss-newsletter__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ss-newsletter__btn svg {
    width: 16px;
    height: 16px;
}

.ss-newsletter__privacy {
    margin-top: var(--ss-space-3);
    font-size: var(--ss-text-xs);
    opacity: 0.8;
}

.ss-newsletter__privacy a {
    color: inherit;
    text-decoration: underline;
}

.ss-newsletter__success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ss-space-2);
    padding: var(--ss-space-4);
    font-weight: var(--ss-font-medium);
}

.ss-newsletter__success svg {
    width: 24px;
    height: 24px;
}

/* ============================================
   PRODUCT GRID/CAROUSEL
   ============================================ */

.ss-product-carousel {
    display: flex;
    gap: var(--ss-space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: var(--ss-space-2);
}

.ss-product-carousel::-webkit-scrollbar {
    display: none;
}

.ss-product-carousel .ss-product-card {
    flex: 0 0 calc(25% - var(--ss-space-3));
    scroll-snap-align: start;
}

@media (max-width: 1024px) {
    .ss-product-carousel .ss-product-card {
        flex: 0 0 calc(33.333% - var(--ss-space-3));
    }
}

@media (max-width: 768px) {
    .ss-product-carousel .ss-product-card {
        flex: 0 0 calc(50% - var(--ss-space-2));
    }
}

@media (max-width: 480px) {
    .ss-product-carousel .ss-product-card {
        flex: 0 0 calc(80%);
    }
}

/* ============================================
   MOBILE HERO ADJUSTMENTS
   ============================================ */

@media (max-width: 767px) {
    .ss-hero {
        min-height: 300px;
        padding: var(--ss-space-12) var(--ss-space-4);
    }
    
    .ss-hero--split .ss-hero__container {
        flex-direction: column;
        text-align: center;
    }
    
    .ss-hero--split .ss-hero__content {
        max-width: 100%;
    }
    
    .ss-hero--split .ss-hero__actions {
        justify-content: center;
    }
    
    .ss-hero__media {
        display: none;
    }
    
    .ss-hero-slider__slide {
        min-height: 350px;
    }
    
    .ss-hero-slider__arrow {
        width: 36px;
        height: 36px;
    }
    
    .ss-hero-slider__arrow--prev {
        left: var(--ss-space-2);
    }
    
    .ss-hero-slider__arrow--next {
        right: var(--ss-space-2);
    }
    
    .ss-section {
        padding: var(--ss-space-10) 0;
    }
    
    .ss-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ss-space-2);
    }
    
    .ss-newsletter__input-group {
        flex-direction: column;
        border-radius: var(--ss-radius-xl);
        padding: var(--ss-space-2);
    }
    
    .ss-newsletter__btn {
        width: 100%;
        justify-content: center;
    }
}

/* Product card */
.ss-product-card {
    display: flex;
    flex-direction: column;
    background-color: var(--ss-color-surface);
    border-radius: var(--ss-radius-xl);
    border: 1px solid var(--ss-color-border-light);
    overflow: hidden;
    transition: var(--ss-transition);
}

.ss-product-card:hover {
    border-color: var(--ss-color-border);
    box-shadow: var(--ss-shadow-md);
    transform: translateY(-2px);
}

.ss-product-card__image-wrapper {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: var(--ss-color-bg-secondary);
}

.ss-product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ss-duration-300);
}

.ss-product-card:hover .ss-product-card__image {
    transform: scale(1.05);
}

.ss-product-card__badges {
    position: absolute;
    top: var(--ss-space-3);
    inset-inline-start: var(--ss-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-1);
}

.ss-product-card__wishlist {
    position: absolute;
    top: var(--ss-space-3);
    inset-inline-end: var(--ss-space-3);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ss-color-surface);
    border-radius: var(--ss-radius-full);
    box-shadow: var(--ss-shadow-sm);
    color: var(--ss-color-text-muted);
    opacity: 0;
    transform: scale(0.9);
    transition: var(--ss-transition-fast);
}

.ss-product-card:hover .ss-product-card__wishlist {
    opacity: 1;
    transform: scale(1);
}

.ss-product-card__wishlist:hover {
    color: var(--ss-color-error);
}

.ss-product-card__wishlist.is-active {
    color: var(--ss-color-error);
    opacity: 1;
}

.ss-product-card__wishlist svg {
    width: 18px;
    height: 18px;
}

.ss-product-card__content {
    padding: var(--ss-space-4);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ss-product-card__category {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-primary);
    font-weight: var(--ss-font-medium);
    margin-bottom: var(--ss-space-1);
}

.ss-product-card__name {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
    margin-bottom: var(--ss-space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ss-product-card__rating {
    display: flex;
    align-items: center;
    gap: var(--ss-space-1);
    margin-bottom: var(--ss-space-3);
}

.ss-product-card__stars {
    display: flex;
    gap: 2px;
    color: var(--ss-warning-400);
}

.ss-product-card__stars svg {
    width: 14px;
    height: 14px;
}

.ss-product-card__reviews {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-muted);
}

.ss-product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.ss-product-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--ss-space-2);
}

.ss-product-card__current-price {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-bold);
    color: var(--ss-color-text);
}

.ss-product-card__original-price {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-muted);
    text-decoration: line-through;
}

.ss-product-card__add-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ss-color-primary);
    color: white;
    border-radius: var(--ss-radius-full);
    transition: var(--ss-transition-fast);
}

.ss-product-card__add-btn:hover {
    background-color: var(--ss-color-primary-hover);
    transform: scale(1.1);
}

.ss-product-card__add-btn svg {
    width: 18px;
    height: 18px;
}

/* Quick view button */
.ss-product-card__quick-view {
    position: absolute;
    bottom: var(--ss-space-3);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    padding: var(--ss-space-2) var(--ss-space-4);
    background-color: var(--ss-color-surface);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    border-radius: var(--ss-radius-full);
    box-shadow: var(--ss-shadow-md);
    opacity: 0;
    transition: var(--ss-transition-fast);
}

.ss-product-card:hover .ss-product-card__quick-view {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Product detail page */
.ss-product-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-4);
}

.ss-product-gallery__main {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--ss-radius-xl);
    overflow: hidden;
    background-color: var(--ss-color-bg-secondary);
}

.ss-product-gallery__main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ss-product-gallery__zoom {
    position: absolute;
    bottom: var(--ss-space-3);
    inset-inline-end: var(--ss-space-3);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ss-color-surface);
    border-radius: var(--ss-radius-full);
    box-shadow: var(--ss-shadow-md);
    color: var(--ss-color-text-secondary);
    transition: var(--ss-transition-fast);
}

.ss-product-gallery__zoom:hover {
    color: var(--ss-color-text);
}

.ss-product-gallery__thumbs {
    display: flex;
    gap: var(--ss-space-2);
    overflow-x: auto;
    padding-bottom: var(--ss-space-2);
}

.ss-product-gallery__thumb {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: var(--ss-radius-lg);
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--ss-duration-150);
}

.ss-product-gallery__thumb.is-active {
    border-color: var(--ss-color-primary);
}

.ss-product-gallery__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product info */
.ss-product-info {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-6);
}

.ss-product-info__header {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-2);
}

.ss-product-info__category {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-primary);
    font-weight: var(--ss-font-medium);
}

.ss-product-info__title {
    font-size: var(--ss-text-2xl);
    font-weight: var(--ss-font-bold);
    color: var(--ss-color-text);
}

.ss-product-info__rating {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
}

.ss-product-info__stars {
    display: flex;
    gap: 2px;
    color: var(--ss-warning-400);
}

.ss-product-info__reviews-link {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    text-decoration: underline;
}

.ss-product-info__price {
    display: flex;
    align-items: baseline;
    gap: var(--ss-space-3);
}

.ss-product-info__current-price {
    font-size: var(--ss-text-3xl);
    font-weight: var(--ss-font-bold);
    color: var(--ss-color-text);
}

.ss-product-info__original-price {
    font-size: var(--ss-text-lg);
    color: var(--ss-color-text-muted);
    text-decoration: line-through;
}

.ss-product-info__discount {
    padding: var(--ss-space-1) var(--ss-space-2);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    background-color: var(--ss-color-error-light);
    color: var(--ss-color-error);
    border-radius: var(--ss-radius-md);
}

.ss-product-info__description {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    line-height: var(--ss-leading-relaxed);
}

/* Variations selector */
.ss-variations {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-4);
}

.ss-variation {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-2);
}

.ss-variation__label {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
}

.ss-variation__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-2);
}

.ss-variation__option {
    padding: var(--ss-space-2) var(--ss-space-4);
    font-size: var(--ss-text-sm);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-lg);
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-variation__option:hover {
    border-color: var(--ss-color-primary);
}

.ss-variation__option.is-selected {
    border-color: var(--ss-color-primary);
    background-color: var(--ss-color-primary-light);
    color: var(--ss-color-primary);
}

.ss-variation__option.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Color swatch */
.ss-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: var(--ss-radius-full);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-color-swatch:hover {
    transform: scale(1.1);
}

.ss-color-swatch.is-selected {
    border-color: var(--ss-color-text);
    box-shadow: 0 0 0 2px var(--ss-color-bg);
}

/* Quantity selector */
.ss-quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-lg);
}

.ss-quantity__btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-color-text-secondary);
    transition: var(--ss-transition-fast);
}

.ss-quantity__btn:hover {
    color: var(--ss-color-text);
    background-color: var(--ss-color-surface-hover);
}

.ss-quantity__btn:first-child {
    border-radius: var(--ss-radius-lg) 0 0 var(--ss-radius-lg);
}

.ss-quantity__btn:last-child {
    border-radius: 0 var(--ss-radius-lg) var(--ss-radius-lg) 0;
}

.ss-quantity__input {
    width: 60px;
    height: 40px;
    text-align: center;
    border: none;
    border-inline-start: 1px solid var(--ss-color-border);
    border-inline-end: 1px solid var(--ss-color-border);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
}

.ss-quantity__input:focus {
    outline: none;
}

/* Add to cart section */
.ss-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-3);
    align-items: center;
}

/* Stock status */
.ss-stock {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
    font-size: var(--ss-text-sm);
}

.ss-stock__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--ss-radius-full);
}

.ss-stock--in-stock .ss-stock__dot {
    background-color: var(--ss-color-success);
}

.ss-stock--in-stock .ss-stock__text {
    color: var(--ss-color-success);
}

.ss-stock--low-stock .ss-stock__dot {
    background-color: var(--ss-color-warning);
}

.ss-stock--low-stock .ss-stock__text {
    color: var(--ss-color-warning);
}

.ss-stock--out-of-stock .ss-stock__dot {
    background-color: var(--ss-color-error);
}

.ss-stock--out-of-stock .ss-stock__text {
    color: var(--ss-color-error);
}

/* Product tabs */
.ss-product-tabs {
    margin-top: var(--ss-space-12);
}

.ss-product-tabs__content {
    padding: var(--ss-space-6) 0;
}

/* Cart item */
.ss-cart-item {
    display: flex;
    gap: var(--ss-space-4);
    padding: var(--ss-space-4);
    padding-right: var(--ss-space-10);
    border-bottom: 1px solid var(--ss-color-border-light);
    position: relative;
    background-color: var(--ss-color-surface);
    border-radius: var(--ss-radius-lg);
    margin-bottom: var(--ss-space-3);
}

.ss-cart-item:last-child {
    border-bottom: none;
}

.ss-cart-item__image {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: var(--ss-radius-lg);
    object-fit: cover;
    background-color: var(--ss-color-bg-secondary);
}

.ss-cart-item__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ss-cart-item__name {
    font-size: var(--ss-text-base);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
    margin-bottom: var(--ss-space-1);
}

.ss-cart-item__meta {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    margin-bottom: var(--ss-space-3);
}

.ss-cart-item__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.ss-cart-item__price {
    font-size: var(--ss-text-base);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

.ss-cart-item__remove {
    position: absolute;
    top: var(--ss-space-3);
    right: var(--ss-space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--ss-color-text-muted);
    cursor: pointer;
    border-radius: var(--ss-radius-full);
    transition: all var(--ss-duration-150);
}

.ss-cart-item__remove:hover {
    background-color: rgba(220, 38, 38, 0.1);
    color: var(--ss-color-error);
}

.ss-cart-item__remove svg {
    width: 16px;
    height: 16px;
}

.ss-cart-item__variation {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-muted);
    margin-top: var(--ss-space-1);
}

/* Cart summary */
.ss-cart-summary {
    background-color: var(--ss-color-surface);
    border-radius: var(--ss-radius-xl);
    border: 1px solid var(--ss-color-border-light);
    padding: var(--ss-space-6);
}

.ss-cart-summary__title {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    margin-bottom: var(--ss-space-5);
    padding-bottom: var(--ss-space-4);
    border-bottom: 1px solid var(--ss-color-border-light);
}

.ss-cart-summary__row {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--ss-space-3);
    font-size: var(--ss-text-sm);
}

.ss-cart-summary__label {
    color: var(--ss-color-text-secondary);
}

.ss-cart-summary__value {
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
}

.ss-cart-summary__total {
    display: flex;
    justify-content: space-between;
    margin-top: var(--ss-space-4);
    padding-top: var(--ss-space-4);
    border-top: 1px solid var(--ss-color-border);
}

.ss-cart-summary__total-label {
    font-size: var(--ss-text-base);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

.ss-cart-summary__total-value {
    font-size: var(--ss-text-xl);
    font-weight: var(--ss-font-bold);
    color: var(--ss-color-text);
}

.ss-cart-summary__actions {
    margin-top: var(--ss-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-3);
}

.ss-cart-summary__row--discount {
    color: #16a34a;
}

.ss-cart-summary__row--discount .ss-cart-summary__value {
    color: #16a34a;
}

/* Coupon Form */
.ss-coupon-form {
    padding-bottom: var(--ss-space-4);
    margin-bottom: var(--ss-space-4);
    border-bottom: 1px solid var(--ss-color-border);
}

.ss-coupon-form__input-wrapper {
    display: flex;
    gap: var(--ss-space-2);
}

.ss-coupon-form__input-wrapper .ss-input {
    flex: 1;
    height: 40px;
}

.ss-coupon-form__input-wrapper .ss-btn {
    flex-shrink: 0;
    height: 40px;
}

.ss-coupon-form__message {
    margin-top: var(--ss-space-2);
    font-size: var(--ss-text-sm);
}

.ss-coupon-form__message--success {
    color: #16a34a;
}

.ss-coupon-form__message--error {
    color: #dc2626;
}

/* Applied Coupons */
.ss-applied-coupons {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-2);
    padding-bottom: var(--ss-space-4);
    margin-bottom: var(--ss-space-4);
    border-bottom: 1px solid var(--ss-color-border);
}

.ss-applied-coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ss-space-2) var(--ss-space-3);
    background-color: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.2);
    border-radius: var(--ss-radius-md);
}

.ss-applied-coupon__code {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: #16a34a;
    text-transform: uppercase;
}

.ss-applied-coupon__code svg {
    width: 14px;
    height: 14px;
}

.ss-applied-coupon__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--ss-color-text-tertiary);
    cursor: pointer;
    border-radius: var(--ss-radius-sm);
    transition: all var(--ss-duration-150);
}

.ss-applied-coupon__remove:hover {
    background-color: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.ss-applied-coupon__remove svg {
    width: 14px;
    height: 14px;
}

/* Applied Discount Rules */
.ss-applied-discounts {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-2);
}

.ss-applied-discount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ss-space-2) var(--ss-space-3);
    background-color: rgba(22, 163, 74, 0.08);
    border: 1px dashed rgba(22, 163, 74, 0.3);
    border-radius: var(--ss-radius-md);
}

.ss-applied-discount__name {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: #16a34a;
}

.ss-applied-discount__name svg {
    width: 14px;
    height: 14px;
}

.ss-applied-discount__value {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
}

/* Search results */
.ss-search-results {
    background-color: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-xl);
    box-shadow: var(--ss-shadow-lg);
    max-height: 400px;
    overflow-y: auto;
}

.ss-search-results__item {
    display: flex;
    gap: var(--ss-space-3);
    padding: var(--ss-space-3);
    text-decoration: none;
    transition: background-color var(--ss-duration-150);
}

.ss-search-results__item:hover {
    background-color: var(--ss-color-surface-hover);
}

.ss-search-results__image {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--ss-radius-md);
    object-fit: cover;
    background-color: var(--ss-color-bg-secondary);
}

.ss-search-results__info {
    flex: 1;
    min-width: 0;
}

.ss-search-results__name {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
}

.ss-search-results__price {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
}

.ss-search-results__empty {
    padding: var(--ss-space-6);
    text-align: center;
    color: var(--ss-color-text-secondary);
}

/* Filters sidebar */
.ss-filters {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-6);
}

.ss-filter-group {
    padding-bottom: var(--ss-space-5);
    border-bottom: 1px solid var(--ss-color-border-light);
}

.ss-filter-group:last-child {
    border-bottom: none;
}

.ss-filter-group__title {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    margin-bottom: var(--ss-space-3);
}

.ss-filter-group__options {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-2);
}

/* Price range filter */
.ss-price-range {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-4);
}

.ss-price-range__inputs {
    display: flex;
    gap: var(--ss-space-2);
    align-items: center;
}

.ss-price-range__input {
    flex: 1;
}

.ss-price-range__separator {
    color: var(--ss-color-text-muted);
}
/**
 * Super Shop - Storefront Product Styles
 * 
 * Product cards, grid, and detail page styles
 * 
 * @package SuperShop
 */

/* ==========================================================================
   Product Grid
   ========================================================================== */

.ss-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .ss-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .ss-product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ==========================================================================
   Product Card
   ========================================================================== */

.ss-product-card {
    background: var(--ss-color-bg-primary);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-lg);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ss-product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ss-shadow-md);
}

.ss-product-card__image-link {
    display: block;
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--ss-color-bg-secondary);
}

.ss-product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ss-product-card:hover .ss-product-card__image {
    transform: scale(1.05);
}

.ss-product-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-color-text-tertiary);
}

.ss-product-card__image--placeholder svg {
    width: 48px;
    height: 48px;
}

/* Product Badges Container */
.ss-product-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    z-index: 2;
}

/* Individual Badge */
.ss-product-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--ss-radius-sm);
    color: white;
    background: var(--badge-color, var(--ss-color-primary));
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Badge Type Variants (fallback colors) */
.ss-product-badge--sale {
    --badge-color: #ef4444;
}

.ss-product-badge--new {
    --badge-color: #10b981;
}

.ss-product-badge--featured {
    --badge-color: #8b5cf6;
}

.ss-product-badge--low_stock {
    --badge-color: #f59e0b;
}

.ss-product-badge--out_of_stock {
    --badge-color: #6b7280;
}

.ss-product-badge--custom {
    --badge-color: #3b82f6;
}

/* Legacy Badge Support */
.ss-product-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--ss-radius-sm);
    color: white;
}

.ss-product-card__badge--sale {
    background: #ef4444;
}

.ss-product-card__badge--featured {
    background: #8b5cf6;
    top: 0.75rem;
    left: auto;
    right: 0.75rem;
}

.ss-product-card__badge--soldout {
    background: var(--ss-color-text-tertiary);
}

.ss-product-card__content {
    padding: 1rem;
}

.ss-product-card__category {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ss-color-text-tertiary);
    margin-bottom: 0.25rem;
}

.ss-product-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.ss-product-card__title a {
    color: var(--ss-color-text);
    text-decoration: none;
}

.ss-product-card__title a:hover {
    color: var(--ss-color-primary);
}

.ss-product-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ss-product-card__price-current,
.ss-product-card__price-sale {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ss-color-text);
}

.ss-product-card__price-sale {
    color: var(--ss-color-success);
}

.ss-product-card__price-regular {
    font-size: 0.875rem;
    color: var(--ss-color-text-tertiary);
    text-decoration: line-through;
}

.ss-product-card__actions {
    margin-top: auto;
}

.ss-product-card__actions .ss-btn {
    font-size: 0.8rem;
}

.ss-product-card__actions .ss-btn svg {
    width: 16px;
    height: 16px;
    margin-right: 0.25rem;
}


/* ==========================================================================
   Product Detail
   ========================================================================== */

.ss-product-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .ss-product-detail {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}


/* Product Gallery */
.ss-product-gallery__main {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--ss-radius-lg);
    overflow: hidden;
    background: var(--ss-color-bg-secondary);
}

.ss-product-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ss-product-gallery__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ss-color-text-tertiary);
}

.ss-product-gallery__placeholder svg {
    width: 96px;
    height: 96px;
}

.ss-product-gallery__thumbs {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.ss-product-gallery__thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    padding: 0;
    border: 2px solid var(--ss-color-border);
    border-radius: var(--ss-radius-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--ss-color-bg-secondary);
    transition: border-color 0.15s ease;
}

.ss-product-gallery__thumb:hover {
    border-color: var(--ss-color-text-secondary);
}

.ss-product-gallery__thumb.is-active {
    border-color: var(--ss-color-primary);
}

.ss-product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Product Info */
.ss-product-info__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--ss-color-text);
}

.ss-product-info__sku {
    font-size: 0.875rem;
    color: var(--ss-color-text-tertiary);
    margin-bottom: 1rem;
}

.ss-product-info__price {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.ss-product-info__price-current,
.ss-product-info__price-sale {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ss-color-text);
}

.ss-product-info__price-sale {
    color: var(--ss-color-success);
}

.ss-product-info__price-regular {
    font-size: 1.25rem;
    color: var(--ss-color-text-tertiary);
    text-decoration: line-through;
}

.ss-product-info__discount {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ss-color-success);
    background: var(--ss-color-success-soft);
    padding: 0.25rem 0.5rem;
    border-radius: var(--ss-radius-sm);
}

.ss-product-info__short-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ss-color-text-secondary);
    margin-bottom: 1.5rem;
}

.ss-product-info__stock {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.ss-product-info__stock svg {
    width: 18px;
    height: 18px;
}

.ss-product-info__stock--instock {
    color: var(--ss-color-success);
}

.ss-product-info__stock--outofstock {
    color: var(--ss-color-danger);
}

.ss-product-info__add-to-cart {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ss-product-info__add-to-cart .ss-btn {
    flex: 1;
}

.ss-product-info__add-to-cart .ss-btn svg {
    margin-right: 0.5rem;
}

.ss-product-info__meta {
    font-size: 0.875rem;
    color: var(--ss-color-text-secondary);
    padding-top: 1rem;
    border-top: 1px solid var(--ss-color-border);
}

.ss-product-info__meta-label {
    font-weight: 500;
    color: var(--ss-color-text);
}

.ss-product-info__meta-link {
    color: var(--ss-color-primary);
    text-decoration: none;
}

.ss-product-info__meta-link:hover {
    text-decoration: underline;
}


/* Product Description */
.ss-product-description {
    border-top: 1px solid var(--ss-color-border);
    padding-top: 2rem;
}

.ss-product-description__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.ss-product-description__content {
    color: var(--ss-color-text-secondary);
    line-height: 1.7;
}

.ss-product-description__content p {
    margin-bottom: 1rem;
}

.ss-product-description__content ul,
.ss-product-description__content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}


/* ==========================================================================
   Quantity Selector
   ========================================================================== */

.ss-quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-md);
    overflow: hidden;
}

.ss-quantity--lg {
    height: 48px;
}

.ss-quantity__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    border: none;
    background: var(--ss-color-bg-secondary);
    color: var(--ss-color-text);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ss-quantity__btn:hover {
    background: var(--ss-color-bg-tertiary);
}

.ss-quantity__input {
    width: 60px;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ss-color-text);
    -moz-appearance: textfield;
}

.ss-quantity__input::-webkit-outer-spin-button,
.ss-quantity__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.ss-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.ss-breadcrumb__item {
    color: var(--ss-color-text-secondary);
    text-decoration: none;
}

.ss-breadcrumb__item:hover:not(.ss-breadcrumb__item--current) {
    color: var(--ss-color-primary);
}

.ss-breadcrumb__item--current {
    color: var(--ss-color-text);
    font-weight: 500;
}

.ss-breadcrumb__separator {
    color: var(--ss-color-text-tertiary);
}


/* ==========================================================================
   PRODUCT DETAIL PAGE (PDP) - Modern Redesign
   ========================================================================== */

/* PDP Breadcrumb */
.ss-pdp-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8125rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ss-color-border);
}

.ss-pdp-breadcrumb a {
    color: var(--ss-color-text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}

.ss-pdp-breadcrumb a:hover {
    color: var(--ss-color-primary);
}

.ss-pdp-breadcrumb span:last-child {
    color: var(--ss-color-text);
    font-weight: 500;
}

.ss-pdp-breadcrumb svg {
    width: 14px;
    height: 14px;
    color: var(--ss-color-text-tertiary);
    flex-shrink: 0;
}

/* PDP Main Layout */
.ss-pdp {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 4rem;
}

@media (min-width: 1024px) {
    .ss-pdp {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

@media (min-width: 1280px) {
    .ss-pdp {
        grid-template-columns: 55% 45%;
        gap: 5rem;
    }
}

/* Gallery Section */
.ss-pdp__gallery {
    position: sticky;
    top: 1.5rem;
    align-self: start;
}

@media (max-width: 1023px) {
    .ss-pdp__gallery {
        position: static;
    }
}

.ss-pdp__gallery-main {
    position: relative;
    margin-bottom: 1rem;
}

.ss-pdp__image-wrapper {
    position: relative;
    aspect-ratio: 1;
    background: var(--ss-color-bg-secondary);
    border-radius: 1rem;
    overflow: hidden;
}

.ss-pdp__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    transition: opacity 0.15s ease;
}

.ss-pdp__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ss-color-text-tertiary);
}

.ss-pdp__image-placeholder svg {
    width: 80px;
    height: 80px;
    opacity: 0.5;
}

/* Gallery Badges */
.ss-pdp__badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2;
}

.ss-pdp__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0.25rem;
    color: white;
    background: var(--badge-color, var(--ss-color-primary));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ss-pdp__badge--sale {
    --badge-color: #ef4444;
}

.ss-pdp__badge--new {
    --badge-color: #10b981;
}

.ss-pdp__badge--featured {
    --badge-color: #8b5cf6;
}

.ss-pdp__badge--low_stock {
    --badge-color: #f59e0b;
}

.ss-pdp__badge--out_of_stock,
.ss-pdp__badge--soldout {
    --badge-color: #6b7280;
}

.ss-pdp__badge--custom {
    --badge-color: #3b82f6;
}

/* Gallery Zoom Hint */
.ss-pdp__zoom-hint {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 0.75rem;
    border-radius: 2rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.ss-pdp__image-wrapper:hover .ss-pdp__zoom-hint {
    opacity: 1;
}

.ss-pdp__zoom-hint svg {
    width: 14px;
    height: 14px;
}

/* Gallery Navigation */
.ss-pdp__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s, background 0.2s;
}

.ss-pdp__image-wrapper:hover .ss-pdp__nav {
    opacity: 1;
}

.ss-pdp__nav:hover {
    background: var(--ss-color-primary);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.ss-pdp__nav--prev {
    left: 1rem;
}

.ss-pdp__nav--next {
    right: 1rem;
}

.ss-pdp__nav svg {
    width: 20px;
    height: 20px;
}

/* Gallery Counter */
.ss-pdp__counter {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    padding: 0.375rem 0.75rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 2rem;
}

/* Gallery Thumbnails */
.ss-pdp__thumbs {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.25rem;
    margin: -0.25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ss-pdp__thumbs::-webkit-scrollbar {
    display: none;
}

.ss-pdp__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    padding: 0;
    background: var(--ss-color-bg-secondary);
    border: 2px solid transparent;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}

.ss-pdp__thumb:hover {
    border-color: var(--ss-color-text-tertiary);
}

.ss-pdp__thumb.is-active {
    border-color: var(--ss-color-primary);
}

.ss-pdp__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .ss-pdp__thumb {
        width: 80px;
        height: 80px;
    }
}

/* Info Section */
.ss-pdp__info {
    display: flex;
    flex-direction: column;
}

/* Header */
.ss-pdp__header {
    margin-bottom: 1.5rem;
}

.ss-pdp__category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ss-color-primary);
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.ss-pdp__category:hover {
    text-decoration: underline;
}

.ss-pdp__title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
    color: var(--ss-color-text);
}

@media (min-width: 768px) {
    .ss-pdp__title {
        font-size: 2rem;
    }
}

.ss-pdp__sku {
    font-size: 0.8125rem;
    color: var(--ss-color-text-tertiary);
    margin: 0;
}

/* Price Block */
.ss-pdp__price-block {
    margin-bottom: 1.5rem;
}

.ss-pdp__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ss-pdp__price-current {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ss-color-text);
}

.ss-pdp__price--sale .ss-pdp__price-current {
    color: #16a34a;
}

.ss-pdp__price-sep {
    font-size: 1.25rem;
    color: var(--ss-color-text-tertiary);
}

.ss-pdp__price-was {
    font-size: 1.125rem;
    color: var(--ss-color-text-tertiary);
    text-decoration: line-through;
}

.ss-pdp__price-save {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #16a34a;
    background: rgba(22, 163, 74, 0.1);
    border-radius: 0.25rem;
}

/* Excerpt */
.ss-pdp__excerpt {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ss-color-text-secondary);
    margin-bottom: 1.5rem;
}

/* Divider */
.ss-pdp__divider {
    border: none;
    border-top: 1px solid var(--ss-color-border);
    margin: 0 0 1.5rem 0;
}

/* Options / Variations */
.ss-pdp__options {
    margin-bottom: 1.5rem;
}

.ss-pdp__option {
    margin-bottom: 1.25rem;
}

.ss-pdp__option:last-child {
    margin-bottom: 0;
}

.ss-pdp__option-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ss-pdp__option-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ss-color-text);
}

.ss-pdp__option-value {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ss-color-text-secondary);
}

/* Swatches */
.ss-pdp__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.ss-pdp__swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ss-color-border);
    background: var(--ss-color-surface);
    cursor: pointer;
    transition: all 0.2s;
}

.ss-pdp__swatch:hover {
    border-color: var(--ss-color-text-secondary);
}

.ss-pdp__swatch.is-active {
    border-color: var(--ss-color-primary);
    box-shadow: 0 0 0 2px rgba(var(--ss-color-primary-rgb), 0.2);
}

.ss-pdp__swatch:disabled,
.ss-pdp__swatch.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Color Swatches */
.ss-pdp__swatch--color {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--swatch-color, #ccc);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.ss-pdp__swatch--color .ss-pdp__swatch-check {
    display: none;
    color: white;
}

.ss-pdp__swatch--color .ss-pdp__swatch-check svg {
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.ss-pdp__swatch--color.is-active .ss-pdp__swatch-check {
    display: flex;
}

/* Light color adjustment */
.ss-pdp__swatch--color[style*="white"],
.ss-pdp__swatch--color[style*="#fff"],
.ss-pdp__swatch--color[style*="ivory"],
.ss-pdp__swatch--color[style*="beige"],
.ss-pdp__swatch--color[style*="yellow"] {
    border-color: var(--ss-color-border);
}

.ss-pdp__swatch--color[style*="white"] .ss-pdp__swatch-check,
.ss-pdp__swatch--color[style*="#fff"] .ss-pdp__swatch-check,
.ss-pdp__swatch--color[style*="ivory"] .ss-pdp__swatch-check,
.ss-pdp__swatch--color[style*="beige"] .ss-pdp__swatch-check,
.ss-pdp__swatch--color[style*="yellow"] .ss-pdp__swatch-check {
    color: var(--ss-color-text);
}

/* Button Swatches */
.ss-pdp__swatch--button {
    min-width: 48px;
    height: 44px;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ss-color-text);
    border-radius: 0.5rem;
}

.ss-pdp__swatch--button.is-active {
    background: var(--ss-color-primary);
    border-color: var(--ss-color-primary);
    color: white;
}

/* Image Swatches */
.ss-pdp__swatch--image {
    width: 56px;
    height: 56px;
    padding: 3px;
    border-radius: 0.5rem;
    overflow: hidden;
}

.ss-pdp__swatch--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(0.5rem - 5px);
}

/* Select Dropdown */
.ss-pdp__select-wrapper {
    position: relative;
    max-width: 300px;
}

.ss-pdp__select {
    width: 100%;
    height: 48px;
    padding: 0 2.5rem 0 1rem;
    font-size: 0.9375rem;
    color: var(--ss-color-text);
    background: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border);
    border-radius: 0.5rem;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

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

.ss-pdp__select-wrapper svg {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--ss-color-text-tertiary);
    pointer-events: none;
}

/* Option Message */
.ss-pdp__option-message {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    display: none;
}

.ss-pdp__option-message:not(:empty) {
    display: block;
}

.ss-pdp__option-message--error {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.ss-pdp__option-message--success {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

/* Empty options fallback */
.ss-pdp__options-empty {
    padding: 1rem;
    background: var(--ss-color-bg-secondary);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.ss-pdp__options-empty p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ss-color-text-secondary);
}

/* Stock Status */
.ss-pdp__stock {
    margin-bottom: 1.5rem;
}

.ss-pdp__stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 2rem;
}

.ss-pdp__stock-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

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

.ss-pdp__stock-badge--instock {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

.ss-pdp__stock-badge--instock .ss-pdp__stock-dot {
    background: #16a34a;
}

.ss-pdp__stock-badge--outofstock {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.ss-pdp__stock-badge--outofstock .ss-pdp__stock-dot {
    background: #dc2626;
    animation: none;
}

.ss-pdp__stock-badge--backorder {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.ss-pdp__stock-badge--backorder .ss-pdp__stock-dot {
    background: #d97706;
}

/* Actions */
.ss-pdp__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Quantity Input */
.ss-pdp__qty {
    display: inline-flex;
    align-items: center;
    height: 52px;
    border: 1px solid var(--ss-color-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.ss-pdp__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 100%;
    border: none;
    background: var(--ss-color-bg-secondary);
    color: var(--ss-color-text);
    cursor: pointer;
    transition: background 0.2s;
}

.ss-pdp__qty-btn:hover {
    background: var(--ss-color-bg-tertiary);
}

.ss-pdp__qty-btn svg {
    width: 18px;
    height: 18px;
}

.ss-pdp__qty-input {
    width: 56px;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ss-color-text);
    -moz-appearance: textfield;
}

.ss-pdp__qty-input::-webkit-outer-spin-button,
.ss-pdp__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Buttons */
.ss-pdp__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 52px;
    padding: 0 1.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ss-pdp__btn--primary {
    flex: 1;
    min-width: 200px;
    background: var(--ss-color-primary);
    color: white;
}

.ss-pdp__btn--primary:hover:not(:disabled) {
    background: var(--ss-color-primary-dark, var(--ss-color-primary));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--ss-color-primary-rgb), 0.3);
}

.ss-pdp__btn--primary:disabled,
.ss-pdp__btn--disabled {
    background: var(--ss-color-bg-tertiary);
    color: var(--ss-color-text-tertiary);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ss-pdp__btn--secondary {
    flex: 1;
    min-width: 200px;
    background: var(--ss-color-bg-secondary);
    color: var(--ss-color-text);
    border: 1px solid var(--ss-color-border);
}

.ss-pdp__btn--secondary:hover:not(:disabled) {
    background: var(--ss-color-bg-tertiary);
    border-color: var(--ss-color-text-tertiary);
}

.ss-pdp__btn--icon {
    width: 52px;
    height: 52px;
    padding: 0;
    flex-shrink: 0;
    background: var(--ss-color-bg-secondary);
    color: var(--ss-color-text-secondary);
    border: 1px solid var(--ss-color-border);
}

.ss-pdp__btn--icon:hover {
    background: var(--ss-color-bg-tertiary);
    color: var(--ss-color-danger);
    border-color: var(--ss-color-danger);
}

.ss-pdp__btn--icon.is-active {
    background: var(--ss-color-danger);
    color: white;
    border-color: var(--ss-color-danger);
}

.ss-pdp__btn--icon svg {
    width: 22px;
    height: 22px;
}

/* Button Loading State */
.ss-pdp__btn-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.ss-pdp__btn.is-loading .ss-pdp__btn-text {
    visibility: hidden;
}

.ss-pdp__btn.is-loading .ss-pdp__btn-loader {
    display: block;
    position: absolute;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Trust Signals */
.ss-pdp__trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.25rem;
    background: var(--ss-color-bg-secondary);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

.ss-pdp__trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.375rem;
}

.ss-pdp__trust-item svg {
    width: 24px;
    height: 24px;
    color: var(--ss-color-primary);
}

.ss-pdp__trust-item span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ss-color-text-secondary);
    line-height: 1.3;
}

@media (max-width: 480px) {
    .ss-pdp__trust {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .ss-pdp__trust-item {
        flex-direction: row;
        text-align: left;
        gap: 0.75rem;
    }
}

/* Accordions */
.ss-pdp__accordions {
    border-top: 1px solid var(--ss-color-border);
}

.ss-pdp__accordion {
    border-bottom: 1px solid var(--ss-color-border);
}

.ss-pdp__accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.125rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ss-color-text);
    cursor: pointer;
    list-style: none;
}

.ss-pdp__accordion-header::-webkit-details-marker {
    display: none;
}

.ss-pdp__accordion-header svg {
    width: 20px;
    height: 20px;
    color: var(--ss-color-text-tertiary);
    transition: transform 0.2s;
}

.ss-pdp__accordion[open] .ss-pdp__accordion-header svg {
    transform: rotate(180deg);
}

.ss-pdp__accordion-body {
    padding-bottom: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ss-color-text-secondary);
}

.ss-pdp__accordion-body p {
    margin-bottom: 0.75rem;
}

.ss-pdp__accordion-body p:last-child {
    margin-bottom: 0;
}

/* Specifications */
.ss-pdp__specs {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.ss-pdp__spec {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--ss-color-border);
}

.ss-pdp__spec:last-child {
    border-bottom: none;
}

.ss-pdp__spec dt {
    font-weight: 500;
    color: var(--ss-color-text-secondary);
}

.ss-pdp__spec dd {
    margin: 0;
    color: var(--ss-color-text);
}

/* Related Products */
.ss-pdp__related {
    padding-top: 3rem;
    border-top: 1px solid var(--ss-color-border);
}

.ss-pdp__related .ss-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

/* Mobile Sticky Bar */
.ss-pdp__sticky-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--ss-color-surface);
    border-top: 1px solid var(--ss-color-border);
    padding: 0.75rem 1rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1023px) {
    .ss-pdp__sticky-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
}

.ss-pdp__sticky-info {
    flex: 1;
    min-width: 0;
}

.ss-pdp__sticky-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ss-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-pdp__sticky-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ss-color-text);
}

.ss-pdp__sticky-btn {
    flex-shrink: 0;
    height: 44px;
    padding: 0 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--ss-color-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.ss-pdp__sticky-btn:hover:not(:disabled) {
    background: var(--ss-color-primary-dark, var(--ss-color-primary));
}

.ss-pdp__sticky-btn:disabled {
    background: var(--ss-color-bg-tertiary);
    color: var(--ss-color-text-tertiary);
    cursor: not-allowed;
}

/* Lightbox */
.ss-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ss-lightbox.is-open {
    opacity: 1;
}

.ss-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    cursor: zoom-out;
}

.ss-lightbox__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.ss-lightbox__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    color: white;
}

.ss-lightbox__counter {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.ss-lightbox__actions {
    display: flex;
    gap: 0.5rem;
}

.ss-lightbox__btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.ss-lightbox__btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ss-lightbox__btn svg {
    width: 20px;
    height: 20px;
}

.ss-lightbox__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 4rem;
    min-height: 0;
}

.ss-lightbox__image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.ss-lightbox__image-wrapper.is-zoomed {
    cursor: zoom-out;
    overflow: auto;
}

.ss-lightbox__image-wrapper.is-zoomed .ss-lightbox__image {
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    cursor: zoom-out;
}

.ss-lightbox__image {
    max-width: 100%;
    max-height: calc(100vh - 200px);
    object-fit: contain;
    border-radius: 0.5rem;
    transition: opacity 0.15s ease;
    cursor: zoom-in;
    user-select: none;
}

.ss-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.ss-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.05);
}

.ss-lightbox__nav svg {
    width: 24px;
    height: 24px;
}

.ss-lightbox__nav--prev {
    left: 1rem;
}

.ss-lightbox__nav--next {
    right: 1rem;
}

.ss-lightbox__thumbs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ss-lightbox__thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s;
    opacity: 0.6;
}

.ss-lightbox__thumb:hover {
    opacity: 0.8;
}

.ss-lightbox__thumb.is-active {
    border-color: white;
    opacity: 1;
}

.ss-lightbox__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .ss-lightbox__content {
        padding: 0 1rem;
    }
    
    .ss-lightbox__nav {
        width: 40px;
        height: 40px;
    }
    
    .ss-lightbox__nav--prev {
        left: 0.5rem;
    }
    
    .ss-lightbox__nav--next {
        right: 0.5rem;
    }
    
    .ss-lightbox__image {
        max-height: calc(100vh - 180px);
    }
    
    .ss-lightbox__thumbs {
        padding: 0.75rem;
        gap: 0.375rem;
    }
    
    .ss-lightbox__thumb {
        width: 48px;
        height: 48px;
    }
}


/* ==========================================================================
   Search Box
   ========================================================================== */

.ss-search-box {
    display: flex;
    gap: 0.5rem;
}

.ss-search-box--lg .ss-input {
    min-width: 300px;
}


/* Hero Section styles consolidated above in STOREFRONT-SPECIFIC STYLES */


/* ==========================================================================
   Content Loader
   ========================================================================== */

.ss-content-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    grid-column: 1 / -1;
}

.ss-content-loader__spinner {
    margin-bottom: 1rem;
}

.ss-content-loader__text {
    color: var(--ss-color-text-secondary);
    font-size: 0.9rem;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.ss-toast {
    position: fixed;
    bottom: var(--ss-space-6);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-3) var(--ss-space-4);
    background-color: var(--ss-color-surface);
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow-lg);
    z-index: 9999;
    opacity: 0;
    transition: transform var(--ss-duration-300) var(--ss-ease-out),
                opacity var(--ss-duration-300) var(--ss-ease-out);
}

.ss-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.ss-toast--success {
    background-color: var(--ss-color-success);
    color: white;
}

.ss-toast--error {
    background-color: var(--ss-color-danger);
    color: white;
}

.ss-toast--warning {
    background-color: var(--ss-color-warning);
    color: var(--ss-color-text);
}

.ss-toast__message {
    font-size: var(--ss-text-sm);
    font-weight: 500;
}

.ss-toast__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--ss-radius-full);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--ss-duration-150);
}

.ss-toast__close:hover {
    opacity: 1;
}

.ss-toast--success .ss-toast__close,
.ss-toast--error .ss-toast__close {
    color: white;
}

/* ============================================
   CART BADGE ANIMATION
   ============================================ */

@keyframes ss-badge-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

.ss-badge--animated {
    animation: ss-badge-bounce 0.3s ease-out;
}

/* Body scroll lock when drawer is open */
body.ss-drawer-open {
    overflow: hidden;
}

/* ============================================
   CHECKOUT STYLES
   ============================================ */

.ss-checkout-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ss-space-6);
}

@media (min-width: 1024px) {
    .ss-checkout-layout {
        grid-template-columns: 1fr 400px;
    }
}

.ss-checkout__forms {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-6);
}

.ss-checkout__sidebar {
    position: relative;
}

.ss-card--sticky {
    position: sticky;
    top: var(--ss-space-6);
}

/* Guest Checkout Section */
.ss-checkout-user {
    background: var(--ss-color-surface);
}

.ss-checkout-user__logged-in {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
}

.ss-checkout-user__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--ss-radius-full);
    background: var(--ss-color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--ss-font-semibold);
    font-size: var(--ss-text-lg);
    overflow: hidden;
}

.ss-checkout-user__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ss-checkout-user__info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ss-checkout-user__greeting {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
}

.ss-checkout-user__name {
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

.ss-checkout-login-required {
    text-align: center;
    padding: var(--ss-space-6) var(--ss-space-4);
}

.ss-checkout-login-required__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--ss-space-4);
    color: var(--ss-color-primary);
}

.ss-checkout-login-required h3 {
    margin: 0 0 var(--ss-space-2);
    font-size: var(--ss-text-lg);
}

.ss-checkout-login-required p {
    margin: 0 0 var(--ss-space-4);
    color: var(--ss-color-text-secondary);
}

.ss-checkout-login-required__actions {
    display: flex;
    gap: var(--ss-space-3);
    justify-content: center;
    flex-wrap: wrap;
}

.ss-checkout-guest__options {
    display: flex;
    align-items: center;
    gap: var(--ss-space-4);
    flex-wrap: wrap;
}

.ss-checkout-guest__option {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
}

.ss-checkout-guest__label {
    font-size: var(--ss-text-sm);
}

.ss-checkout-guest__divider {
    color: var(--ss-color-text-tertiary);
    font-size: var(--ss-text-sm);
}

.ss-checkout-create-account {
    padding-top: var(--ss-space-4);
    border-top: 1px solid var(--ss-color-border);
}

.ss-checkout-create-account .ss-checkbox-label {
    font-size: var(--ss-text-sm);
}

.ss-checkout-create-account__fields {
    background: var(--ss-color-surface-secondary);
    padding: var(--ss-space-4);
    border-radius: var(--ss-radius-md);
    margin-top: var(--ss-space-3);
}

.ss-password-input {
    position: relative;
}

.ss-password-input .ss-input {
    padding-right: 48px;
}

.ss-password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--ss-color-text-secondary);
    cursor: pointer;
    transition: color var(--ss-duration-150);
}

.ss-password-toggle:hover {
    color: var(--ss-color-text);
}

.ss-password-toggle svg {
    width: 18px;
    height: 18px;
}

/* Order Tracking Page */
.ss-order-tracking {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--ss-space-6) 0;
}

.ss-order-tracking__header {
    text-align: center;
    margin-bottom: var(--ss-space-6);
}

.ss-order-tracking__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--ss-space-4);
    color: var(--ss-color-primary);
}

.ss-order-tracking__form-card {
    margin-bottom: var(--ss-space-4);
}

.ss-order-tracking__help {
    padding: var(--ss-space-4);
}

/* Order Progress Tracker */
.ss-order-progress {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 0 var(--ss-space-4);
}

.ss-order-progress::before {
    content: '';
    position: absolute;
    top: 12px;
    left: calc(var(--ss-space-4) + 12px);
    right: calc(var(--ss-space-4) + 12px);
    height: 2px;
    background: var(--ss-color-border);
}

.ss-order-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ss-space-2);
    position: relative;
    z-index: 1;
}

.ss-order-progress__dot {
    width: 24px;
    height: 24px;
    border-radius: var(--ss-radius-full);
    background: var(--ss-color-surface);
    border: 2px solid var(--ss-color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ss-duration-200);
}

.ss-order-progress__dot svg {
    width: 14px;
    height: 14px;
    color: white;
}

.ss-order-progress__step.is-completed .ss-order-progress__dot {
    background: var(--ss-color-success);
    border-color: var(--ss-color-success);
}

.ss-order-progress__step.is-current .ss-order-progress__dot {
    border-color: var(--ss-color-primary);
    box-shadow: 0 0 0 4px rgba(var(--ss-color-primary-rgb), 0.2);
}

.ss-order-progress__label {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-secondary);
    text-align: center;
    white-space: nowrap;
}

.ss-order-progress__step.is-completed .ss-order-progress__label,
.ss-order-progress__step.is-current .ss-order-progress__label {
    color: var(--ss-color-text);
    font-weight: var(--ss-font-medium);
}

/* Order Tracking Items */
.ss-order-tracking-items {
    border-top: 1px solid var(--ss-color-border);
    padding-top: var(--ss-space-4);
}

.ss-order-tracking-item {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-2) 0;
}

.ss-order-tracking-item__qty {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    min-width: 32px;
}

.ss-order-tracking-item__name {
    flex: 1;
}

.ss-order-tracking-item__price {
    font-weight: var(--ss-font-medium);
}

.ss-order-tracking-total {
    border-top: 1px solid var(--ss-color-border);
}

.ss-order-tracking-address {
    font-style: normal;
}

/* Cart Recovery Pages */
.ss-cart-recovery__header {
    padding: var(--ss-space-6) 0;
}

.ss-cart-recovery__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--ss-space-4);
    color: var(--ss-color-primary);
}

.ss-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    color: var(--ss-color-success);
}

.ss-success-icon svg {
    width: 100%;
    height: 100%;
}

.ss-error-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    color: var(--ss-color-error);
}

.ss-error-icon svg {
    width: 100%;
    height: 100%;
}

.ss-loading-container {
    text-align: center;
    padding: var(--ss-space-8);
}

.ss-unsubscribe__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--ss-space-4);
    color: var(--ss-color-text-secondary);
}

/* Form Row Layouts */
.ss-form-row {
    display: grid;
    gap: var(--ss-space-4);
}

.ss-form-row--2 {
    grid-template-columns: repeat(2, 1fr);
}

.ss-form-row--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
    .ss-form-row--2,
    .ss-form-row--3 {
        grid-template-columns: 1fr;
    }
}

/* Required Label */
.ss-label--required::after {
    content: " *";
    color: var(--ss-color-danger);
}

/* Form Error */
.ss-form-error {
    display: block;
    font-size: var(--ss-text-sm);
    color: var(--ss-color-danger);
    margin-top: var(--ss-space-1);
}

.ss-input--error {
    border-color: var(--ss-color-danger);
}

.ss-input--error:focus {
    box-shadow: 0 0 0 3px rgba(var(--ss-color-danger-rgb), 0.1);
}

/* Select Styles */
.ss-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* Textarea */
.ss-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Radio Card */
.ss-radio-card {
    display: block;
    cursor: pointer;
    margin-bottom: var(--ss-space-3);
}

.ss-radio-card:last-child {
    margin-bottom: 0;
}

.ss-radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ss-radio-card__content {
    padding: var(--ss-space-4);
    border: 2px solid var(--ss-color-border);
    border-radius: var(--ss-radius-lg);
    transition: var(--ss-transition-fast);
}

.ss-radio-card input[type="radio"]:checked + .ss-radio-card__content {
    border-color: var(--ss-color-primary);
    background-color: rgba(var(--ss-color-primary-rgb), 0.05);
}

.ss-radio-card input[type="radio"]:focus + .ss-radio-card__content {
    box-shadow: 0 0 0 3px rgba(var(--ss-color-primary-rgb), 0.2);
}

.ss-radio-card--disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ss-radio-card--disabled .ss-radio-card__content {
    background-color: var(--ss-color-surface-hover);
}

.ss-radio-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ss-space-1);
}

.ss-radio-card__title {
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

.ss-radio-card__price {
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-primary);
}

.ss-radio-card__description {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    margin: 0;
}

.ss-radio-card__icon {
    height: 24px;
    width: auto;
}

/* Checkout Items */
.ss-checkout-items {
    margin-bottom: var(--ss-space-4);
}

.ss-checkout-item {
    display: flex;
    gap: var(--ss-space-3);
    padding: var(--ss-space-3) 0;
    border-bottom: 1px solid var(--ss-color-border-light);
}

.ss-checkout-item:last-child {
    border-bottom: none;
}

.ss-checkout-item__image {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.ss-checkout-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--ss-radius-md);
}

.ss-checkout-item__qty {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background-color: var(--ss-color-primary);
    color: white;
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-semibold);
    border-radius: var(--ss-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ss-checkout-item__details {
    flex: 1;
    min-width: 0;
}

.ss-checkout-item__name {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
    margin: 0 0 var(--ss-space-1);
}

.ss-checkout-item__price {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    margin: 0;
}

/* Checkout Totals */
.ss-checkout-totals {
    border-top: 1px solid var(--ss-color-border-light);
    padding-top: var(--ss-space-4);
}

.ss-checkout-totals__row {
    display: flex;
    justify-content: space-between;
    padding: var(--ss-space-2) 0;
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
}

.ss-checkout-totals__row--total {
    border-top: 1px solid var(--ss-color-border-light);
    margin-top: var(--ss-space-2);
    padding-top: var(--ss-space-3);
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

.ss-checkout-totals__row--discount {
    color: var(--ss-color-success);
}

.ss-checkout-totals__row--discount span:last-child {
    font-weight: var(--ss-font-medium);
}

/* Order Success Page */
.ss-order-success {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--ss-space-8) var(--ss-space-4);
    text-align: center;
}

.ss-order-success__icon {
    margin-bottom: var(--ss-space-6);
}

.ss-order-success__icon svg {
    width: 80px;
    height: 80px;
    color: var(--ss-color-success);
}

.ss-icon--success {
    color: var(--ss-color-success);
}

.ss-icon--sm {
    width: 16px;
    height: 16px;
}

.ss-icon--md {
    width: 20px;
    height: 20px;
}

.ss-icon--lg {
    width: 32px;
    height: 32px;
}

.ss-icon--xl {
    width: 48px;
    height: 48px;
}

.ss-mb-3 {
    margin-bottom: var(--ss-space-3);
}

.ss-order-success__title {
    font-size: var(--ss-text-2xl);
    font-weight: var(--ss-font-bold);
    color: var(--ss-color-text);
    margin: 0 0 var(--ss-space-2);
}

.ss-order-success__subtitle {
    font-size: var(--ss-text-lg);
    color: var(--ss-color-text-secondary);
    margin: 0 0 var(--ss-space-8);
}

.ss-order-success__details {
    background-color: var(--ss-color-surface-hover);
    border-radius: var(--ss-radius-lg);
    padding: var(--ss-space-6);
    margin-bottom: var(--ss-space-8);
}

.ss-order-success__info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ss-space-4);
}

@media (min-width: 640px) {
    .ss-order-success__info {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ss-order-success__info-item {
    text-align: center;
}

.ss-order-success__label {
    display: block;
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--ss-space-1);
}

.ss-order-success__value {
    display: block;
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

.ss-order-success__summary {
    background-color: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border-light);
    border-radius: var(--ss-radius-lg);
    padding: var(--ss-space-6);
    margin-bottom: var(--ss-space-6);
    text-align: left;
}

.ss-order-items {
    margin-bottom: var(--ss-space-4);
}

.ss-order-item {
    display: flex;
    justify-content: space-between;
    padding: var(--ss-space-2) 0;
    border-bottom: 1px solid var(--ss-color-border-light);
}

.ss-order-item:last-child {
    border-bottom: none;
}

.ss-order-item__name {
    color: var(--ss-color-text);
}

.ss-order-item__total {
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
}

.ss-order-totals {
    border-top: 1px solid var(--ss-color-border);
    padding-top: var(--ss-space-4);
}

.ss-order-totals__row {
    display: flex;
    justify-content: space-between;
    padding: var(--ss-space-2) 0;
    color: var(--ss-color-text-secondary);
}

.ss-order-totals__row--total {
    border-top: 1px solid var(--ss-color-border);
    margin-top: var(--ss-space-2);
    padding-top: var(--ss-space-3);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    font-size: var(--ss-text-lg);
}

.ss-order-success__addresses {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ss-space-6);
    margin-bottom: var(--ss-space-8);
    text-align: left;
}

@media (max-width: 640px) {
    .ss-order-success__addresses {
        grid-template-columns: 1fr;
    }
}

.ss-order-success__address address {
    font-style: normal;
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    line-height: 1.6;
}

.ss-order-success__actions {
    display: flex;
    justify-content: center;
    gap: var(--ss-space-4);
}

/* Checkbox styling */
.ss-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--ss-color-primary);
}

/* ============================================
   PRODUCT VARIATIONS STYLES
   ============================================ */

.ss-product-variations {
    margin-bottom: var(--ss-space-6);
}

.ss-product-variations__attribute {
    margin-bottom: var(--ss-space-4);
}

.ss-product-variations__attribute:last-child {
    margin-bottom: 0;
}

.ss-product-variations__attribute .ss-label {
    display: block;
    margin-bottom: var(--ss-space-2);
    font-weight: var(--ss-font-semibold);
}

/* Swatch Group */
.ss-swatch-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-2);
}

/* Base Swatch */
.ss-swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--ss-color-border);
    border-radius: var(--ss-radius-md);
    transition: var(--ss-transition-fast);
    background: var(--ss-color-surface);
}

.ss-swatch:hover {
    border-color: var(--ss-color-text-secondary);
}

.ss-swatch.is-active {
    border-color: var(--ss-color-primary);
    box-shadow: 0 0 0 2px rgba(var(--ss-color-primary-rgb), 0.2);
}

.ss-swatch:disabled,
.ss-swatch.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Color Swatch */
.ss-swatch--color {
    width: 36px;
    height: 36px;
    border-radius: var(--ss-radius-full);
    padding: 0;
}

.ss-swatch--color.is-active::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid white;
    border-radius: var(--ss-radius-full);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Light colors need different checkmark */
.ss-swatch--color[style*="white"],
.ss-swatch--color[style*="#fff"],
.ss-swatch--color[style*="ivory"],
.ss-swatch--color[style*="beige"] {
    border-color: var(--ss-color-border);
}

/* Button Swatch */
.ss-swatch--button {
    min-width: 48px;
    height: 40px;
    padding: 0 var(--ss-space-3);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
}

/* Image Swatch */
.ss-swatch--image {
    width: 48px;
    height: 48px;
    padding: 2px;
    overflow: hidden;
}

.ss-swatch--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--ss-radius-md) - 2px);
}

/* Price Range */
.ss-product-info__price-range {
    font-size: var(--ss-text-2xl);
    font-weight: var(--ss-font-bold);
    color: var(--ss-color-text);
}

/* Variation Attributes in Cart */
.ss-cart-item__attributes,
.ss-mini-cart__attributes {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-secondary);
    margin-top: var(--ss-space-1);
}

.ss-cart-item__attribute,
.ss-mini-cart__attribute {
    display: inline;
}

.ss-cart-item__attribute:not(:last-child)::after,
.ss-mini-cart__attribute:not(:last-child)::after {
    content: ', ';
}

/* Price Range in Product Card */
.ss-product-card__price-range {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

/* ============================================
   PRODUCT TABS
   ============================================ */

.ss-product-tabs {
    border-top: 1px solid var(--ss-color-border);
    padding-top: var(--ss-space-8);
}

.ss-product-tabs__nav {
    display: flex;
    gap: var(--ss-space-1);
    border-bottom: 2px solid var(--ss-color-border);
    margin-bottom: var(--ss-space-6);
}

.ss-product-tabs__tab {
    padding: var(--ss-space-3) var(--ss-space-4);
    background: none;
    border: none;
    font-size: var(--ss-text-base);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text-secondary);
    cursor: pointer;
    position: relative;
    transition: color var(--ss-duration-150);
}

.ss-product-tabs__tab:hover {
    color: var(--ss-color-text);
}

.ss-product-tabs__tab.is-active {
    color: var(--ss-color-primary);
}

.ss-product-tabs__tab.is-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ss-color-primary);
}

.ss-product-tabs__panel {
    display: none;
}

.ss-product-tabs__panel.is-active {
    display: block;
    animation: fadeIn 0.2s ease;
}

/* Specifications Table */
.ss-specs-table {
    width: 100%;
    border-collapse: collapse;
}

.ss-specs-table th,
.ss-specs-table td {
    padding: var(--ss-space-3) var(--ss-space-4);
    text-align: left;
    border-bottom: 1px solid var(--ss-color-border);
}

.ss-specs-table th {
    width: 35%;
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text-secondary);
    background: var(--ss-color-bg-secondary);
}

.ss-specs-table td {
    color: var(--ss-color-text);
}

.ss-specs-table tr:last-child th,
.ss-specs-table tr:last-child td {
    border-bottom: none;
}

/* ============================================
   RELATED PRODUCTS
   ============================================ */

.ss-related-products {
    border-top: 1px solid var(--ss-color-border);
    padding-top: var(--ss-space-8);
}

.ss-section-title {
    font-size: var(--ss-text-xl);
    font-weight: var(--ss-font-semibold);
    margin: 0 0 var(--ss-space-6) 0;
}

/* ============================================
   IMPROVED VARIATION STYLES
   ============================================ */

.ss-product-variations__selected {
    font-weight: var(--ss-font-normal);
    color: var(--ss-color-text-secondary);
}

.ss-product-variations__message {
    font-size: var(--ss-text-sm);
    margin-top: var(--ss-space-3);
    padding: var(--ss-space-2) var(--ss-space-3);
    border-radius: var(--ss-radius-md);
    display: none;
}

.ss-product-variations__message:not(:empty) {
    display: block;
}

.ss-product-variations__message--error {
    background: var(--ss-color-danger-soft);
    color: var(--ss-color-danger);
}

.ss-product-variations__message--success {
    background: var(--ss-color-success-soft);
    color: var(--ss-color-success);
}

/* Stock Status - Backorder */
.ss-product-info__stock--backorder {
    color: var(--ss-color-warning);
}

/* Improved Color Swatch */
.ss-swatch--color {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.ss-swatch--color.is-active {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 2px var(--ss-color-primary);
}

/* Dark mode color swatch adjustments */
[data-theme="dark"] .ss-swatch--color {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .ss-swatch--color.is-active {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 2px var(--ss-color-primary);
}

/* Improved Quantity Input */
.ss-quantity--lg {
    height: 48px;
}

.ss-quantity--lg .ss-quantity__btn {
    width: 48px;
    font-size: 1.25rem;
}

.ss-quantity--lg .ss-quantity__input {
    font-size: 1rem;
    min-width: 60px;
}

/* Add to Cart Button Loading State */
.ss-product-info__add-to-cart .ss-btn.is-loading {
    position: relative;
    color: transparent;
}

.ss-product-info__add-to-cart .ss-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Product Card Improvements */
.ss-product-card__badge {
    position: absolute;
    top: var(--ss-space-3);
    left: var(--ss-space-3);
    padding: var(--ss-space-1) var(--ss-space-2);
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-radius: var(--ss-radius-sm);
    z-index: 1;
}

.ss-product-card__badge--sale {
    background: var(--ss-color-danger);
    color: white;
}

.ss-product-card__badge--new {
    background: var(--ss-color-primary);
    color: white;
}

.ss-product-card__badge--featured {
    background: var(--ss-color-warning);
    color: var(--ss-color-text);
}

.ss-product-card__badge--soldout {
    background: var(--ss-color-text-tertiary);
    color: white;
}

/* Mobile Responsive Improvements */
@media (max-width: 767px) {
    .ss-product-detail {
        gap: var(--ss-space-6);
    }
    
    .ss-product-info__title {
        font-size: 1.5rem;
    }
    
    .ss-product-info__price-current,
    .ss-product-info__price-sale {
        font-size: 1.5rem;
    }
    
    .ss-product-info__add-to-cart {
        flex-direction: column;
    }
    
    .ss-product-info__add-to-cart .ss-quantity {
        width: 100%;
        justify-content: center;
    }
    
    .ss-product-info__add-to-cart .ss-btn {
        width: 100%;
    }
    
    .ss-product-tabs__nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .ss-product-tabs__tab {
        white-space: nowrap;
        padding: var(--ss-space-2) var(--ss-space-3);
        font-size: var(--ss-text-sm);
    }
    
    .ss-swatch-group {
        gap: var(--ss-space-3);
    }
    
    .ss-swatch--color {
        width: 40px;
        height: 40px;
    }
    
    .ss-swatch--button {
        min-width: 52px;
        height: 44px;
    }
}

/* ============================================
   FILTER SIDEBAR STYLES
   ============================================ */

/* Shop Layout with Sidebar */
.ss-shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--ss-space-8);
}

.ss-shop-main {
    min-width: 0;
}

/* Filter Sidebar */
.ss-filter-sidebar {
    background: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-lg);
    padding: var(--ss-space-4);
    position: sticky;
    top: calc(var(--ss-space-4) + 70px);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

/* Hidden on desktop - shown on mobile */
.ss-filter-backdrop {
    display: none;
}

.ss-filter-sidebar__close {
    display: none;
}

.ss-filter-sidebar__footer {
    display: none;
}

.ss-filter-sidebar__header-actions {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
}

.ss-filter-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ss-space-4);
    padding-bottom: var(--ss-space-3);
    border-bottom: 1px solid var(--ss-color-border);
}

.ss-filter-sidebar__title {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-semibold);
    margin: 0;
}

.ss-filter-sidebar__content {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-4);
}

/* Filter Group */
.ss-filter-group {
    padding-bottom: var(--ss-space-4);
    border-bottom: 1px solid var(--ss-color-border);
}

.ss-filter-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ss-filter-group__title {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    margin: 0 0 var(--ss-space-3) 0;
    color: var(--ss-color-text);
}

.ss-filter-group__content {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-2);
}

/* Filter Checkbox */
.ss-filter-checkbox {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
    cursor: pointer;
    font-size: var(--ss-text-sm);
}

.ss-filter-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ss-color-primary);
    cursor: pointer;
}

.ss-filter-checkbox__label {
    flex: 1;
    color: var(--ss-color-text);
}

.ss-filter-checkbox__count {
    color: var(--ss-color-text-secondary);
    font-size: var(--ss-text-xs);
}

/* Filter Colors */
.ss-filter-colors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-2);
}

.ss-filter-color {
    width: 28px;
    height: 28px;
    border-radius: var(--ss-radius-full);
    border: 2px solid var(--ss-color-border);
    cursor: pointer;
    transition: var(--ss-transition-fast);
}

.ss-filter-color:hover {
    transform: scale(1.1);
}

.ss-filter-color.is-active {
    border-color: var(--ss-color-primary);
    box-shadow: 0 0 0 2px rgba(var(--ss-color-primary-rgb), 0.3);
}

/* Price Filter */
.ss-price-filter__inputs {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
}

.ss-price-filter__inputs .ss-input {
    flex: 1;
    text-align: center;
}

.ss-price-filter__separator {
    color: var(--ss-color-text-secondary);
}

/* =====================================
   Enhanced Search Page Styles
   ===================================== */

/* Search Header */
.ss-search-header {
    position: relative;
    max-width: 720px;
    margin: 0 auto var(--ss-space-6);
}

.ss-search-header__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.ss-search-header__icon {
    position: absolute;
    inset-inline-start: var(--ss-space-4);
    width: 20px;
    height: 20px;
    color: var(--ss-color-text-secondary);
    pointer-events: none;
}

.ss-search-header__input {
    width: 100%;
    padding: var(--ss-space-4) var(--ss-space-12);
    font-size: var(--ss-text-lg);
    border: 2px solid var(--ss-color-border);
    border-radius: var(--ss-radius-xl);
    background: var(--ss-color-surface);
    color: var(--ss-color-text);
    transition: all var(--ss-duration-150);
}

.ss-search-header__input:focus {
    outline: none;
    border-color: var(--ss-primary-500);
    box-shadow: 0 0 0 4px var(--ss-primary-100);
}

[data-theme="dark"] .ss-search-header__input:focus {
    box-shadow: 0 0 0 4px rgba(var(--ss-primary-500-rgb), 0.2);
}

.ss-search-header__clear {
    position: absolute;
    inset-inline-end: var(--ss-space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--ss-neutral-100);
    border: none;
    border-radius: var(--ss-radius-full);
    color: var(--ss-color-text-secondary);
    cursor: pointer;
    transition: all var(--ss-duration-150);
}

.ss-search-header__clear:hover {
    background: var(--ss-neutral-200);
    color: var(--ss-color-text);
}

/* Search Suggestions Dropdown */
.ss-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--ss-space-2);
    background: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow-lg);
    overflow: hidden;
    z-index: 100;
}

.ss-search-suggestions__group {
    padding: var(--ss-space-2) 0;
}

.ss-search-suggestions__title {
    padding: var(--ss-space-2) var(--ss-space-4);
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ss-color-text-secondary);
}

.ss-search-suggestions__item {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-3) var(--ss-space-4);
    color: var(--ss-color-text);
    text-decoration: none;
    transition: background-color var(--ss-duration-150);
}

.ss-search-suggestions__item:hover {
    background: var(--ss-neutral-100);
}

[data-theme="dark"] .ss-search-suggestions__item:hover {
    background: var(--ss-neutral-800);
}

.ss-search-suggestions__item svg {
    width: 16px;
    height: 16px;
    color: var(--ss-color-text-secondary);
}

.ss-search-suggestions__item--category svg {
    color: var(--ss-primary-500);
}

.ss-search-suggestions__action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ss-space-3) var(--ss-space-4);
    background: var(--ss-neutral-50);
    color: var(--ss-primary-600);
    font-weight: var(--ss-font-medium);
    text-decoration: none;
    border-top: 1px solid var(--ss-color-border);
}

.ss-search-suggestions__action svg {
    width: 16px;
    height: 16px;
}

/* Search Meta */
.ss-search-meta {
    margin-bottom: var(--ss-space-6);
}

.ss-search-meta__title {
    font-size: var(--ss-text-xl);
    font-weight: var(--ss-font-semibold);
    margin: 0;
}

.ss-search-meta__title span {
    color: var(--ss-primary-600);
}

/* Search Empty State */
.ss-search-empty {
    max-width: 600px;
    margin: var(--ss-space-12) auto;
    text-align: center;
}

.ss-search-empty__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--ss-space-4);
    color: var(--ss-neutral-300);
}

.ss-search-empty__title {
    font-size: var(--ss-text-xl);
    font-weight: var(--ss-font-bold);
    margin-bottom: var(--ss-space-2);
}

.ss-search-empty__text {
    color: var(--ss-color-text-secondary);
    margin-bottom: var(--ss-space-8);
}

.ss-search-empty__section {
    text-align: left;
    margin-bottom: var(--ss-space-6);
}

.ss-search-empty__section-title {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text-secondary);
    margin-bottom: var(--ss-space-3);
}

.ss-search-empty__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-2);
}

.ss-search-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-2);
    padding: var(--ss-space-2) var(--ss-space-3);
    background: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-full);
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text);
    cursor: pointer;
    transition: all var(--ss-duration-150);
}

.ss-search-tag:hover {
    border-color: var(--ss-primary-500);
    color: var(--ss-primary-600);
}

.ss-search-tag svg {
    width: 14px;
    height: 14px;
    color: var(--ss-color-text-secondary);
}

.ss-search-tag--clear {
    background: transparent;
    color: var(--ss-color-text-secondary);
}

.ss-search-tag--clear:hover {
    color: var(--ss-error-600);
    border-color: var(--ss-error-300);
}

/* Search Category Cards */
.ss-search-empty__categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--ss-space-3);
}

.ss-search-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--ss-space-4);
    background: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-lg);
    text-decoration: none;
    transition: all var(--ss-duration-150);
}

.ss-search-category-card:hover {
    border-color: var(--ss-primary-500);
    transform: translateY(-2px);
    box-shadow: var(--ss-shadow-md);
}

.ss-search-category-card__image {
    width: 48px;
    height: 48px;
    margin-bottom: var(--ss-space-2);
    border-radius: var(--ss-radius-md);
    overflow: hidden;
    background: var(--ss-neutral-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-neutral-400);
}

.ss-search-category-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ss-search-category-card__name {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
    text-align: center;
}

.ss-search-category-card__count {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-secondary);
}

/* =====================================
   Enhanced Filter Styles
   ===================================== */

/* Filter Accordion */
.ss-filter-accordion {
    border-bottom: 1px solid var(--ss-color-border);
}

.ss-filter-accordion:last-child {
    border-bottom: none;
}

.ss-filter-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--ss-space-4) 0;
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
    cursor: pointer;
    list-style: none;
}

.ss-filter-accordion__header::-webkit-details-marker {
    display: none;
}

.ss-filter-accordion__title {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
}

.ss-filter-accordion__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--ss-space-1);
    background: var(--ss-primary-500);
    color: white;
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-medium);
    border-radius: var(--ss-radius-full);
}

.ss-filter-accordion__icon {
    width: 16px;
    height: 16px;
    color: var(--ss-color-text-secondary);
    transition: transform var(--ss-duration-200);
}

.ss-filter-accordion[open] .ss-filter-accordion__icon {
    transform: rotate(180deg);
}

.ss-filter-accordion__content {
    padding-bottom: var(--ss-space-4);
}

/* Filter Checkbox */
.ss-filter-checkbox {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
    padding: var(--ss-space-2) 0;
    cursor: pointer;
    user-select: none;
}

.ss-filter-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ss-filter-checkbox__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ss-neutral-300);
    border-radius: var(--ss-radius-sm);
    color: transparent;
    transition: all var(--ss-duration-150);
}

.ss-filter-checkbox__check svg {
    width: 12px;
    height: 12px;
}

.ss-filter-checkbox input:checked + .ss-filter-checkbox__check {
    background: var(--ss-primary-500);
    border-color: var(--ss-primary-500);
    color: white;
}

.ss-filter-checkbox:hover .ss-filter-checkbox__check {
    border-color: var(--ss-primary-400);
}

.ss-filter-checkbox__label {
    flex: 1;
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text);
}

.ss-filter-checkbox__count {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-secondary);
}

/* Filter Radio */
.ss-filter-radio {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
    padding: var(--ss-space-2) 0;
    cursor: pointer;
}

.ss-filter-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ss-filter-radio__mark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--ss-neutral-300);
    border-radius: var(--ss-radius-full);
    transition: all var(--ss-duration-150);
}

.ss-filter-radio input:checked + .ss-filter-radio__mark {
    border-color: var(--ss-primary-500);
    border-width: 5px;
}

.ss-filter-radio:hover .ss-filter-radio__mark {
    border-color: var(--ss-primary-400);
}

.ss-filter-radio__stars {
    display: flex;
    gap: 1px;
}

.ss-filter-radio__label {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
}

/* Filter Colors */
.ss-filter-colors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-2);
}

.ss-filter-color {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: var(--ss-radius-full);
    border: 2px solid transparent;
    background: var(--swatch-color, #ccc);
    cursor: pointer;
    transition: all var(--ss-duration-150);
    padding: 0;
}

.ss-filter-color::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--ss-radius-full);
    border: 2px solid transparent;
    transition: border-color var(--ss-duration-150);
}

.ss-filter-color:hover::before,
.ss-filter-color.is-active::before {
    border-color: var(--ss-primary-500);
}

.ss-filter-color__check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
}

.ss-filter-color.is-active .ss-filter-color__check {
    opacity: 1;
}

.ss-filter-color__check svg {
    width: 14px;
    height: 14px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* Filter Category Tree */
.ss-filter-category {
    padding-inline-start: calc(var(--level, 0) * var(--ss-space-4));
}

/* Show More Button */
.ss-filter-show-more {
    display: flex;
    align-items: center;
    gap: var(--ss-space-1);
    padding: var(--ss-space-2) 0;
    background: none;
    border: none;
    color: var(--ss-primary-600);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    cursor: pointer;
}

.ss-filter-show-more__icon {
    width: 16px;
    height: 16px;
    transition: transform var(--ss-duration-200);
}

.ss-filter-show-more.is-expanded .ss-filter-show-more__icon {
    transform: rotate(180deg);
}

/* Price Filter Enhanced */
.ss-price-filter__range {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ss-space-3);
}

.ss-price-filter__label {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
}

.ss-price-filter__slider {
    position: relative;
    height: 24px;
    margin-bottom: var(--ss-space-3);
}

.ss-price-filter__input {
    position: absolute;
    width: 100%;
    height: 4px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.ss-price-filter__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--ss-primary-500);
    border-radius: var(--ss-radius-full);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: var(--ss-shadow-sm);
}

.ss-price-filter__input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--ss-primary-500);
    border: none;
    border-radius: var(--ss-radius-full);
    cursor: pointer;
    pointer-events: auto;
}

.ss-price-filter__input--min {
    z-index: 1;
}

.ss-price-filter__input-group {
    position: relative;
    flex: 1;
}

.ss-price-filter__currency {
    position: absolute;
    left: var(--ss-space-2);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ss-color-text-secondary);
    font-size: var(--ss-text-sm);
}

.ss-price-filter__input-group .ss-input {
    padding-inline-start: var(--ss-space-6);
}

.ss-price-filter__to {
    color: var(--ss-color-text-secondary);
    font-size: var(--ss-text-sm);
}

/* Shop Controls */
.ss-shop-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-space-4);
    padding: var(--ss-space-3) 0;
    margin-bottom: var(--ss-space-4);
    border-bottom: 1px solid var(--ss-color-border);
}

.ss-shop-controls__start,
.ss-shop-controls__end {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
}

.ss-shop-controls__count {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
}

.ss-shop-controls__sort {
    display: flex;
    align-items: center;
}

/* View Toggle */
.ss-shop-controls__view {
    display: flex;
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-md);
    overflow: hidden;
}

.ss-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--ss-color-surface);
    border: none;
    color: var(--ss-color-text-secondary);
    cursor: pointer;
    transition: all var(--ss-duration-150);
}

.ss-view-btn:not(:last-child) {
    border-inline-end: 1px solid var(--ss-color-border);
}

.ss-view-btn:hover {
    color: var(--ss-color-text);
}

.ss-view-btn.is-active {
    background: var(--ss-primary-500);
    color: white;
}

.ss-view-btn svg {
    width: 18px;
    height: 18px;
}

/* Product Grid List View */
.ss-product-grid--list {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-4);
}

.ss-product-grid--list .ss-product-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--ss-space-4);
}

.ss-product-grid--list .ss-product-card__media {
    aspect-ratio: 1;
}

.ss-product-grid--list .ss-product-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 640px) {
    .ss-product-grid--list .ss-product-card {
        grid-template-columns: 120px 1fr;
    }
}

/* Active Filters Enhanced */
.ss-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-2);
    margin-bottom: var(--ss-space-4);
    padding: var(--ss-space-3);
    background: var(--ss-color-surface);
    border-radius: var(--ss-radius-md);
    border: 1px solid var(--ss-color-border);
}

.ss-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-1);
    padding: var(--ss-space-1) var(--ss-space-2);
    background: var(--ss-primary-100);
    color: var(--ss-primary-700);
    border-radius: var(--ss-radius-full);
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-font-medium);
}

[data-theme="dark"] .ss-filter-tag {
    background: var(--ss-primary-900);
    color: var(--ss-primary-200);
}

.ss-filter-tag__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
    transition: opacity var(--ss-duration-150);
}

.ss-filter-tag__remove:hover {
    opacity: 1;
}

.ss-filter-tag__remove svg {
    width: 14px;
    height: 14px;
}

.ss-filter-tag--clear {
    background: transparent;
    color: var(--ss-color-text-secondary);
    text-decoration: underline;
}

.ss-filter-tag--clear:hover {
    color: var(--ss-error-600);
}

/* Filter Toggle Button */
.ss-filter-toggle {
    display: none;
}

.ss-filter-toggle__count {
    margin-left: var(--ss-space-1);
}

/* Sort Select */
.ss-sort-select {
    width: auto;
    min-width: 160px;
}

/* Mobile Styles */
@media (max-width: 1024px) {
    .ss-shop-layout {
        grid-template-columns: 1fr;
    }
    
    /* Filter Backdrop */
    .ss-filter-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all var(--ss-duration-300);
    }
    
    .ss-filter-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
    }
    
    .ss-filter-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        height: 100vh;
        max-height: 100vh;
        z-index: 1000;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform var(--ss-duration-300) cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
    }
    
    [dir="rtl"] .ss-filter-sidebar {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }
    
    .ss-filter-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15);
    }
    
    .ss-filter-sidebar__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--ss-space-4);
        border-bottom: 1px solid var(--ss-neutral-200);
        flex-shrink: 0;
    }
    
    [data-theme="dark"] .ss-filter-sidebar__header {
        border-bottom-color: var(--ss-neutral-800);
    }
    
    .ss-filter-sidebar__header-actions {
        display: flex;
        align-items: center;
        gap: var(--ss-space-2);
    }
    
    .ss-filter-sidebar__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: var(--ss-neutral-100);
        border: none;
        border-radius: var(--ss-radius-lg);
        color: var(--ss-neutral-600);
        cursor: pointer;
    }
    
    [data-theme="dark"] .ss-filter-sidebar__close {
        background: var(--ss-neutral-800);
        color: var(--ss-neutral-400);
    }
    
    .ss-filter-sidebar__content {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .ss-filter-sidebar__footer {
        display: block;
        padding: var(--ss-space-4);
        border-top: 1px solid var(--ss-neutral-200);
        flex-shrink: 0;
    }
    
    [data-theme="dark"] .ss-filter-sidebar__footer {
        border-top-color: var(--ss-neutral-800);
    }
    
    .ss-filter-toggle {
        display: inline-flex;
    }
    
    body.has-filter-open {
        overflow: hidden;
    }
}

@media (min-width: 1024px) {
    .ss-filter-backdrop {
        display: none !important;
    }
    
    .ss-filter-sidebar__close {
        display: none;
    }
    
    .ss-filter-sidebar__footer {
        display: none;
    }
}

@media (max-width: 640px) {
    .ss-filter-sidebar {
        width: 100%;
    }
    
    .ss-page__actions {
        flex-wrap: wrap;
        gap: var(--ss-space-2);
    }
    
    .ss-sort-select {
        flex: 1;
        min-width: 120px;
    }
}

/* Radio Card Enhancements */
.ss-radio-card {
    display: block;
    cursor: pointer;
    margin-bottom: var(--ss-space-3);
}

.ss-radio-card:last-child {
    margin-bottom: 0;
}

.ss-radio-card input[type="radio"] {
    display: none;
}

.ss-radio-card__content {
    padding: var(--ss-space-4);
    border: 2px solid var(--ss-color-border);
    border-radius: var(--ss-radius-lg);
    transition: var(--ss-transition-fast);
    background: var(--ss-color-surface);
}

.ss-radio-card input[type="radio"]:checked + .ss-radio-card__content {
    border-color: var(--ss-color-primary);
    background: rgba(var(--ss-color-primary-rgb), 0.02);
}

.ss-radio-card input[type="radio"]:focus + .ss-radio-card__content {
    box-shadow: 0 0 0 3px rgba(var(--ss-color-primary-rgb), 0.1);
}

.ss-radio-card:hover .ss-radio-card__content {
    border-color: var(--ss-color-primary-light);
}

.ss-radio-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ss-space-2);
    flex-wrap: wrap;
    gap: var(--ss-space-2);
}

.ss-radio-card__title-wrap {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
}

.ss-radio-card__indicator {
    width: 20px;
    height: 20px;
    border: 2px solid var(--ss-color-border);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    transition: var(--ss-transition-fast);
}

.ss-radio-card__indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ss-color-primary);
    transition: var(--ss-transition-fast);
}

.ss-radio-card input[type="radio"]:checked + .ss-radio-card__content .ss-radio-card__indicator {
    border-color: var(--ss-color-primary);
}

.ss-radio-card input[type="radio"]:checked + .ss-radio-card__content .ss-radio-card__indicator::after {
    transform: translate(-50%, -50%) scale(1);
}

.ss-radio-card__title {
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

.ss-radio-card__price {
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-primary);
}

.ss-radio-card__description {
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    margin: 0;
    padding-left: 32px;
}

.ss-radio-card--disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ss-radio-card--disabled .ss-radio-card__content {
    background: var(--ss-color-surface-secondary);
}

/* Stripe Elements Improvements */
.ss-stripe-elements {
    margin-top: var(--ss-space-4);
    padding: var(--ss-space-4);
    padding-left: 32px;
    border-top: 1px solid var(--ss-color-border);
}

.ss-stripe-card {
    padding: var(--ss-space-3) var(--ss-space-4);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-md);
    background: var(--ss-color-surface);
    transition: var(--ss-transition-fast);
    min-height: 44px;
}

.ss-stripe-card:focus-within {
    border-color: var(--ss-color-primary);
    box-shadow: 0 0 0 3px rgba(var(--ss-color-primary-rgb), 0.1);
}

.ss-stripe-card.StripeElement--invalid {
    border-color: var(--ss-color-error);
}

.ss-stripe-card.StripeElement--complete {
    border-color: var(--ss-color-success);
}

.ss-stripe-errors {
    margin-top: var(--ss-space-2);
    color: var(--ss-color-error);
    font-size: var(--ss-text-sm);
    min-height: 20px;
}

.ss-secure-badge {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
    margin-top: var(--ss-space-3);
    padding: var(--ss-space-2) var(--ss-space-3);
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--ss-radius-md);
    font-size: var(--ss-text-xs);
    color: #059669;
}

.ss-secure-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Payment Icons */
.ss-payment-icons {
    display: flex;
    align-items: center;
    gap: var(--ss-space-1);
}

.ss-payment-icon {
    height: 24px;
    width: auto;
    border-radius: 4px;
}


/* ==========================================================================
   PERFORMANCE & MOBILE UX IMPROVEMENTS
   ========================================================================== */

/* Touch Target Improvements - Google recommends 48x48px minimum */
@media (pointer: coarse) {
    .ss-btn,
    .ss-product-card__actions button,
    .ss-product-card__actions a,
    .ss-nav__link,
    .ss-header-action,
    .ss-mini-cart__item,
    .ss-filter-btn,
    .ss-sort-select,
    .ss-pagination__btn {
        min-height: 48px;
        min-width: 48px;
    }
    
    /* Increase tap targets for quantity buttons */
    .ss-qty__btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Larger checkbox/radio touch areas */
    .ss-checkbox-label,
    .ss-radio-label {
        padding: var(--ss-space-2) 0;
    }
}

/* Skeleton Loading States */
.ss-skeleton {
    background: linear-gradient(
        90deg,
        var(--ss-neutral-200) 25%,
        var(--ss-neutral-100) 50%,
        var(--ss-neutral-200) 75%
    );
    background-size: 200% 100%;
    animation: ss-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--ss-radius-md);
}

@keyframes ss-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ss-skeleton-card {
    aspect-ratio: 1;
}

.ss-skeleton-text {
    height: 1rem;
    margin-bottom: var(--ss-space-2);
}

.ss-skeleton-text--sm {
    height: 0.75rem;
    width: 60%;
}

.ss-skeleton-btn {
    height: 44px;
    margin-top: var(--ss-space-3);
}

/* App Ready State - Fade in content */
.ss-app {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ss-app.is-ready {
    opacity: 1;
}

/* Reduced Motion - Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .ss-skeleton {
        animation: none;
        background: var(--ss-neutral-200);
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .ss-btn--primary {
        border: 2px solid currentColor;
    }
    
    .ss-product-card {
        border-width: 2px;
    }
}

/* Image Loading Optimization */
.ss-product-card__image {
    content-visibility: auto;
    contain-intrinsic-size: 300px 300px;
}

/* Prevent CLS from image loading */
.ss-product-card__image-link {
    aspect-ratio: 1;
    background-color: var(--ss-color-bg-secondary);
}

/* Better image placeholder */
.ss-product-card__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-color-text-tertiary);
    background-color: var(--ss-neutral-100);
}

/* Optimize paint for product grid */
.ss-product-grid {
    contain: layout style;
}

.ss-product-card {
    contain: layout;
    will-change: transform;
}

/* Mobile-specific improvements */
@media (max-width: 640px) {
    /* Increase font size for readability */
    .ss-product-card__title {
        font-size: 1rem;
    }
    
    .ss-product-card__price-current,
    .ss-product-card__price-sale {
        font-size: 1.125rem;
    }
    
    /* Full-width buttons on mobile */
    .ss-product-card__actions .ss-btn {
        width: 100%;
        padding: var(--ss-space-3) var(--ss-space-4);
    }
    
    /* Larger close buttons */
    .ss-modal__close,
    .ss-drawer__close {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Better mobile cart */
    .ss-mini-cart__remove {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Safe area for mobile notches */
@supports (padding: max(0px)) {
    .ss-header {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    
    .ss-footer {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }
}

/* Improve focus visibility */
:focus-visible {
    outline: 2px solid var(--ss-color-primary);
    outline-offset: 2px;
}

/* Skip to content link for accessibility */
.ss-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ss-color-primary);
    color: white;
    padding: var(--ss-space-2) var(--ss-space-4);
    border-radius: var(--ss-radius-md);
    z-index: 10000;
    text-decoration: none;
}

.ss-skip-link:focus {
    top: var(--ss-space-2);
}

/* ============================================
   MOBILE BOTTOM NAVIGATION
   ============================================ */

.ss-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid var(--ss-neutral-200);
    padding: var(--ss-space-2) var(--ss-space-1);
    padding-bottom: max(var(--ss-space-2), env(safe-area-inset-bottom));
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .ss-bottom-nav {
    background: var(--ss-neutral-900);
    border-top-color: var(--ss-neutral-800);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
    .ss-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    /* Add padding to main content for bottom nav */
    .ss-store-content {
        padding-bottom: 80px;
    }
    
    /* Hide footer on mobile - bottom nav serves navigation */
    .ss-store-footer {
        padding-bottom: 100px;
    }
}

.ss-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--ss-space-1) var(--ss-space-2);
    min-width: 56px;
    min-height: 48px;
    color: var(--ss-neutral-500);
    text-decoration: none;
    font-size: 10px;
    font-weight: var(--ss-font-medium);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--ss-duration-150);
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.ss-bottom-nav__item svg {
    width: 22px;
    height: 22px;
    transition: transform var(--ss-duration-150);
}

/* Active state uses theme primary color */
.ss-bottom-nav__item.is-active {
    color: var(--ss-color-primary, var(--ss-primary-600));
}

[data-theme="dark"] .ss-bottom-nav__item.is-active {
    color: var(--ss-color-primary, var(--ss-primary-400));
}

.ss-bottom-nav__item:active svg {
    transform: scale(0.9);
}

.ss-bottom-nav__item--cart {
    position: relative;
}

/* Badge uses theme primary color */
.ss-bottom-nav__badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--ss-color-primary, var(--ss-primary-600));
    color: #ffffff;
    font-size: 10px;
    font-weight: var(--ss-font-bold);
    border-radius: var(--ss-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   MOBILE MENU (SLIDE-OUT)
   ============================================ */

.ss-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
}

.ss-mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
}

.ss-mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity var(--ss-duration-300);
}

.ss-mobile-menu.is-open .ss-mobile-menu__backdrop {
    opacity: 1;
}

.ss-mobile-menu__panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--ss-duration-300) cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15);
}

[dir="rtl"] .ss-mobile-menu__panel {
    left: auto;
    right: 0;
    transform: translateX(100%);
}

.ss-mobile-menu.is-open .ss-mobile-menu__panel {
    transform: translateX(0);
}

[data-theme="dark"] .ss-mobile-menu__panel {
    background: var(--ss-neutral-900);
}

/* Mobile Menu Header */
.ss-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ss-space-4);
    border-bottom: 1px solid var(--ss-neutral-200);
}

[data-theme="dark"] .ss-mobile-menu__header {
    border-bottom-color: var(--ss-neutral-800);
}

.ss-mobile-menu__logo {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    text-decoration: none;
}

.ss-mobile-menu__logo-mark {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--ss-color-primary, var(--ss-primary-500)) 0%, var(--ss-color-primary-hover, var(--ss-primary-700)) 100%);
    border-radius: var(--ss-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-bold);
}

.ss-mobile-menu__logo span {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-bold);
    color: var(--ss-neutral-900);
}

[data-theme="dark"] .ss-mobile-menu__logo span {
    color: #ffffff;
}

.ss-mobile-menu__close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ss-neutral-100);
    border: none;
    border-radius: var(--ss-radius-lg);
    color: var(--ss-neutral-600);
    cursor: pointer;
}

.ss-mobile-menu__close:active {
    background: var(--ss-neutral-200);
}

[data-theme="dark"] .ss-mobile-menu__close {
    background: var(--ss-neutral-800);
    color: var(--ss-neutral-400);
}

/* Mobile Menu Search */
.ss-mobile-menu__search {
    padding: var(--ss-space-3) var(--ss-space-4);
    border-bottom: 1px solid var(--ss-neutral-100);
}

[data-theme="dark"] .ss-mobile-menu__search {
    border-bottom-color: var(--ss-neutral-800);
}

.ss-mobile-menu__search-input {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-3);
    background: var(--ss-neutral-100);
    border-radius: var(--ss-radius-lg);
}

[data-theme="dark"] .ss-mobile-menu__search-input {
    background: var(--ss-neutral-800);
}

.ss-mobile-menu__search-input svg {
    width: 20px;
    height: 20px;
    color: var(--ss-neutral-400);
    flex-shrink: 0;
}

.ss-mobile-menu__search-input input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--ss-text-base);
    color: var(--ss-neutral-900);
}

.ss-mobile-menu__search-input input::placeholder {
    color: var(--ss-neutral-400);
}

[data-theme="dark"] .ss-mobile-menu__search-input input {
    color: #ffffff;
}

/* Mobile Menu Navigation */
.ss-mobile-menu__nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--ss-space-2) 0;
    -webkit-overflow-scrolling: touch;
}

.ss-mobile-menu__section-title {
    padding: var(--ss-space-3) var(--ss-space-4) var(--ss-space-2);
    font-size: 11px;
    font-weight: var(--ss-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ss-neutral-400);
}

.ss-mobile-menu__divider {
    height: 1px;
    background: var(--ss-neutral-100);
    margin: var(--ss-space-2) var(--ss-space-4);
}

[data-theme="dark"] .ss-mobile-menu__divider {
    background: var(--ss-neutral-800);
}

.ss-mobile-menu__item {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-3) var(--ss-space-4);
    color: var(--ss-neutral-700);
    text-decoration: none;
    font-size: var(--ss-text-base);
    font-weight: var(--ss-font-medium);
    transition: background-color var(--ss-duration-150);
    -webkit-tap-highlight-color: transparent;
}

.ss-mobile-menu__item:active {
    background: var(--ss-neutral-100);
}

[data-theme="dark"] .ss-mobile-menu__item {
    color: var(--ss-neutral-300);
}

[data-theme="dark"] .ss-mobile-menu__item:active {
    background: var(--ss-neutral-800);
}

.ss-mobile-menu__item svg {
    width: 22px;
    height: 22px;
    color: var(--ss-neutral-500);
    flex-shrink: 0;
}

.ss-mobile-menu__item--sub {
    padding-left: var(--ss-space-6);
    font-size: var(--ss-text-sm);
}

[dir="rtl"] .ss-mobile-menu__item--sub {
    padding-left: var(--ss-space-4);
    padding-right: var(--ss-space-6);
}

.ss-mobile-menu__count {
    margin-left: auto;
    padding: 2px 8px;
    background: var(--ss-neutral-100);
    border-radius: var(--ss-radius-full);
    font-size: var(--ss-text-xs);
    color: var(--ss-neutral-500);
}

[dir="rtl"] .ss-mobile-menu__count {
    margin-left: 0;
    margin-right: auto;
}

[data-theme="dark"] .ss-mobile-menu__count {
    background: var(--ss-neutral-800);
    color: var(--ss-neutral-400);
}

.ss-mobile-menu__badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--ss-color-primary, var(--ss-primary-600));
    color: #ffffff;
    font-size: 11px;
    font-weight: var(--ss-font-semibold);
    border-radius: var(--ss-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

[dir="rtl"] .ss-mobile-menu__badge {
    margin-left: 0;
    margin-right: auto;
}

/* Mobile Menu Footer */
.ss-mobile-menu__footer {
    padding: var(--ss-space-4);
    border-top: 1px solid var(--ss-neutral-200);
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-2);
}

[data-theme="dark"] .ss-mobile-menu__footer {
    border-top-color: var(--ss-neutral-800);
}

.ss-mobile-menu__theme-toggle,
.ss-mobile-menu__logout {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-3);
    background: var(--ss-neutral-100);
    border: none;
    border-radius: var(--ss-radius-lg);
    color: var(--ss-neutral-700);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    cursor: pointer;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

.ss-mobile-menu__theme-toggle:active,
.ss-mobile-menu__logout:active {
    background: var(--ss-neutral-200);
}

[data-theme="dark"] .ss-mobile-menu__theme-toggle,
[data-theme="dark"] .ss-mobile-menu__logout {
    background: var(--ss-neutral-800);
    color: var(--ss-neutral-300);
}

.ss-mobile-menu__theme-toggle svg,
.ss-mobile-menu__logout svg {
    width: 20px;
    height: 20px;
}

.ss-mobile-menu__logout {
    color: var(--ss-error-600);
}

[data-theme="dark"] .ss-mobile-menu__logout {
    color: var(--ss-error-400);
}

/* ============================================
   MOBILE HEADER ADJUSTMENTS
   ============================================ */

@media (max-width: 767px) {
    .ss-store-header__container {
        padding: var(--ss-space-2) var(--ss-space-3);
        min-height: 56px;
    }
    
    .ss-store-header__logo-mark {
        width: 32px;
        height: 32px;
        font-size: var(--ss-text-base);
    }
    
    .ss-store-nav {
        display: none !important;
    }
    
    .ss-store-header__search {
        display: none;
    }
    
    .ss-store-header__action-btn {
        width: 36px;
        height: 36px;
    }
    
    .ss-store-header__action-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .ss-theme-toggle--compact {
        width: 36px;
        height: 36px;
    }
    
    .ss-theme-toggle__track {
        width: 44px;
        height: 24px;
    }
    
    .ss-theme-toggle__thumb {
        width: 18px;
        height: 18px;
    }
    
    .ss-theme-toggle__thumb.is-dark {
        transform: translateX(20px);
    }
}

/* ============================================
   MOBILE PRODUCT CARDS
   ============================================ */

@media (max-width: 767px) {
    .ss-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ss-space-3);
        padding: var(--ss-space-3);
    }
    
    .ss-product-card {
        border-radius: var(--ss-radius-lg);
    }
    
    .ss-product-card__content {
        padding: var(--ss-space-3);
    }
    
    .ss-product-card__name {
        font-size: var(--ss-text-sm);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .ss-product-card__price {
        font-size: var(--ss-text-sm);
    }
    
    .ss-product-card__actions {
        padding: var(--ss-space-2) var(--ss-space-3) var(--ss-space-3);
    }
    
    .ss-product-card__add-btn {
        padding: var(--ss-space-2);
        min-height: 40px;
        font-size: var(--ss-text-sm);
    }
    
    /* Quick view hidden on mobile */
    .ss-product-card__quick-view {
        display: none !important;
    }
}

/* ============================================
   MOBILE PRODUCT PAGE
   ============================================ */

@media (max-width: 767px) {
    .ss-product-detail {
        display: flex;
        flex-direction: column;
    }
    
    .ss-product-detail__gallery {
        position: relative;
        aspect-ratio: 1;
    }
    
    .ss-product-detail__info {
        padding: var(--ss-space-4);
    }
    
    .ss-product-detail__title {
        font-size: var(--ss-text-xl);
    }
    
    .ss-product-detail__price {
        font-size: var(--ss-text-2xl);
    }
    
    .ss-product-detail__add-btn {
        position: fixed;
        bottom: 70px; /* Above bottom nav */
        left: var(--ss-space-4);
        right: var(--ss-space-4);
        z-index: 100;
        padding: var(--ss-space-4);
        font-size: var(--ss-text-base);
        border-radius: var(--ss-radius-xl);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    }
}

/* ============================================
   MOBILE CART & CHECKOUT
   ============================================ */

@media (max-width: 767px) {
    .ss-cart-page,
    .ss-checkout-page {
        padding: var(--ss-space-3);
    }
    
    .ss-cart-item {
        flex-direction: row;
        gap: var(--ss-space-3);
        padding: var(--ss-space-3);
    }
    
    .ss-cart-item__image {
        width: 80px;
        height: 80px;
    }
    
    .ss-cart-item__info {
        flex: 1;
        min-width: 0;
    }
    
    .ss-cart-item__name {
        font-size: var(--ss-text-sm);
    }
    
    .ss-cart-item__price {
        font-size: var(--ss-text-sm);
    }
    
    .ss-cart-item__quantity {
        margin-top: var(--ss-space-2);
    }
    
    .ss-checkout-form {
        display: flex;
        flex-direction: column;
        gap: var(--ss-space-4);
    }
    
    .ss-checkout-summary {
        order: -1;
        position: relative;
        top: 0;
    }
}

/* ============================================
   MOBILE FORMS
   ============================================ */

@media (max-width: 767px) {
    .ss-form-row {
        flex-direction: column;
    }
    
    .ss-input,
    .ss-select,
    .ss-textarea {
        font-size: 16px; /* Prevents iOS zoom */
        min-height: 48px;
    }
    
    .ss-btn {
        min-height: 48px;
        font-size: var(--ss-text-base);
    }
    
    .ss-btn--full-mobile {
        width: 100%;
    }
}

/* ============================================
   MOBILE FILTERS
   ============================================ */

@media (max-width: 767px) {
    .ss-filters {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: #ffffff;
        transform: translateX(-100%);
        transition: transform var(--ss-duration-300);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    [data-theme="dark"] .ss-filters {
        background: var(--ss-neutral-900);
    }
    
    .ss-filters.is-open {
        transform: translateX(0);
    }
    
    .ss-filters__header {
        position: sticky;
        top: 0;
        background: inherit;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--ss-space-4);
        border-bottom: 1px solid var(--ss-neutral-200);
        z-index: 1;
    }
    
    [data-theme="dark"] .ss-filters__header {
        border-bottom-color: var(--ss-neutral-800);
    }
    
    .ss-filters__title {
        font-size: var(--ss-text-lg);
        font-weight: var(--ss-font-semibold);
    }
    
    .ss-filters__close {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--ss-neutral-100);
        border: none;
        border-radius: var(--ss-radius-lg);
        cursor: pointer;
    }
    
    [data-theme="dark"] .ss-filters__close {
        background: var(--ss-neutral-800);
    }
    
    .ss-filter-toggle-btn {
        display: flex;
        align-items: center;
        gap: var(--ss-space-2);
        padding: var(--ss-space-3) var(--ss-space-4);
        background: var(--ss-neutral-100);
        border: none;
        border-radius: var(--ss-radius-lg);
        font-size: var(--ss-text-sm);
        font-weight: var(--ss-font-medium);
        color: var(--ss-neutral-700);
        cursor: pointer;
    }
    
    [data-theme="dark"] .ss-filter-toggle-btn {
        background: var(--ss-neutral-800);
        color: var(--ss-neutral-300);
    }
}

/* ============================================
   MOBILE TYPOGRAPHY & SPACING
   ============================================ */

@media (max-width: 767px) {
    .ss-page-title {
        font-size: var(--ss-text-2xl);
        margin-bottom: var(--ss-space-4);
    }
    
    .ss-section-title {
        font-size: var(--ss-text-xl);
    }
    
    .ss-store-container {
        padding: var(--ss-space-4);
    }
    
    .ss-empty {
        padding: var(--ss-space-8) var(--ss-space-4);
    }
    
    .ss-empty__icon {
        width: 48px;
        height: 48px;
    }
    
    .ss-empty__title {
        font-size: var(--ss-text-lg);
    }
}

/* ============================================
   MOBILE FOOTER
   ============================================ */

@media (max-width: 767px) {
    .ss-store-footer {
        padding: var(--ss-space-8) var(--ss-space-4);
        padding-bottom: calc(80px + var(--ss-space-8));
    }
    
    .ss-store-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--ss-space-6);
    }
    
    .ss-store-footer__section-title {
        font-size: var(--ss-text-sm);
    }
    
    .ss-store-footer__bottom {
        flex-direction: column;
        gap: var(--ss-space-4);
        text-align: center;
    }
}

/* ============================================
   TOUCH OPTIMIZATIONS
   ============================================ */

@media (pointer: coarse) {
    /* Larger touch targets */
    .ss-btn,
    .ss-product-card__add-btn,
    .ss-quantity-btn,
    .ss-nav__item,
    .ss-bottom-nav__item {
        min-height: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .ss-product-card:hover {
        transform: none;
        box-shadow: var(--ss-shadow-sm);
    }
    
    .ss-product-card:active {
        transform: scale(0.98);
    }
    
    /* Hide decorative hover elements */
    .ss-product-card__overlay {
        display: none;
    }
}

/* ============================================
   SAFE AREA INSETS (for notched devices)
   ============================================ */

@supports (padding: max(0px)) {
    .ss-store-header {
        padding-top: max(0px, env(safe-area-inset-top));
    }
    
    .ss-bottom-nav {
        padding-bottom: max(var(--ss-space-2), env(safe-area-inset-bottom));
    }
    
    .ss-mobile-menu__panel {
        padding-top: max(0px, env(safe-area-inset-top));
    }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */

@media (max-width: 767px) and (orientation: landscape) {
    .ss-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .ss-bottom-nav {
        padding: var(--ss-space-1);
    }
    
    .ss-bottom-nav__item {
        padding: var(--ss-space-1);
        min-height: 40px;
    }
    
    .ss-bottom-nav__item span {
        display: none;
    }
}

/* ==========================================
   Reviews Section
   ========================================== */

.ss-reviews {
    display: grid;
    gap: var(--ss-space-8);
}

/* Reviews Summary Card */
.ss-reviews__summary-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ss-space-8);
    padding: var(--ss-space-6);
    background: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-xl);
}

@media (max-width: 768px) {
    .ss-reviews__summary-card {
        grid-template-columns: 1fr;
        gap: var(--ss-space-6);
    }
}

.ss-reviews__overview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ss-space-4);
    padding-inline-end: var(--ss-space-6);
    border-inline-end: 1px solid var(--ss-color-border);
}

@media (max-width: 768px) {
    .ss-reviews__overview {
        padding-inline-end: 0;
        border-inline-end: none;
        padding-bottom: var(--ss-space-6);
        border-bottom: 1px solid var(--ss-color-border);
    }
}

.ss-reviews__score-display {
    text-align: center;
}

.ss-reviews__score-number {
    display: block;
    font-size: 3.5rem;
    font-weight: var(--ss-font-bold);
    line-height: 1;
    color: var(--ss-color-text);
}

.ss-reviews__score-meta {
    margin-top: var(--ss-space-2);
}

.ss-reviews__stars {
    display: flex;
    justify-content: center;
    gap: 2px;
}

.ss-reviews__stars--lg .ss-star {
    width: 24px;
    height: 24px;
}

.ss-reviews__total {
    display: block;
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    margin-top: var(--ss-space-1);
}

/* Rating Breakdown */
.ss-reviews__breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-2);
    justify-content: center;
}

.ss-reviews__bar-row {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
    padding: var(--ss-space-1) var(--ss-space-2);
    border-radius: var(--ss-radius-md);
    cursor: pointer;
    transition: background-color var(--ss-duration-150);
}

.ss-reviews__bar-row:hover {
    background-color: var(--ss-neutral-100);
}

[data-theme="dark"] .ss-reviews__bar-row:hover {
    background-color: var(--ss-neutral-800);
}

.ss-reviews__bar-label {
    width: 1ch;
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
}

.ss-reviews__bar-star {
    width: 14px;
    height: 14px;
    color: var(--ss-warning-500);
}

.ss-reviews__bar-track {
    flex: 1;
    height: 8px;
    background: var(--ss-neutral-200);
    border-radius: var(--ss-radius-full);
    overflow: hidden;
}

[data-theme="dark"] .ss-reviews__bar-track {
    background: var(--ss-neutral-700);
}

.ss-reviews__bar-fill {
    height: 100%;
    background: var(--ss-warning-500);
    border-radius: var(--ss-radius-full);
    transition: width var(--ss-duration-300);
}

.ss-reviews__bar-count {
    width: 2.5ch;
    font-size: var(--ss-text-sm);
    text-align: end;
    color: var(--ss-color-text-secondary);
}

.ss-reviews__bar-percent {
    width: 4ch;
    font-size: var(--ss-text-xs);
    text-align: end;
    color: var(--ss-color-text-muted);
}

/* Reviews List Section */
.ss-reviews__list-section {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-4);
}

.ss-reviews__list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-space-4);
}

.ss-reviews__list-title {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-semibold);
    margin: 0;
}

.ss-reviews__sort {
    padding: var(--ss-space-2) var(--ss-space-3);
    font-size: var(--ss-text-sm);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-md);
    background: var(--ss-color-surface);
    color: var(--ss-color-text);
}

.ss-reviews__list {
    display: flex;
    flex-direction: column;
    gap: var(--ss-space-4);
}

.ss-reviews__empty {
    text-align: center;
    padding: var(--ss-space-12) var(--ss-space-4);
}

.ss-reviews__empty-icon {
    width: 48px;
    height: 48px;
    color: var(--ss-neutral-400);
    margin-bottom: var(--ss-space-4);
}

.ss-reviews__empty-title {
    font-size: var(--ss-text-lg);
    font-weight: var(--ss-font-semibold);
    margin-bottom: var(--ss-space-2);
}

.ss-reviews__empty-text {
    color: var(--ss-color-text-secondary);
}

.ss-reviews__load-more {
    text-align: center;
    padding-top: var(--ss-space-4);
}

/* Individual Review - Enhanced */
.ss-review {
    padding: var(--ss-space-5);
    background: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-lg);
}

.ss-review__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ss-space-3);
    margin-bottom: var(--ss-space-3);
}

.ss-review__author-info {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
}

.ss-review__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--ss-radius-full);
    background: linear-gradient(135deg, var(--ss-primary-500), var(--ss-primary-600));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--ss-font-bold);
    color: white;
    font-size: var(--ss-text-lg);
    overflow: hidden;
}

.ss-review__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ss-review__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ss-review__author {
    font-weight: var(--ss-font-semibold);
    color: var(--ss-color-text);
}

.ss-review__verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ss-text-xs);
    color: var(--ss-success-600);
}

.ss-review__verified svg {
    width: 12px;
    height: 12px;
}

.ss-review__rating-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--ss-space-1);
}

.ss-review__stars {
    display: flex;
    gap: 1px;
}

.ss-review__date {
    font-size: var(--ss-text-xs);
    color: var(--ss-color-text-secondary);
}

.ss-review__title {
    font-size: var(--ss-text-base);
    font-weight: var(--ss-font-semibold);
    margin-bottom: var(--ss-space-2);
    color: var(--ss-color-text);
}

.ss-review__content {
    margin-bottom: var(--ss-space-3);
}

.ss-review__content p {
    color: var(--ss-color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

.ss-review__images {
    display: flex;
    gap: var(--ss-space-2);
    margin-bottom: var(--ss-space-3);
    flex-wrap: wrap;
}

.ss-review__image {
    width: 72px;
    height: 72px;
    border-radius: var(--ss-radius-md);
    overflow: hidden;
    border: 1px solid var(--ss-color-border);
    padding: 0;
    background: none;
    cursor: pointer;
}

.ss-review__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ss-review__actions {
    display: flex;
    gap: var(--ss-space-4);
    padding-top: var(--ss-space-3);
    border-top: 1px solid var(--ss-color-border);
}

.ss-review__helpful,
.ss-review__report {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-1);
    padding: var(--ss-space-1) var(--ss-space-2);
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    background: none;
    border: none;
    border-radius: var(--ss-radius-md);
    cursor: pointer;
    transition: all var(--ss-duration-150);
}

.ss-review__helpful:hover,
.ss-review__report:hover {
    background: var(--ss-neutral-100);
    color: var(--ss-color-text);
}

.ss-review__helpful.is-active {
    color: var(--ss-primary-600);
}

.ss-review__helpful svg,
.ss-review__report svg {
    width: 16px;
    height: 16px;
}

.ss-review__helpful-count {
    margin-inline-start: 2px;
}

/* Rating Input in Modal */
.ss-rating-input {
    display: flex;
    align-items: center;
    gap: var(--ss-space-1);
}

.ss-rating-star {
    padding: var(--ss-space-1);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ss-neutral-300);
    transition: all var(--ss-duration-150);
}

.ss-rating-star svg {
    width: 32px;
    height: 32px;
}

.ss-rating-star:hover,
.ss-rating-star.is-active {
    color: var(--ss-warning-500);
    transform: scale(1.1);
}

.ss-rating-input__text {
    margin-inline-start: var(--ss-space-3);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text-secondary);
}

/* Review Modal Enhancement */
.ss-review-modal {
    max-width: 560px;
}

.ss-review__actions {
    margin-top: var(--ss-space-3);
    padding-top: var(--ss-space-3);
    border-top: 1px solid var(--ss-color-border);
}

.ss-review__helpful {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-1);
    padding: var(--ss-space-1) var(--ss-space-2);
    background: transparent;
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-md);
    font-size: var(--ss-text-sm);
    color: var(--ss-color-text-secondary);
    cursor: pointer;
    transition: all var(--ss-duration-150);
}

.ss-review__helpful:hover {
    background: var(--ss-neutral-100);
    color: var(--ss-color-text);
}

.ss-review__helpful svg {
    width: 14px;
    height: 14px;
}

/* Star Rating Display */
.ss-star {
    display: inline-flex;
    color: var(--ss-neutral-300);
}

.ss-star--full {
    color: var(--ss-warning-500);
}

.ss-star--half {
    color: var(--ss-warning-500);
    opacity: 0.6;
}

.ss-star--empty {
    color: var(--ss-neutral-300);
}

.ss-star--sm svg {
    width: 14px;
    height: 14px;
}

.ss-star--md svg {
    width: 18px;
    height: 18px;
}

.ss-star svg {
    width: 16px;
    height: 16px;
}

/* Wishlist Button Active State */
.ss-wishlist-btn.is-active {
    color: var(--ss-error-500);
}

.ss-wishlist-btn.is-active svg {
    fill: currentColor;
}

/* =====================================
   PDP Section Headers
   ===================================== */
.ss-pdp-section {
    margin-top: var(--ss-space-12);
}

.ss-pdp-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ss-space-6);
}

.ss-pdp-section__title {
    font-size: var(--ss-text-xl);
    font-weight: var(--ss-font-bold);
    margin: 0;
}

.ss-pdp-section__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-1);
    color: var(--ss-primary-600);
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    text-decoration: none;
    transition: color var(--ss-duration-150);
}

.ss-pdp-section__link:hover {
    color: var(--ss-primary-700);
}

.ss-pdp-section__link svg {
    width: 16px;
    height: 16px;
}

/* =====================================
   PDP Rating Link (clickable)
   ===================================== */
.ss-pdp__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-2);
    padding: var(--ss-space-2) 0;
    color: var(--ss-color-text-secondary);
    text-decoration: none;
    transition: color var(--ss-duration-150);
}

.ss-pdp__rating:hover {
    color: var(--ss-primary-600);
}

.ss-pdp__rating--empty {
    font-style: italic;
}

.ss-pdp__rating-stars {
    display: flex;
    gap: 1px;
}

.ss-pdp__rating-count {
    font-size: var(--ss-text-sm);
}

/* =====================================
   Social Sharing Buttons
   ===================================== */
.ss-pdp__share {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-4) 0;
    border-top: 1px solid var(--ss-color-border);
    margin-top: var(--ss-space-4);
}

.ss-pdp__share-label {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text-secondary);
}

.ss-pdp__share-buttons {
    display: flex;
    gap: var(--ss-space-2);
}

.ss-pdp__share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-full);
    background: var(--ss-color-surface);
    color: var(--ss-color-text-secondary);
    cursor: pointer;
    transition: all var(--ss-duration-150);
}

.ss-pdp__share-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--ss-shadow-md);
}

.ss-pdp__share-btn svg {
    width: 16px;
    height: 16px;
}

.ss-pdp__share-btn--facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: white;
}

.ss-pdp__share-btn--twitter:hover {
    background: #000;
    border-color: #000;
    color: white;
}

.ss-pdp__share-btn--pinterest:hover {
    background: #e60023;
    border-color: #e60023;
    color: white;
}

.ss-pdp__share-btn--whatsapp:hover {
    background: #25d366;
    border-color: #25d366;
    color: white;
}

.ss-pdp__share-btn--copy:hover {
    background: var(--ss-primary-600);
    border-color: var(--ss-primary-600);
    color: white;
}

/* =====================================
   Enhanced Stock Status
   ===================================== */
.ss-pdp__stock-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-2);
    padding: var(--ss-space-2) var(--ss-space-3);
    border-radius: var(--ss-radius-md);
    font-size: var(--ss-text-sm);
    margin-bottom: var(--ss-space-4);
}

.ss-pdp__stock-badge--instock {
    background: var(--ss-success-50);
    color: var(--ss-success-700);
}

.ss-pdp__stock-badge--low {
    background: var(--ss-warning-50);
    color: var(--ss-warning-700);
}

.ss-pdp__stock-badge--backorder {
    background: var(--ss-info-50);
    color: var(--ss-info-700);
}

.ss-pdp__stock-badge--outofstock {
    background: var(--ss-error-50);
    color: var(--ss-error-700);
}

.ss-pdp__stock-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--ss-radius-full);
    background: currentColor;
}

.ss-pdp__stock-dot--pulse {
    animation: pulse 2s infinite;
}

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

.ss-pdp__stock-text {
    font-weight: var(--ss-font-medium);
}

.ss-pdp__stock-qty {
    margin-inline-start: var(--ss-space-1);
    opacity: 0.8;
}

.ss-pdp__stock-urgency {
    font-weight: var(--ss-font-semibold);
    margin-inline-start: var(--ss-space-1);
}

.ss-pdp__stock-note {
    font-size: var(--ss-text-xs);
    opacity: 0.9;
    margin-inline-start: var(--ss-space-1);
}

/* =====================================
   Product Carousel with Navigation
   ===================================== */
.ss-product-carousel {
    position: relative;
}

.ss-product-carousel__track {
    display: flex;
    gap: var(--ss-space-4);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: var(--ss-space-1);
    margin: calc(var(--ss-space-1) * -1);
}

.ss-product-carousel__track::-webkit-scrollbar {
    display: none;
}

.ss-product-carousel__track .ss-product-card {
    flex: 0 0 auto;
    width: calc(25% - var(--ss-space-3));
    min-width: 220px;
}

@media (max-width: 1024px) {
    .ss-product-carousel__track .ss-product-card {
        width: calc(33.333% - var(--ss-space-3));
    }
}

@media (max-width: 768px) {
    .ss-product-carousel__track .ss-product-card {
        width: calc(50% - var(--ss-space-2));
        min-width: 160px;
    }
}

.ss-product-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ss-color-surface);
    border: 1px solid var(--ss-color-border);
    border-radius: var(--ss-radius-full);
    color: var(--ss-color-text);
    cursor: pointer;
    z-index: 2;
    box-shadow: var(--ss-shadow-md);
    transition: all var(--ss-duration-150);
}

.ss-product-carousel__nav:hover {
    background: var(--ss-primary-600);
    border-color: var(--ss-primary-600);
    color: white;
}

.ss-product-carousel__nav--prev {
    inset-inline-start: -20px;
}

.ss-product-carousel__nav--next {
    inset-inline-end: -20px;
}

.ss-product-carousel__nav svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .ss-product-carousel__nav {
        display: none;
    }
}

/* =====================================
   Recently Viewed Cards
   ===================================== */
.ss-recently-viewed-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 140px;
    text-decoration: none;
    transition: transform var(--ss-duration-150);
}

.ss-recently-viewed-card:hover {
    transform: translateY(-4px);
}

.ss-recently-viewed-card__image {
    aspect-ratio: 1;
    border-radius: var(--ss-radius-lg);
    overflow: hidden;
    background: var(--ss-neutral-100);
    margin-bottom: var(--ss-space-2);
}

.ss-recently-viewed-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ss-recently-viewed-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-neutral-400);
}

.ss-recently-viewed-card__placeholder svg {
    width: 32px;
    height: 32px;
}

.ss-recently-viewed-card__info {
    text-align: center;
}

.ss-recently-viewed-card__name {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    color: var(--ss-color-text);
    margin: 0 0 var(--ss-space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-recently-viewed-card__price {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-semibold);
    color: var(--ss-primary-600);
}

/* =====================================
   Enhanced Variation Swatches
   ===================================== */
.ss-pdp__swatches--button {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-2);
}

.ss-pdp__swatch--button {
    padding: var(--ss-space-2) var(--ss-space-4);
    min-width: 48px;
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-font-medium);
    text-align: center;
    background: var(--ss-color-surface);
    border: 2px solid var(--ss-color-border);
    border-radius: var(--ss-radius-md);
    color: var(--ss-color-text);
    cursor: pointer;
    transition: all var(--ss-duration-150);
}

.ss-pdp__swatch--button:hover {
    border-color: var(--ss-primary-400);
}

.ss-pdp__swatch--button.is-active {
    border-color: var(--ss-primary-600);
    background: var(--ss-primary-50);
    color: var(--ss-primary-700);
}

.ss-pdp__swatch--button.is-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Enhanced Color Swatches */
.ss-pdp__swatches--color {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-2);
}

.ss-pdp__swatch--color {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: var(--ss-radius-full);
    border: 2px solid transparent;
    background: var(--swatch-color, #ccc);
    cursor: pointer;
    transition: all var(--ss-duration-150);
    padding: 0;
}

.ss-pdp__swatch--color::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--ss-radius-full);
    border: 2px solid transparent;
    transition: border-color var(--ss-duration-150);
}

.ss-pdp__swatch--color:hover::before,
.ss-pdp__swatch--color.is-active::before {
    border-color: var(--ss-primary-600);
}

.ss-pdp__swatch-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transition: opacity var(--ss-duration-150);
}

.ss-pdp__swatch--color.is-active .ss-pdp__swatch-check {
    opacity: 1;
}

.ss-pdp__swatch-check svg {
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* Image Swatches */
.ss-pdp__swatches--image {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-2);
}

.ss-pdp__swatch--image {
    width: 56px;
    height: 56px;
    padding: 0;
    border: 2px solid var(--ss-color-border);
    border-radius: var(--ss-radius-md);
    background: var(--ss-color-surface);
    cursor: pointer;
    overflow: hidden;
    transition: all var(--ss-duration-150);
}

.ss-pdp__swatch--image:hover {
    border-color: var(--ss-primary-400);
}

.ss-pdp__swatch--image.is-active {
    border-color: var(--ss-primary-600);
}

.ss-pdp__swatch--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive Reviews */
@media (max-width: 767px) {
    .ss-reviews__summary-card {
        padding: var(--ss-space-4);
    }
        padding-right: 0;
        padding-bottom: var(--ss-space-4);
        border-right: none;
        border-bottom: 1px solid var(--ss-neutral-200);
    }
    
    [data-theme="dark"] .ss-reviews__average {
        border-bottom-color: var(--ss-neutral-700);
    }
}


/* ============================================
   ENHANCED RTL SUPPORT
   Comprehensive RTL layout fixes
   ============================================ */

[dir="rtl"] {
    /* Text alignment */
    text-align: right;
}

/* Flex direction reversal for RTL */
[dir="rtl"] .ss-store-header__container,
[dir="rtl"] .ss-store-header__actions,
[dir="rtl"] .ss-store-nav,
[dir="rtl"] .ss-product-card__actions,
[dir="rtl"] .ss-cart-item,
[dir="rtl"] .ss-mini-cart__item,
[dir="rtl"] .ss-breadcrumb,
[dir="rtl"] .ss-pagination,
[dir="rtl"] .ss-bottom-nav {
    flex-direction: row-reverse;
}

/* Reset flex direction for vertical layouts */
[dir="rtl"] .ss-product-card__content,
[dir="rtl"] .ss-mobile-menu__panel,
[dir="rtl"] .ss-filter-sidebar,
[dir="rtl"] .ss-drawer__content {
    flex-direction: column;
}

/* Margin and padding adjustments */
[dir="rtl"] .ss-ml-auto { margin-right: auto; margin-left: 0; }
[dir="rtl"] .ss-mr-auto { margin-left: auto; margin-right: 0; }
[dir="rtl"] .ss-ml-2 { margin-right: var(--ss-space-2); margin-left: 0; }
[dir="rtl"] .ss-mr-2 { margin-left: var(--ss-space-2); margin-right: 0; }
[dir="rtl"] .ss-ml-3 { margin-right: var(--ss-space-3); margin-left: 0; }
[dir="rtl"] .ss-mr-3 { margin-left: var(--ss-space-3); margin-right: 0; }
[dir="rtl"] .ss-ml-4 { margin-right: var(--ss-space-4); margin-left: 0; }
[dir="rtl"] .ss-mr-4 { margin-left: var(--ss-space-4); margin-right: 0; }
[dir="rtl"] .ss-pl-2 { padding-right: var(--ss-space-2); padding-left: 0; }
[dir="rtl"] .ss-pr-2 { padding-left: var(--ss-space-2); padding-right: 0; }
[dir="rtl"] .ss-pl-4 { padding-right: var(--ss-space-4); padding-left: 0; }
[dir="rtl"] .ss-pr-4 { padding-left: var(--ss-space-4); padding-right: 0; }

/* Icon positioning */
[dir="rtl"] .ss-btn svg:first-child {
    margin-left: var(--ss-space-2);
    margin-right: 0;
}

[dir="rtl"] .ss-btn svg:last-child {
    margin-right: var(--ss-space-2);
    margin-left: 0;
}

/* Form elements */
[dir="rtl"] .ss-input,
[dir="rtl"] .ss-textarea,
[dir="rtl"] .ss-select {
    text-align: right;
}

[dir="rtl"] .ss-form-group .ss-label {
    text-align: right;
}

/* Mobile menu */
[dir="rtl"] .ss-mobile-menu__panel {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

[dir="rtl"] .ss-mobile-menu.is-open .ss-mobile-menu__panel {
    transform: translateX(0);
}

/* Cart drawer */
[dir="rtl"] .ss-drawer--end .ss-drawer__container {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

[dir="rtl"] .ss-drawer--end.is-open .ss-drawer__container {
    transform: translateX(0);
}

/* Product badges */
[dir="rtl"] .ss-product-badges {
    left: auto;
    right: var(--ss-space-2);
}

/* Breadcrumbs separator */
[dir="rtl"] .ss-breadcrumb__separator {
    transform: scaleX(-1);
}

/* Dropdown menus */
[dir="rtl"] .ss-dropdown__menu--right {
    right: auto;
    left: 0;
}

[dir="rtl"] .ss-dropdown__menu--left {
    left: auto;
    right: 0;
}

/* Price formatting */
[dir="rtl"] .ss-product-card__price-sale,
[dir="rtl"] .ss-product-card__price-regular {
    direction: ltr;
    unicode-bidi: bidi-override;
}

/* Filter sidebar */
[dir="rtl"] .ss-filter-sidebar {
    border-right: none;
    border-left: 1px solid var(--ss-color-border);
}

/* Checkbox and radio alignment */
[dir="rtl"] .ss-checkbox,
[dir="rtl"] .ss-radio {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

[dir="rtl"] .ss-filter-checkbox {
    flex-direction: row-reverse;
}

[dir="rtl"] .ss-filter-checkbox input {
    margin-right: 0;
    margin-left: var(--ss-space-2);
}

/* Header logo */
[dir="rtl"] .ss-store-header__logo {
    flex-direction: row-reverse;
}

/* Cart item layout */
[dir="rtl"] .ss-cart-item__image {
    margin-right: 0;
    margin-left: var(--ss-space-4);
}

/* Mini cart item */
[dir="rtl"] .ss-mini-cart__item-image {
    margin-right: 0;
    margin-left: var(--ss-space-3);
}

/* Toast notifications */
[dir="rtl"] .ss-toast {
    animation-name: ss-toast-in-rtl;
}

[dir="rtl"] .ss-toast.is-leaving {
    animation-name: ss-toast-out-rtl;
}

/* Account menu items */
[dir="rtl"] .ss-account-nav__item svg {
    margin-right: 0;
    margin-left: var(--ss-space-3);
}

/* Order items */
[dir="rtl"] .ss-order-item__image {
    margin-right: 0;
    margin-left: var(--ss-space-4);
}

/* Search modal */
[dir="rtl"] .ss-search-modal__icon {
    left: auto;
    right: var(--ss-space-4);
}

[dir="rtl"] .ss-search-modal__input {
    padding-left: var(--ss-space-4);
    padding-right: var(--ss-space-12);
}

/* Language selector */
[dir="rtl"] .ss-lang-selector__menu {
    left: auto;
    right: 0;
}

/* Currency selector */
[dir="rtl"] .ss-currency-selector__menu {
    left: auto;
    right: 0;
}

/* Quantity input */
[dir="rtl"] .ss-qty-input {
    flex-direction: row-reverse;
}

/* Progress bar */
[dir="rtl"] .ss-progress__fill {
    transform-origin: right;
}

/* Stars rating */
[dir="rtl"] .ss-stars {
    flex-direction: row-reverse;
}

/* Review layout */
[dir="rtl"] .ss-review__avatar {
    margin-right: 0;
    margin-left: var(--ss-space-3);
}

/* Close buttons positioning */
[dir="rtl"] .ss-modal__close,
[dir="rtl"] .ss-drawer__close {
    right: auto;
    left: var(--ss-space-4);
}

/* Empty state */
[dir="rtl"] .ss-empty {
    text-align: center;
}

/* Tab navigation */
[dir="rtl"] .ss-tabs__nav {
    flex-direction: row-reverse;
}

/* ============================================
   COMPREHENSIVE RTL OVERRIDES
   ============================================ */

/* Ensure header is fully RTL */
[dir="rtl"] .ss-store-header,
.ss-rtl .ss-store-header {
    direction: rtl;
}

/* Product cards RTL */
[dir="rtl"] .ss-product-card__actions,
.ss-rtl .ss-product-card__actions {
    flex-direction: row-reverse;
}

[dir="rtl"] .ss-product-card__badge,
.ss-rtl .ss-product-card__badge {
    left: auto;
    right: var(--ss-space-3);
}

/* Forms RTL */
[dir="rtl"] .ss-form-group,
.ss-rtl .ss-form-group {
    text-align: right;
}

[dir="rtl"] .ss-input,
[dir="rtl"] .ss-select,
[dir="rtl"] .ss-textarea,
.ss-rtl .ss-input,
.ss-rtl .ss-select,
.ss-rtl .ss-textarea {
    text-align: right;
}

/* Breadcrumbs RTL */
[dir="rtl"] .ss-breadcrumb,
.ss-rtl .ss-breadcrumb {
    flex-direction: row-reverse;
}

[dir="rtl"] .ss-breadcrumb__separator,
.ss-rtl .ss-breadcrumb__separator {
    transform: scaleX(-1);
}

/* Pagination RTL */
[dir="rtl"] .ss-pagination,
.ss-rtl .ss-pagination {
    flex-direction: row-reverse;
}

/* Button icons RTL */
[dir="rtl"] .ss-btn svg:first-child,
.ss-rtl .ss-btn svg:first-child {
    margin-right: 0;
    margin-left: var(--ss-space-2);
}

[dir="rtl"] .ss-btn svg:last-child,
.ss-rtl .ss-btn svg:last-child {
    margin-left: 0;
    margin-right: var(--ss-space-2);
}

/* Quantity selector RTL */
[dir="rtl"] .ss-quantity,
.ss-rtl .ss-quantity {
    flex-direction: row-reverse;
}

/* Price display RTL */
[dir="rtl"] .ss-price,
.ss-rtl .ss-price {
    direction: ltr;
    unicode-bidi: embed;
}

/* Footer RTL */
[dir="rtl"] .ss-footer__grid,
.ss-rtl .ss-footer__grid {
    direction: rtl;
}

[dir="rtl"] .ss-footer__section,
.ss-rtl .ss-footer__section {
    text-align: right;
}

/* Dropdown menus RTL */
[dir="rtl"] .ss-dropdown__menu,
.ss-rtl .ss-dropdown__menu {
    left: auto;
    right: 0;
}

/* Checkbox and radio RTL */
[dir="rtl"] .ss-checkbox,
[dir="rtl"] .ss-radio,
.ss-rtl .ss-checkbox,
.ss-rtl .ss-radio {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Text alignment utility overrides */
[dir="rtl"] .ss-text-left {
    text-align: right;
}

[dir="rtl"] .ss-text-right {
    text-align: left;
}