/* Shop Hero Styles */
:root {
    --hero-bg: #0f172a;
    /* Deep Navy */
    --hero-text: #ffffff;
    --hero-accent-start: #3b82f6;
    /* Blue */
    --hero-accent-end: #ef4444;
    /* Red */
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.05);
}

.shop-hero {
    background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
    padding: 100px 0;
    color: var(--hero-text);
    position: relative;
    overflow: hidden;
    margin-bottom: -40px;
    background-image: none !important;
    /* Context: Ensure no background image */
    /* Slight overlap with content */
}

/* Background Glow Effect - Removed per request */

.hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Content Side */
.hero-content {
    max-width: 600px;
    text-align: left;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
}

.premium-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
    font-weight: 500;

    /* Reset Global Styles */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.premium-breadcrumb::after {
    display: none !important;
    content: none !important;
}

.premium-breadcrumb a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.premium-breadcrumb a:hover {
    color: #fff;
}

.premium-breadcrumb .separator {
    font-size: 0.7rem;
    opacity: 0.5;
}

.premium-breadcrumb .current {
    color: #fff;
    font-weight: 700;
}

.collection-title {
    font-family: 'Playfair Display', serif;
    /* Or system font if not loaded */
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 15px;
    letter-spacing: -1px;
    background: linear-gradient(to right, #ffffff, #cbd5e1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.collection-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
    font-weight: 400;
}

.gradient-divider {
    height: 4px;
    width: 60px;
    background: linear-gradient(90deg, var(--hero-accent-start), var(--hero-accent-end));
    border-radius: 2px;
}

/* Stats Badge Side */
.hero-stats {
    display: flex;
    align-items: center;
}

.stat-badge {
    background: #EAB308;
    /* Yellow/Gold */
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 25px 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    color: #ffffff;
}

.stat-badge:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.stat-badge .count {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-badge .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-inner {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .hero-content {
        margin: 0 auto;
    }

    .premium-breadcrumb {
        justify-content: center;
        /* Keep centered on mobile? Or left? User said "left align". Let's try left on mobile too for consistency, or keep center if "shop hero" implies desktop.
           Usually mobile looks better centered if stacked. I'll keep mobile centered for now as it's a specific media query.
        */
        justify-content: center;
    }

    .collection-title {
        font-size: 3rem;
    }

    .gradient-divider {
        margin: 0 auto;
    }
}