.small.pb-50:has(#black-friday) {
    padding-bottom: 0px !important;
}

#black-friday {
    position: relative; max-width: none;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(to bottom, #0e1a2d 0%, #1e3353 25%);
    z-index: 1;
}
#black-friday > .content {
    padding-left: 16px;
    padding-right: 16px;
}

#black-friday > .content form {
    position: relative;
    max-width: 450px;
    z-index: 20;
}

#black-friday .galaxies,
#black-friday .planets,
#black-friday .perks-launch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}

#black-friday .space {
    position: relative;
}

#black-friday .space .tube .offers .btns-container {
    position: absolute;
    top: 440px;
    width: 100%;
}

/* Button Container & Layout
     =========================================== */
#black-friday .btns-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 32px;
}

/* Sticky Button Styles */
#black-friday .sticky-button {
    position: fixed;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    z-index: 1000;
    bottom: -100px;
    transform: translateY(0);
    transition: transform 0.4s ease-in-out, bottom 0.4s ease-in-out;
    padding: 15px 0;
    background: linear-gradient(to top, rgba(14, 26, 45, 0.9) 0%, rgba(30, 51, 83, 0) 100%);
    pointer-events: none;
}

#black-friday .sticky-button.visible {
    bottom: 0;
    pointer-events: auto;
}

#black-friday .sticky-button a {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Offer Cards
     =========================================== */
#black-friday [class*="-card"].offer {
    position: absolute;
    max-width: 360px;
    box-shadow: 0 0.063rem 1rem 0 rgb(255 255 255 / 30%) !important;
    padding: 1.5rem;
    overflow: visible;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

#black-friday .cards [class*="-card"].offer.visible {
    opacity: 1;
    transform: translateY(0);
}

#black-friday .cards {
    position: absolute;
    top: 680px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
}

#black-friday .cards [class*="-card"].offer.one {
    top: -100px;
    bottom: unset;
    left: unset;
    right: unset;
}

#black-friday .cards [class*="-card"].offer.two {
    top: 265px;
    bottom: unset;
    left: unset;
    right: unset;
}

#black-friday .cards [class*="-card"].offer.three {
    top: 580px;
    bottom: unset;
    left: unset;
    right: unset;
}

#black-friday .cards [class*="-card"].offer.four {
    top: unset;
    bottom: -1185px;
    left: unset;
    right: unset;
}

#black-friday .cards [class*="-card"].offer.five {
    top: 1240px;
    bottom: unset;
    left: unset;
    right: unset;
}

#black-friday .cards [class*="-card"].offer.six {
    top: 1645px;
    bottom: unset;
    left: unset;
    right: unset;
}

#black-friday .cards [class*="-card"].offer.seven {
    top: unset;
    bottom: -2195px;
    left: unset;
    right: unset;
}

#black-friday .cards [class*="-card"].offer.eight {
    top: unset;
    bottom: -2590px;
    left: unset;
    right: unset;
}

#black-friday .cards [class*="-card"].offer.nine {
    top: 2630px;
    bottom: unset;
    left: unset;
    right: unset;
}

#black-friday .cards [class*="-card"].offer.ten {
    top: 3285px;
    bottom: unset;
    left: unset;
    right: unset;
}

#black-friday .cards [class*="-card"].offer .title {
    display: flex;
    align-items: center;
}

/* Target Elements
     =========================================== */
#black-friday .cards [class*="-card"].offer.top-left .target,
#black-friday .cards [class*="-card"].offer.top-right .target,
#black-friday .cards [class*="-card"].offer.bottom-left .target,
#black-friday .cards [class*="-card"].offer.bottom-right .target {
    position: absolute;
}

#black-friday .cards [class*="-card"].offer.top-left .target {
    top: -22px;
    bottom: unset;
    left: -22px;
    right: unset;
}

#black-friday .cards [class*="-card"].offer.top-right .target {
    top: -22px;
    bottom: unset;
    left: unset;
    right: -22px;
}

