/* Base styles and variables */
:root {
    --primary: theme(colors.blue.600);
    --primary-hover: theme(colors.blue.700);
    --secondary: theme(colors.indigo.600);
    --text-primary: theme(colors.gray.900);
    --text-secondary: theme(colors.gray.600);
}

/* Product Card Component */
.product-card {
    @apply bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden border border-gray-100 hover:border-blue-100 focus-within:ring-2 focus-within:ring-blue-500;
}

.product-card img {
    @apply w-full h-48 md:h-56 lg:h-64 object-cover transition-transform duration-300 hover:scale-105;
}

.product-card-content {
    @apply p-4 md:p-6 space-y-3;
}

.product-card-title {
    @apply text-lg md:text-xl font-semibold text-gray-900 mb-2 line-clamp-2 hover:text-blue-600 transition-colors duration-200;
}

.product-card-code {
    @apply text-sm text-gray-500 mb-2 font-medium;
}

.product-card-description {
    @apply text-sm text-gray-600 mb-4 line-clamp-3;
}

.product-card-button {
    @apply w-full bg-blue-600 text-white py-2.5 px-4 rounded-lg hover:bg-blue-700 transition-all duration-200
    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
    disabled:opacity-50 disabled:cursor-not-allowed
    active:transform active:scale-[0.98];
}

/* Category Navigation */
.category-btn {
    @apply px-4 py-2.5 rounded-lg bg-white text-gray-700 
    hover:bg-gradient-to-r hover:from-blue-600 hover:to-indigo-600 hover:text-white 
    transition-all duration-200 shadow-sm hover:shadow-md text-sm font-medium
    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
    disabled:opacity-50 disabled:cursor-not-allowed;
}

.category-btn.active {
    @apply bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-md;
}

/* Search Component */
.search-input {
    @apply w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl 
    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
    placeholder:text-gray-400 text-gray-700
    transition-all duration-200
    hover:border-gray-300;
}

/* Quote Badge Component */
.quote-badge {
    @apply bg-blue-600 text-white rounded-full px-4 py-1.5 text-sm font-medium
    inline-flex items-center gap-1.5
    hover:bg-blue-700 transition-colors duration-200;
}

/* Loading States */
.loading {
    @apply animate-pulse bg-gray-200;
}

/* Responsive Utilities */
@screen md {
    .product-grid {
        @apply grid-cols-2 gap-6;
    }
}

@screen lg {
    .product-grid {
        @apply grid-cols-3 gap-8;
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        @apply transition-none animate-none;
    }
}

/* Focus Visible Styles */
:focus-visible {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}