/* Hero Section Styles for Different Pages */

/* Men's Page Hero */
.men-page .hero {
    background-image: url('../images/hero2.jpeg');
    background-size: cover;
    background-position: center;
}

/* Products Page Hero */
/* Products Page Hero */
.products-page .hero {
    background-image: url('../images/hero_img.png');
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;
    /* Fallback/filler color */
}

/* Women's Page Hero */
.women-page .hero {
    background-image: url('../images/women.svg');
    background-size: cover;
    background-position: center;
}

/* Accessories Page Hero */
.accessories-page .hero {
    background-image: url('../images/accessories_img.png');
    background-size: cover;
    background-position: center;
}

/* Collection Page Hero */
.collection-page .hero {
    background-image: url('../images/collection-hero.svg');
    background-size: cover;
    background-position: center;
}

/* About Page Hero */
.about-page .hero {
    background-image: url('https://images.unsplash.com/photo-1521572008054-d842ced00a89?auto=format&fit=crop&q=80&w=1600');
    background-size: cover;
    background-position: center;
}

/* Home Page Hero */
.home-page .hero {
    position: relative;
    overflow: hidden;
}

/* Video Background Styles */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

#hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* Fallback for when video is not available */
.home-page .hero:not(.video-loaded) {
    background-image: url('../images/home-hero.svg');
    background-size: cover;
    background-position: center;
}