#black-friday .cards [class*="-card"].offer.bottom-left .target {
    bottom: -22px;
    top: unset;
    left: -22px;
    right: unset;
}

#black-friday .cards [class*="-card"].offer.bottom-right .target {
    bottom: -22px;
    top: unset;
    left: unset;
    right: -22px;
}

#black-friday .cards [class*="-card"].offer.bottom-left,
#black-friday .cards [class*="-card"].offer.top-left {
    /*padding-right: 1.5rem !important; padding-left: 60px !important;*/
}

#black-friday .cards [class*="-card"].offer.bottom-right,
#black-friday .cards [class*="-card"].offer.top-right {
    /*padding-right: 60px !important; padding-left: 1.5rem !important;*/
}

/* Tag Elements
     =========================================== */
#black-friday .cards [class*="-card"].offer:has(.tag[class*="bottom"]) {
    padding-bottom: 2.5rem;
}

#black-friday .cards [class*="-card"].offer:has(.tag[class*="top"]) {
    padding-top: 2.5rem;
}

#black-friday .prize-draw {
    position: absolute;
    background-image: url("/sites/default/files/2025-10/black-friday-prize-draw.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 3650px;
    left: calc(50% + -235px);
    width: 470px;
    height: 395px;
}

/* Background Elements
     =========================================== */

#black-friday .perks-launch {
    position: absolute;
    background-image: url("/sites/default/files/2025-11/black-friday-perks-launch-animated.svg");
    background-position: center;
    background-repeat: no-repeat;
    top: 0px;
    left: calc(50% - 600px);
    width: 1200px;
    height: 360px;
}

#black-friday .astronaut {
    position: absolute;
    background-image:url("/sites/default/files/2025-10/astronaut_animated%201.svg");
    background-repeat: no-repeat;
    background-position: calc(50% - 30px) center;
    top: 5px;
    height: 250px;
    width: 100%;
    z-index: 1;
}

#black-friday .tube {
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='606' height='4314' fill='none'%3E%3Cpath stroke='%2300c552' stroke-width='16' d='M299.575 6s60 58 0 48.5c-60.001-9.5-77.501 119.5 0 68.5 77.5-51 48.64 152 0 70.5s-310.6333 229 9.003 229c319.637 0 329.637 393.322 21.997 394-307.6397.678-367.0004 465-31 465 336 0 366.952 409.5 0 409.5-366.9527 0-396.9527 480 0 480 396.952 0 396.952 532 0 532-396.9527 0-378.5749 452 0 452C678.149 3155 599 3561 289 3561c-310.0001 0-333.5001 312.64 0 402 333.5 89.36 0 344 0 344'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(50% + 60px) 155px;
    height: 4444px;
    width: 100%;
}

#black-friday .neptune {
    position: absolute;
    background-image: url("/sites/default/files/2025-10/black-friday-neptune.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 920px;
    left: calc(50% - 600px);
    width: 325px;
    height: 316px;
    z-index: -1;
}

#black-friday .uranus {
    position: absolute;
    background-image: url("/sites/default/files/2025-10/black-friday-uranus.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 1600px;
    left: calc(50% + -40px);
    width: 435px;
    height: 356px;
    z-index: -1;
}

#black-friday .saturn {
    position: absolute;
    background-image: url("/sites/default/files/2025-10/black-friday-saturn.svg");
    background-repeat: no-repeat;
    background-size: contain;
    top: 2510px;
    left: calc(50% - 430px);
    width: 245px;
    height: 176px;
    z-index: -1;
}

#black-friday .earth {
    position: absolute;
    background-image: url("/sites/default/files/2025-11/black-friday-planet-earth-animated_0.svg"); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 2940px;
    left: calc(50% + 120px);
    width: 492px;
    height: 603px;
    z-index: -1;
}

#black-friday .mercury {
    position: absolute;
    background-image: url("/sites/default/files/2025-10/black-friday-planet-mercury.svg");
    background-repeat: no-repeat;
    background-size: contain;
    top: 3610px;
    left: calc(50% - 510px);
    width: 122px;
    height: 122px;
    z-index: -1;
}

