/*
Theme Name: MySiliconeLux
Theme URI: https://mysiliconelux.com
Description: Premium Apple-style e-commerce theme for MySiliconeLux.com - Silicone dolls North America
Version: 1.0.0
Author: MySiliconeLux Team
Author URI: https://mysiliconelux.com
Template: flatsome
Text Domain: mysiliconelux
Requires PHP: 8.2
Requires at least: 6.4
WC tested up to: 8.0
WC requires at least: 8.0
*/

/* 
=================================================================
MYSILICONELUX - PREMIUM APPLE-STYLE THEME
Child theme of Flatsome for WooCommerce adult-friendly store
Based on: DESIGN_SYSTEM_APPLE_STYLE.md
=================================================================
*/

/* =================================================================
   1. CSS VARIABLES (Design System)
================================================================= */

:root {
  /* Primary Colors - Rose Gold Premium */
  --primary-50:  #FFF5F5;
  --primary-100: #FFE6E6;
  --primary-200: #FFCCCC;
  --primary-300: #FFB3B3;
  --primary-400: #FF9999;
  --primary-500: #FF6B6B;   /* PRIMARY */
  --primary-600: #FF5252;
  --primary-700: #E63946;
  --primary-800: #CC2936;
  --primary-900: #A01F26;
  
  /* Neutral Colors - Apple Gray Scale */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #EEEEEE;
  --neutral-300: #E0E0E0;
  --neutral-400: #BDBDBD;
  --neutral-500: #9E9E9E;
  --neutral-600: #757575;
  --neutral-700: #616161;
  --neutral-800: #424242;
  --neutral-900: #212121;
  
  /* Accent Colors - Gold */
  --accent-gold-100: #FFF8DC;
  --accent-gold-300: #FFD700;
  --accent-gold-500: #DAA520;
  --accent-gold-700: #B8860B;
  
  /* Semantic Colors */
  --success-100: #D4EDDA;
  --success-500: #28A745;
  --success-700: #1E7E34;
  
  --warning-100: #FFF3CD;
  --warning-500: #FFC107;
  --warning-700: #FF9800;
  
  --error-100: #F8D7DA;
  --error-500: #DC3545;
  --error-700: #C82333;
  
  --info-100: #D1ECF1;
  --info-500: #17A2B8;
  --info-700: #138496;
  
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  
  /* Spacing (8px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =================================================================
   2. RESET & BASE STYLES
================================================================= */

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--neutral-700);
  background-color: var(--neutral-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.2;
  color: var(--neutral-900);
  margin-top: 0;
}

h1 {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 40px;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 32px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 18px;
}

/* Responsive Typography */
@media (max-width: 768px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 24px; }
}

a {
  color: var(--primary-500);
  text-decoration: none;
  transition: color var(--duration-normal) var(--ease);
}

a:hover {
  color: var(--primary-600);
  text-decoration: underline;
}

/* =================================================================
   3. BUTTONS (Design System)
================================================================= */

.btn-primary {
  background: var(--primary-500);
  color: white !important;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
  display: inline-block;
  text-decoration: none !important;
}

.btn-primary:hover {
  background: var(--primary-600);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
  text-decoration: none !important;
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-large {
  padding: var(--space-5) var(--space-12);
  font-size: 18px;
  border-radius: var(--radius-lg);
}

.btn-secondary {
  background: white;
  color: var(--primary-500) !important;
  padding: var(--space-4) var(--space-8);
  border: 2px solid var(--primary-500);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease);
}

.btn-secondary:hover {
  background: var(--primary-50);
  border-color: var(--primary-600);
}

.btn-ghost {
  background: transparent;
  color: var(--neutral-700) !important;
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease);
}

.btn-ghost:hover {
  background: var(--neutral-100);
  border-color: var(--neutral-400);
}

/* WooCommerce Button Override */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button {
  background: var(--primary-500) !important;
  color: white !important;
  padding: var(--space-4) var(--space-8) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  border: none !important;
  transition: all var(--duration-normal) var(--ease) !important;
}

.woocommerce button.button:hover {
  background: var(--primary-600) !important;
  transform: translateY(-2px);
}

/* =================================================================
   4. PRODUCT CARDS
================================================================= */

.product-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-slow) var(--ease);
  box-shadow: var(--shadow-md);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.product-card-image {
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease);
}

.product-card:hover .product-card-image img {
  transform: scale(1.05);
}

.product-card-content {
  padding: var(--space-5);
}

.product-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: var(--space-2);
}

.product-card-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-500);
}

/* =================================================================
   5. BADGES
================================================================= */

.badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
}

.badge-new {
  background: var(--primary-500);
  color: white;
}

.badge-sale {
  background: var(--error-500);
  color: white;
}

.badge-vip {
  background: linear-gradient(135deg, var(--accent-gold-300), var(--accent-gold-500));
  color: var(--neutral-900);
}

.badge-stock {
  background: var(--success-500);
  color: white;
}

/* =================================================================
   6. CONTAINER & GRID
================================================================= */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-narrow {
  max-width: 960px;
}

.container-wide {
  max-width: 1440px;
}

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* =================================================================
   7. UTILITIES
================================================================= */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }

/* =================================================================
   8. ANIMATIONS
================================================================= */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

/* =================================================================
   9. RESPONSIVE
================================================================= */

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  
  .container {
    padding: 0 var(--space-4);
  }
}