/*
 * Solarichi WooCommerce — Base tokens and shared WooCommerce variables
 * Auto-split from the original monolithic woocommerce.css in Phase 8.
 * Keep visual changes in the relevant module to avoid loading store CSS everywhere.
 */

/*==========================================
  SOLARICHI - WooCommerce MD3 (Material Design 3)
  Modern Solar Energy Theme - RTL
==========================================*/

/* ─── MD3 Design Tokens (→ main.css) ─── */
:root {
  --md3-primary: var(--color-primary);
  --md3-on-primary: var(--color-white);
  --md3-primary-container: var(--color-primary-container);
  --md3-on-primary-container: var(--color-on-primary-container);
  --md3-secondary: var(--color-secondary);
  --md3-on-secondary: var(--color-white);
  --md3-secondary-container: var(--color-secondary-container);
  --md3-on-secondary-container: var(--color-on-secondary-container);
  --md3-tertiary: var(--color-accent);
  --md3-on-tertiary: var(--color-white);
  --md3-tertiary-container: var(--color-accent-container);
  --md3-on-tertiary-container: var(--color-on-accent-container);
  --md3-error: var(--color-error);
  --md3-on-error: var(--color-white);
  --md3-error-container: var(--color-error-container);
  --md3-on-error-container: var(--color-on-error-container);
  --md3-background: var(--color-surface);
  --md3-on-background: var(--color-on-surface);
  --md3-surface: var(--color-surface);
  --md3-on-surface: var(--color-on-surface);
  --md3-surface-variant: var(--color-surface-container-low);
  --md3-on-surface-variant: var(--color-on-surface-variant);
  --md3-outline: var(--color-surface-container-high);
  --md3-outline-variant: var(--color-surface-container);
  --md3-shadow: rgba(0, 0, 0, 0.08);
  --md3-shadow-umbra: rgba(0, 0, 0, 0.2);
  --md3-elevation-1: var(--elevation-1);
  --md3-elevation-2: var(--elevation-2);
  --md3-elevation-3: var(--elevation-3);
  --md3-elevation-4: var(--elevation-4);
  --md3-elevation-5: var(--elevation-5);
  --md3-radius-xs: var(--radius-xs);
  --md3-radius-sm: var(--radius-sm);
  --md3-radius-md: var(--radius-md);
  --md3-radius-lg: var(--radius-lg);
  --md3-radius-xl: 28px;
  --md3-spacing-1: 4px;
  --md3-spacing-2: var(--space-1);
  --md3-spacing-3: 12px;
  --md3-spacing-4: var(--space-2);
  --md3-spacing-5: var(--space-3);
  --md3-spacing-6: var(--space-4);
  --md3-spacing-7: 40px;
  --md3-spacing-8: var(--space-5);
  --md3-radius-full: 9999px;
  --md3-font: var(--font-primary);
  --md3-transition: var(--transition);
  --md3-transition-spring: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ─── Artistic Enhancements ─── */
  --md3-glow-primary: 0 0 20px rgba(13, 148, 136, 0.3);
  --md3-glow-secondary: 0 0 20px rgba(245, 158, 11, 0.3);
  --md3-glow-accent: 0 0 20px rgba(2, 132, 199, 0.3);
  --md3-gradient-primary: linear-gradient(135deg, #0d9488, #0f766e, #14b8a6);
  --md3-gradient-warm: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
  --md3-gradient-cool: linear-gradient(135deg, #0284c7, #0d9488, #14b8a6);
  --md3-gradient-sunset: linear-gradient(135deg, #0f766e, #f59e0b, #f97316);
  --md3-gradient-card: linear-gradient(135deg, #0d9488 0%, #0284c7 100%);
  --md3-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
}


/* Price inquiry state for products without a real online price */
.md3-price-inquiry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}

.md3-price-inquiry:hover,
.md3-price-inquiry:focus-visible {
  text-decoration: none;
  color: var(--color-primary);
}

.md3-inquiry-single-btn,
.md3-inquiry-link {
  text-decoration: none;
}