/**
 * Standard Shop Utilities
 * Reusable utility classes and CSS variables for standard shop
 */

/* ========================================
   CSS Custom Properties (Variables)
   ======================================== */

.standard-shop-page {
    /* Colors */
    --ss-primary: #3b82f6;
    --ss-primary-dark: #2563eb;
    --ss-primary-light: #60a5fa;
    --ss-primary-bg: #dbeafe;
    
    --ss-success: #10b981;
    --ss-success-dark: #059669;
    --ss-success-light: #34d399;
    --ss-success-bg: #d1fae5;
    
    --ss-error: #ef4444;
    --ss-error-dark: #dc2626;
    --ss-error-light: #f87171;
    --ss-error-bg: #fee2e2;
    
    --ss-warning: #f59e0b;
    --ss-warning-dark: #d97706;
    --ss-warning-light: #fbbf24;
    --ss-warning-bg: #fef3c7;
    
    --ss-gray-50: #f9fafb;
    --ss-gray-100: #f3f4f6;
    --ss-gray-200: #e5e7eb;
    --ss-gray-300: #d1d5db;
    --ss-gray-400: #9ca3af;
    --ss-gray-500: #6b7280;
    --ss-gray-600: #4b5563;
    --ss-gray-700: #374151;
    --ss-gray-800: #1f2937;
    --ss-gray-900: #111827;
    
    /* Spacing */
    --ss-spacing-xs: 4px;
    --ss-spacing-sm: 8px;
    --ss-spacing-md: 16px;
    --ss-spacing-lg: 24px;
    --ss-spacing-xl: 32px;
    --ss-spacing-2xl: 48px;
    --ss-spacing-3xl: 64px;
    
    /* Border Radius */
    --ss-radius-sm: 4px;
    --ss-radius-md: 8px;
    --ss-radius-lg: 12px;
    --ss-radius-xl: 16px;
    --ss-radius-full: 9999px;
    
    /* Shadows */
    --ss-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ss-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --ss-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --ss-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --ss-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Transitions */
    --ss-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ss-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --ss-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-index Scale */
    --ss-z-base: 1;
    --ss-z-dropdown: 100;
    --ss-z-sticky: 200;
    --ss-z-fixed: 300;
    --ss-z-modal-backdrop: 400;
    --ss-z-modal: 500;
    --ss-z-popover: 600;
    --ss-z-tooltip: 700;
}

/* ========================================
   Utility Classes
   ======================================== */

/* Display */
.standard-shop-page .ss-hidden {
    display: none !important;
}

.standard-shop-page .ss-block {
    display: block !important;
}

.standard-shop-page .ss-inline-block {
    display: inline-block !important;
}

.standard-shop-page .ss-flex {
    display: flex !important;
}

.standard-shop-page .ss-inline-flex {
    display: inline-flex !important;
}

.standard-shop-page .ss-grid {
    display: grid !important;
}

/* Flexbox */
.standard-shop-page .ss-flex-row {
    flex-direction: row !important;
}

.standard-shop-page .ss-flex-col {
    flex-direction: column !important;
}

.standard-shop-page .ss-items-center {
    align-items: center !important;
}

.standard-shop-page .ss-items-start {
    align-items: flex-start !important;
}

.standard-shop-page .ss-items-end {
    align-items: flex-end !important;
}

.standard-shop-page .ss-justify-center {
    justify-content: center !important;
}

.standard-shop-page .ss-justify-between {
    justify-content: space-between !important;
}

.standard-shop-page .ss-justify-around {
    justify-content: space-around !important;
}

.standard-shop-page .ss-flex-wrap {
    flex-wrap: wrap !important;
}

.standard-shop-page .ss-flex-1 {
    flex: 1 !important;
}

.standard-shop-page .ss-gap-xs {
    gap: var(--ss-spacing-xs) !important;
}

.standard-shop-page .ss-gap-sm {
    gap: var(--ss-spacing-sm) !important;
}

.standard-shop-page .ss-gap-md {
    gap: var(--ss-spacing-md) !important;
}

.standard-shop-page .ss-gap-lg {
    gap: var(--ss-spacing-lg) !important;
}

/* Spacing */
.standard-shop-page .ss-m-0 {
    margin: 0 !important;
}

.standard-shop-page .ss-mt-sm {
    margin-top: var(--ss-spacing-sm) !important;
}

.standard-shop-page .ss-mt-md {
    margin-top: var(--ss-spacing-md) !important;
}

.standard-shop-page .ss-mt-lg {
    margin-top: var(--ss-spacing-lg) !important;
}

.standard-shop-page .ss-mb-sm {
    margin-bottom: var(--ss-spacing-sm) !important;
}

.standard-shop-page .ss-mb-md {
    margin-bottom: var(--ss-spacing-md) !important;
}

.standard-shop-page .ss-mb-lg {
    margin-bottom: var(--ss-spacing-lg) !important;
}

.standard-shop-page .ss-p-0 {
    padding: 0 !important;
}

.standard-shop-page .ss-p-sm {
    padding: var(--ss-spacing-sm) !important;
}

.standard-shop-page .ss-p-md {
    padding: var(--ss-spacing-md) !important;
}

.standard-shop-page .ss-p-lg {
    padding: var(--ss-spacing-lg) !important;
}

/* Text */
.standard-shop-page .ss-text-center {
    text-align: center !important;
}

.standard-shop-page .ss-text-left {
    text-align: left !important;
}

.standard-shop-page .ss-text-right {
    text-align: right !important;
}

.standard-shop-page .ss-font-normal {
    font-weight: 400 !important;
}

.standard-shop-page .ss-font-medium {
    font-weight: 500 !important;
}