#black-friday .astronaut-surfer {
    position: absolute;
    background-image: url("/sites/default/files/2025-11/black-friday-surfer-animated.svg");
    background-repeat: no-repeat;
    background-size: contain;
    top: 1520px;
    left: calc(50% - 520px);
    width: 317px;
    height: 378px;
    z-index: -1;
}

#black-friday .ground {
    position: relative;
    margin-top: -180px;
    bottom: 0;
    height: 550px;
    width: 100%;
}

#black-friday .stars {
    position: absolute;
    background-image: url("/sites/default/files/2025-10/black-friday-stars.svg");
    background-repeat: repeat-x;
    background-position: center;
    top: 0px;
    left: calc(50% - 720px);
    width: 1440px;
    height: 145px;
    z-index: -1;
}

#black-friday .ufo {
    position: absolute;
    background-image: url("/sites/default/files/2025-11/black-friday-ufo-animated.svg");
    background-repeat: no-repeat;
    background-position: center;
    bottom: -60px;
    left: calc(50% - 250px);
    width: 500px;
    height: 450px;
    z-index: 1;
}

#black-friday .moon {
    position: absolute;
    background-image: url("/sites/default/files/2025-10/black-friday-moon.svg");
    background-repeat: no-repeat;
    background-size: contain;
    top: 0;
    left: calc(100% - 160px);
    width: 120px;
    height: 120px;
    z-index: -1;
}

#black-friday .land {
    position: absolute;
    background-image: url("/sites/default/files/2025-10/black-friday-ground.svg");
    background-repeat: repeat-x;
    background-position: calc(50% + 180px) center;
    background-size: cover;
    bottom: 0;
    width: 100%;
    height: 292px;
    z-index: -1;
}

#black-friday .cat {
    position: absolute;
    background-image: url("/sites/default/files/2025-11/black-friday-cat-animated.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    bottom: 30px;
    left: calc(50% - 150px);
    width: 57px;
    height: 100px;
}

#black-friday .grass {
    background-color: #06473C;
    padding-bottom: 3rem;
}

#black-friday .grass h3 {
    max-width: 800px;
}

#black-friday .planets {
    min-height: 100%;
    background-image: url("/sites/default/files/2025-10/black-friday-planets.svg");
    background-position: center 130px;
    background-repeat: no-repeat;
    background-size: 1260px;
}

#black-friday .galaxies {
    min-height: 100%;
    background-image: url("/sites/default/files/2025-10/black-friday-solar-system.svg"),
    url("/sites/default/files/2025-10/black-friday-solar-system.svg"),
    url("/sites/default/files/2025-10/black-friday-solar-system.svg"),
    url("/sites/default/files/2025-10/black-friday-solar-system.svg"),
    url("/sites/default/files/2025-10/black-friday-solar-system.svg"),
    url("/sites/default/files/2025-10/black-friday-solar-system.svg"),
    url("/sites/default/files/2025-10/black-friday-solar-system.svg"),
    url("/sites/default/files/2025-10/black-friday-solar-system.svg"),
    url("/sites/default/files/2025-10/black-friday-solar-system.svg");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: calc(50% - 550px) 340px, calc(50% + 710px) 460px, calc(50% + 590px) 1200px, calc(50% - 710px) 1580px, calc(50% + 550px) 2180px, calc(50% - 640px) 2500px, calc(50% + 730px) 3070px, calc(50% - 700px) 4010px, calc(50% + 550px) 3780px;
    background-size: 825px, 957px, 758px, 758px, 607px, 1193px, 669px, 778px, 1057px;
}

/* Default styles for all screen sizes (mobile first) */
#black-friday > .content {
    padding: 0 15px;
}

#black-friday [class*="-card"] {
    width: 100%;
    margin-bottom: 20px;
    padding: 20px;
    box-sizing: border-box;
}



/* Tablet Styles (768px and up) */
@media (min-width: 768px) {
    #black-friday > .content {
        margin: 0 auto;
        padding: 0 30px;
    }

    #black-friday .space .tube .offers .btns-container {
        position: absolute;
        top: 440px;
        width: 100%;
    }

    /* Button Container & Layout
        =========================================== */
    #black-friday .btns-container {
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        align-items: center;
        width: 100%;
    }

    #black-friday .btn-center {
        grid-column: 2 / 3;
        justify-self: center;
        width: unset;
    }

    #black-friday .btn-right {
        grid-column: 3 / 5;
        justify-self: end;
        margin-right: 0;
        width: unset;
    }

    .card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #black-friday .cards [class*="-card"] {
        /*width: calc(50% - 15px);*/
        /*margin-bottom: 30px;*/
    }


    /* Target Elements
        =========================================== */
    #black-friday .cards [class*="-card"].offer.top-left-md .target,
    #black-friday .cards [class*="-card"].offer.top-right-md .target,
    #black-friday .cards [class*="-card"].offer.bottom-left-md .target,
    #black-friday .cards [class*="-card"].offer.bottom-right-md .target {
        position: absolute;
    }

    #black-friday .cards [class*="-card"].offer.top-left-md .target {
        top: -22px;
        bottom: unset;
        left: -22px;
        right: unset;
    }

    #black-friday .cards [class*="-card"].offer.top-right-md .target {
        top: -22px;
        bottom: unset;
        left: unset;
        right: -22px;
    }

    #black-friday .cards [class*="-card"].offer.bottom-left-md .target {
        bottom: -22px;
        top: unset;
        left: -22px;
        right: unset;
    }

    #black-friday .cards [class*="-card"].offer.bottom-right-md .target {
        bottom: -22px;
        top: unset;
        left: unset;
        right: -22px;
    }

    #black-friday .uranus {
        top: 1960px;
        left: calc(50% + 300px);
        z-index: 1;
    }

    #black-friday .saturn {
        top: 2700px;
        left: calc(50% - 560px);
    }

    #black-friday .earth {
        left: calc(50% + 330px);
    }

    #black-friday .mercury {
        top: 3730px;
        left: calc(50% - 480px);
    }
}

