/*
 Theme Name: WEXLIE
 Description: Unique e-commerce theme with Tailwind CSS.
 Version: 1.0
 Author: You
 */

 @import url('https://cdn.tailwindcss.com');

 /* Your globals.css vars - fixed colors for no purple */
 :root {
   --radius: 0.625rem;
   --background: #ffffff;
   --foreground: #111827;
   --primary: #1e40af; /* Blue - no purple */
   --primary-foreground: #ffffff;
   --secondary: #f3f4f6;
   --secondary-foreground: #111827;
   --muted: #f3f4f6;
   --muted-foreground: #6b7280;
   --accent: #f3f4f6;
   --accent-foreground: #111827;
   --destructive: #ef4444;
   --border: #e5e7eb;
   --input: #e5e7eb;
   --ring: #3b82f6;
 }

 .dark {
   --background: #111827;
   --foreground: #f9fafb;
   --primary: #3b82f6;
   --primary-foreground: #1e40af;
   --secondary: #1f2937;
   --secondary-foreground: #f9fafb;
   --muted: #1f2937;
   --muted-foreground: #9ca3af;
   --accent: #1f2937;
   --accent-foreground: #f9fafb;
   --border: #374151;
   --input: #374151;
   --ring: #60a5fa;
 }

 @layer base {
   * { @apply border-border outline-ring/50; } /* Fixed: Semicolon after @apply */
   body { @apply bg-background text-foreground antialiased; } /* Fixed: Semicolon */
   h1, h2, h3 { @apply font-bold tracking-tight text-foreground; } /* Unique text polish */
 } /* Fixed: Proper close */

 /* Unique animations - tilt for categories, smooth sections */
 .parallax { background-attachment: fixed; transition: transform 0.3s ease; }
 .tilt { transition: transform 0.3s ease; }
 .tilt:hover { transform: rotateX(5deg) rotateY(5deg) scale(1.05); } /* 3D unique effect */
 .hover-lift:hover { transform: translateY(-4px); transition: 0.2s ease; }

 /* Fixed line-clamp - native CSS (no -moz prefix) */
 .line-clamp-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 } /* Removed -moz - fixes compatibility */

 .section-divider { height: 1px; background: linear-gradient(to right, transparent, var(--border), transparent); margin: 4rem 0; } /* Unique section breaks */

 @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
 .animate-marquee { animation: marquee 20s linear infinite; }

 /* Footer link hover fix */
 footer a:hover { @apply text-primary transition-colors; }
 .hero-text { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }