/**
 * Base Theme - Custom Styles
 *
 * This file contains theme-specific customizations.
 * Override colors using CSS variables from theme.json:
 * --theme-primary, --theme-secondary, etc.
 */

/* Use theme colors if defined */
:root {
    --primary: var(--theme-primary, #1a73e8);
    --primary-dark: var(--theme-primary-dark, #1557b0);
    --secondary: var(--theme-secondary, #34a853);
    --accent: var(--theme-accent, #fbbc04);
    --error: var(--theme-error, #ea4335);
}

/* Base theme specific styles */
.hero-section {
    min-height: 500px;
}

/* Product card hover effect */
.product-card {
    transition: box-shadow 0.3s ease;
}

/* Category cards */
.category-card {
    transition: transform 0.3s ease;
}

.category-card:hover {
    transform: scale(1.02);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Loading animation */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Price styling */
.product-card-price .current {
    color: var(--primary);
}

/* Mobile menu improvements */
@media (max-width: 768px) {
    .hero-section {
        min-height: 350px;
    }

    .hero-section h1 {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.5rem;
    }
}