/* Desktop Styles (1200px and up) */
@media (min-width: 1200px) {
    .small.pb-50:has(#black-friday) {
        padding-bottom: 0px !important;
    }

    #black-friday {
        position: relative;
        max-width: none;
        padding: 0;
        overflow: hidden;
        background: linear-gradient(to bottom, #0e1a2d 0%, #1e3353 25%);
        z-index: 1;
    }

    #black-friday > .content {
        padding-left: 16px;
        padding-right: 16px;
    }

    #black-friday > .content form {
        position: relative;
        max-width: 450px;
        z-index: 20;
    }

    #black-friday .galaxies,
    #black-friday .planets,
    #black-friday .perks-launch {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: -1;
    }

    #black-friday .space {
        position: relative;
    }

    /* Offer Cards
        =========================================== */
    #black-friday .cards [class*="-card"].offer {
        position: relative;
        max-width: 360px;
        box-shadow: 0 0.063rem 1rem 0 rgb(255 255 255 / 30%) !important;
        padding: 1.5rem;
        overflow: visible;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    #black-friday .cards [class*="-card"].offer.visible {
        opacity: 1;
        transform: translateY(0);
    }

    #black-friday .cards {
        position: absolute;
        top: unset;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 16px;
    }

    #black-friday .cards [class*="-card"].offer.one {
        position: absolute;
        top: unset;
        bottom: -990px;
        left: calc(50% + 160px);
        right: unset;
    }

    #black-friday .cards [class*="-card"].offer.two {
        position: absolute;
        top: unset;
        bottom: -1145px;
        left: calc(50% - 490px);
        right: unset;
    }

    #black-friday .cards [class*="-card"].offer.three {
        position: absolute;
        top: unset;
        bottom: -1470px;
        left: calc(50% + 80px);
        right: unset;
    }

    #black-friday .cards [class*="-card"].offer.four {
        position: absolute;
        top: unset;
        bottom: -1915px;
        left: calc(50% - 445px);
        right: unset;
    }

    #black-friday .cards [class*="-card"].offer.five {
        position: absolute;
        top: unset;
        bottom: -2370px;
        left: calc(50% + 135px);
        right: unset;
    }

    #black-friday .cards [class*="-card"].offer.six {
        position: absolute;
        top: unset;
        bottom: -2910px;
        left: calc(50% - 415px);
        right: unset;
    }

    #black-friday .cards [class*="-card"].offer.seven {
        position: absolute;
        top: unset;
        bottom: -3345px;
        left: calc(50% - 255px);
        right: unset;
    }

    #black-friday .cards [class*="-card"].offer.eight {
        position: absolute;
        top: 3335px;
        bottom: unset;
        left: calc(50% + 210px);
        right: unset;
    }

    #black-friday .cards [class*="-card"].offer.nine {
        position: absolute;
        top: unset;
        bottom: -3900px;
        left: calc(50% - 540px);
        right: unset;
    }

    #black-friday .cards [class*="-card"].offer.ten {
        position: absolute;
        top: unset;
        bottom: -4210px;
        left: calc(50% - -155px);
        right: unset;
    }

    /* Target Elements
        =========================================== */
    #black-friday .cards [class*="-card"].offer.top-left-xl .target,
    #black-friday .cards [class*="-card"].offer.top-right-xl .target,
    #black-friday .cards [class*="-card"].offer.bottom-left-xl .target,
    #black-friday .cards [class*="-card"].offer.bottom-right-xl .target {
        position: absolute;
    }

    #black-friday .cards [class*="-card"].offer.top-left-xl .target {
        top: -22px;
        bottom: unset;
        left: -22px;
        right: unset;
    }

    #black-friday .cards [class*="-card"].offer.top-right-xl .target {
        top: -22px;
        bottom: unset;
        left: unset;
        right: -22px;
    }

    #black-friday .cards [class*="-card"].offer.bottom-left-xl .target {
        bottom: -22px;
        top: unset;
        left: -22px;
        right: unset;
    }

    #black-friday .cards [class*="-card"].offer.bottom-right-xl .target {
        bottom: -22px;
        top: unset;
        left: unset;
        right: -22px;
    }

    #black-friday .prize-draw {
        top: 3650px;
        left: calc(50% + 90px);
    }

    #black-friday .ground {
        position: relative;
        margin-top: -210px;
        bottom: 0;
        height: 700px;
        width: 100%;
    }

    #black-friday .ufo {
        bottom: -100px;
        left: calc(50% - 400px);
        width: 699px;
        height: 649px;
    }

    #black-friday .moon {
        left: calc(50% + 470px);
    }

    #black-friday .land {
        background-position: calc(50% + 230px) center;
        bottom: 0;
        height: 392px;
    }

    #black-friday .cat {
        bottom: 30px;
        left: calc(50% - 310px);
        width: 109px;
        height: 189px;
    }

    /* Default styles for all screen sizes (mobile first) */
    #black-friday > .content {
        padding: 0 15px;
    }

    #black-friday .cards [class*="-card"] {
        width: 100%;
        margin-bottom: 20px;
        padding: 20px;
        box-sizing: border-box;
    }
}



#black-friday .cards [class*="-card"].past-date {
    background-color: #707079!important;
}
#black-friday .cards [class*="-card"].past-date .tag {
    background-color: #D6D6DC !important;
    color: #707079 !important;
}
#black-friday .cards [class*="-card"].past-date h4,
#black-friday .cards [class*="-card"].past-date h6,
#black-friday .cards [class*="-card"].past-date p {
    color: #FFFFFF !important;
}

#black-friday .cards [class*="-card"].past-date .title svg,
#black-friday .cards [class*="-card"].past-date .title img {
    filter: grayscale(100%) contrast(2);
}