/* ========================================
   Reset & Base
   ======================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
    font-family: 'Sora', 'Segoe UI', 'Arial', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ========================================
   Slideshow Container
   ======================================== */
.slideshow {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.slide-active {
    opacity: 1;
    z-index: 2;
}

/* ========================================
   Hero Slide - Background
   ======================================== */
.hero-slide {
    position: relative;
}

.hero-bg {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    display: block;
}

/* ========================================
   Hero Slide - Overlay Layer
   ======================================== */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}

/* ========================================
   Hero - Title "LATEST SALE HERO"
   ======================================== */
.hero-title {
    position: absolute;
    top: 7.4vh;          /* Y 80px */
    left: 8.75vw;        /* X 168px */
    font-size: 3.33vw;   /* 64px */
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0;
}

/* ========================================
   Hero - Month & Deals (top-right, one line)
   ======================================== */
.hero-month-deals {
    position: absolute;
    top: 8.89vh;         /* Y 96px */
    left: 54vw;          /* X 1037px */
    display: flex;
    align-items: baseline;
}

.hero-month {
    font-size: 1.875vw;  /* 36px */
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    margin-right: 0.5vw;
}

.hero-deals-count {
    font-size: 1.875vw;  /* 36px */
    font-weight: 800;
    color: #FAD74D;
    margin-right: 0.5vw;
}

.hero-deals-label {
    font-size: 1.875vw;  /* 36px */
    font-weight: 800;
    color: #FAD74D;
    text-transform: uppercase;
}

/* ========================================
   Hero - Leaderboard (right side)
   ======================================== */
.hero-leaderboard-section {
    position: absolute;
    top: 14.91vh;        /* Y 161px */
    left: 57.19vw;       /* X 1098px */
    display: flex;
    flex-direction: column;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    height: 4.63vh;      /* line-height 50px */
}

.leaderboard-rank {
    font-size: 1.5625vw; /* 30px */
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0 0 0.2vw rgba(0, 0, 0, 0.2);
    margin-right: 0.3vw;
}

.leaderboard-name {
    font-size: 1.5625vw; /* 30px */
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0 0 0.2vw rgba(0, 0, 0, 0.2);
    margin-right: 0.3vw;
}

.leaderboard-flag {
    width: 1.5vw;        /* ~29px */
    height: 1vw;         /* ~19px */
    object-fit: contain;
    margin-left: 0.2vw;
}

.leaderboard-score {
    font-size: 1.5625vw; /* 30px */
    font-weight: 400;
    color: #ffffff;
    margin-left: 0.3vw;
    text-shadow: 0 0 0.2vw rgba(0, 0, 0, 0.2);
}

/* ========================================
   Hero - Featured Person Photo
   ======================================== */
.hero-featured-photo-wrap {
    position: absolute;
    top: 18.61vh;        /* Y 201px */
    left: 11.98vw;       /* X 230px */
    width: 26.04vw;      /* 500px */
    height: 46.3vh;      /* 500px */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    -webkit-mask-image: linear-gradient(to bottom, black 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 76%, transparent 100%);
}

.hero-featured-photo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

/* ========================================
   Hero - Featured Person Name
   ======================================== */
.hero-featured-name {
    position: absolute;
    top: 52.13vh;        /* Y 563px */
    left: 6.77vw;        /* X 130px */
    width: 32.29vw;      /* 620px */
    text-align: center;
    font-size: 2.5vw;    /* 48px */
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 6.3vh;  /* 68px */
    filter: drop-shadow(0 0.2vh 0.4vh rgba(0, 0, 0, 0.5));
}

/* ========================================
   Hero - Store Photo (bottom-left)
   ======================================== */
.hero-store-photo {
    position: absolute;
    top: 62.96vh;        /* Y 680px */
    left: 6.77vw;        /* X 130px */
}

.hero-store-project-photo-wrap {
    position: relative;
    width: 15.625vw;     /* 300px */
    height: 27.78vh;     /* 300px */
    border-radius: 3.125vw; /* 60px */
    overflow: hidden;
}

.hero-store-project-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ========================================
   Hero - Store Name & Price
   ======================================== */
.hero-store-info {
    position: absolute;
    top: 70.09vh;        /* Y 757px */
    left: 24.48vw;       /* X 470px */
    width: 18.75vw;      /* 360px */
    display: flex;
    flex-direction: column;
}

.hero-store-name-row {
    margin-bottom: 1.85vh;  /* 20px */
    position: relative;
    display: inline-flex;
    align-items: center;
}

.hero-store-name {
    font-size: 1.5vw;    /* ~29px */
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
}

.hero-store-flag {
    width: 2.5vw;        /* 48px */
    height: 2.5vw;       /* 48px */
    object-fit: contain;
    margin-left: 0.4vw;
}

.hero-store-price {
    font-size: 2vw;      /* ~38px */
    font-weight: 800;
    color: #FAD74D;
}

/* ========================================
   Static Slide
   ======================================== */
.static-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.static-slide img {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
}