.standard-shop-page .ss-font-semibold {
    font-weight: 600 !important;
}

.standard-shop-page .ss-font-bold {
    font-weight: 700 !important;
}

.standard-shop-page .ss-uppercase {
    text-transform: uppercase !important;
}

.standard-shop-page .ss-lowercase {
    text-transform: lowercase !important;
}

.standard-shop-page .ss-capitalize {
    text-transform: capitalize !important;
}

/* Colors */
.standard-shop-page .ss-text-primary {
    color: var(--ss-primary) !important;
}

.standard-shop-page .ss-text-success {
    color: var(--ss-success) !important;
}

.standard-shop-page .ss-text-error {
    color: var(--ss-error) !important;
}

.standard-shop-page .ss-text-warning {
    color: var(--ss-warning) !important;
}

.standard-shop-page .ss-text-gray {
    color: var(--ss-gray-600) !important;
}

.standard-shop-page .ss-bg-primary {
    background-color: var(--ss-primary) !important;
}

.standard-shop-page .ss-bg-success {
    background-color: var(--ss-success) !important;
}

.standard-shop-page .ss-bg-error {
    background-color: var(--ss-error) !important;
}

.standard-shop-page .ss-bg-gray-light {
    background-color: var(--ss-gray-100) !important;
}

/* Borders */
.standard-shop-page .ss-border {
    border: 1px solid var(--ss-gray-200) !important;
}

.standard-shop-page .ss-border-top {
    border-top: 1px solid var(--ss-gray-200) !important;
}

.standard-shop-page .ss-border-bottom {
    border-bottom: 1px solid var(--ss-gray-200) !important;
}

.standard-shop-page .ss-rounded-sm {
    border-radius: var(--ss-radius-sm) !important;
}

.standard-shop-page .ss-rounded-md {
    border-radius: var(--ss-radius-md) !important;
}

.standard-shop-page .ss-rounded-lg {
    border-radius: var(--ss-radius-lg) !important;
}

.standard-shop-page .ss-rounded-full {
    border-radius: var(--ss-radius-full) !important;
}

/* Shadows */
.standard-shop-page .ss-shadow-sm {
    box-shadow: var(--ss-shadow-sm) !important;
}

.standard-shop-page .ss-shadow-md {
    box-shadow: var(--ss-shadow-md) !important;
}

.standard-shop-page .ss-shadow-lg {
    box-shadow: var(--ss-shadow-lg) !important;
}

.standard-shop-page .ss-shadow-none {
    box-shadow: none !important;
}

/* Transitions */
.standard-shop-page .ss-transition {
    transition: all var(--ss-transition-base) !important;
}

.standard-shop-page .ss-transition-fast {
    transition: all var(--ss-transition-fast) !important;
}

.standard-shop-page .ss-transition-slow {
    transition: all var(--ss-transition-slow) !important;
}

/* Cursor */
.standard-shop-page .ss-cursor-pointer {
    cursor: pointer !important;
}

.standard-shop-page .ss-cursor-not-allowed {
    cursor: not-allowed !important;
}

/* Opacity */
.standard-shop-page .ss-opacity-50 {
    opacity: 0.5 !important;
}

.standard-shop-page .ss-opacity-75 {
    opacity: 0.75 !important;
}

/* Position */
.standard-shop-page .ss-relative {
    position: relative !important;
}

.standard-shop-page .ss-absolute {
    position: absolute !important;
}

.standard-shop-page .ss-fixed {
    position: fixed !important;
}

.standard-shop-page .ss-sticky {
    position: sticky !important;
}

/* Overflow */
.standard-shop-page .ss-overflow-hidden {
    overflow: hidden !important;
}

.standard-shop-page .ss-overflow-auto {
    overflow: auto !important;
}

.standard-shop-page .ss-overflow-y-auto {
    overflow-y: auto !important;
}

.standard-shop-page .ss-overflow-x-hidden {
    overflow-x: hidden !important;
}

/* ========================================
   Component Base Styles
   ======================================== */

/* Button Base */
.standard-shop-page .ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ss-spacing-sm) var(--ss-spacing-md);
    border-radius: var(--ss-radius-md);
    font-weight: 600;
    transition: all var(--ss-transition-base);
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.standard-shop-page .ss-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Card Base */
.standard-shop-page .ss-card {
    background: white;
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow-sm);
    border: 1px solid var(--ss-gray-200);
    overflow: hidden;
}

/* Badge Base */
.standard-shop-page .ss-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--ss-spacing-xs) var(--ss-spacing-sm);
    border-radius: var(--ss-radius-full);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   Animation Classes
   ======================================== */

.standard-shop-page .ss-animate-fadeIn {
    animation: fadeIn var(--ss-transition-base);
}

.standard-shop-page .ss-animate-slideUp {
    animation: slideInUp var(--ss-transition-base);
}

.standard-shop-page .ss-animate-pulse {
    animation: pulse 2s infinite;
}

.standard-shop-page .ss-animate-spin {
    animation: spin 1s linear infinite;
}

/* ========================================
   Responsive Utilities
   Note: These utility classes now use the centralized breakpoints
   Mobile: < 800px
   Tablet: 800px - 1199px
   Desktop: 1200px+
   
   For responsive visibility utilities, use the classes from
   responsive-breakpoints.css instead:
   - .hide-mobile
   - .show-mobile-only
   - .hide-tablet
   - .show-tablet-only
   - .show-desktop-only
   ======================================== */

/* ========================================
   Keyframe Animations
   ======================================== */

/* All animations have been moved to animations.css:
   - ssFadeIn -> fadeIn
   - ssSlideUp -> slideUp
   - ssPulse -> pulse
   - ssSpin -> spin
*/