/* ---------- Edge cases ---------- */

/* titleContainer's margin bottom is a bit more finnicky
 * and requires media queries with alternative widths to ensure
 * the main product image doesn't overlap the text
 */
@media screen and (min-width: 580px) and (max-width: 719px) {
    #titleContainer {
        margin-bottom: 115px !important;
    }
}

@media screen and (min-width: 720px) and (max-width: 819px) {
    #titleContainer {
        margin-bottom: 150px !important;
    }
}

@media screen and (min-width: 820px) and (max-width: 949px) {
    #titleContainer {
        margin-bottom: 200px !important;
    }
}

@media screen and (min-width: 1500px) {
    #titleContainer {
        margin-bottom: 30vh !important;
    }
    #productImage {
        width: 80% !important;
    }
}

@media screen and (min-width: 1700px) {
    #titleContainer {
        margin-bottom: calc(17vw * 1.2) !important;
    }
}

@media screen and (min-width: 1900px) {
    #titleContainer {
        margin-bottom: calc(20vw * 1.2) !important;
    }
}

/* Hide vegan certified on screen sizes where the text would overlap */
@media screen and (max-width: 408px) {
    .veganCertified {
        display: none;
    }
}


/* Values outside of media queries represent desktop values */
body {
    background: #1A1A1A;
}

.page-template {
    margin-top: initial;
}

#mainContainer {
    overflow: clip;
    min-height: 100vh;
}

.ctaContainer.desktop {
    display: flex;
    position: fixed;
    z-index: 1000;
    width: 100%;
    bottom: 65px;
    left: 65px;
}

.ctaButton.desktop {
    font-family: 'Gza';
    font-size: 16px;
    font-weight: 600;
    line-height: 18.72px;
    text-align: center;
    padding: 20px 30px 20px 30px;
    border-radius: 30px;
    color: #FFFFFF;
    cursor: pointer;
    background: rgb(252, 79, 0);
    border: 1px solid rgb(252, 79, 0)
}

.ctaContainer.mobile {
    display: none;
    justify-content: center;
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 150px;
    pointer-events: none;
}

.ctaButton.mobile {
    display: none;
    font-family: 'Gza';
    font-size: 16px;
    font-weight: 600;
    line-height: 18.72px;
    text-align: center;
    padding: 10px 20px 10px 20px;
    border-radius: 30px;
    color: #FFFFFF;
    cursor: pointer;
    background: rgb(252, 79, 0);
    border: 1px solid rgb(252, 79, 0);
    pointer-events: all;
}

#titleContainer {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 300px;
}

#title {
    font-family: Extenda60;
    font-size: 300px;
    line-height: 240px;
    letter-spacing: 0.07em;
    text-align: center;
    color: #FFFFFF;
}

#productImage {
    position: absolute;
    top: 337px;
    width: 90%;
    height: auto;
}

#productInfoContainer {
    margin-bottom: 100px;
    padding: 0 150px;
}

#productInfoTitle {
    font-family: Gza;
    font-size: 42px;
    font-weight: 600;
    line-height: 66px;
    text-align: left;
    color: #FFFFFF;
}

#productInfoDescription {
    font-family: 'Univers LT Roman';
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #FFFFFF;
}

#productInfoSegmentContainer.mobile {
    display: none;
}

#productInfoSegmentControls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 50px;
}

#productInfoSegmentControls .segmentControl {
    font-family: 'Gza';
    font-size: 16px;
    font-weight: 700;
    line-height: 18.72px;
    text-align: left;
    padding: 10px 30px 10px 30px;
    border-radius: 30px;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    cursor: pointer;
}

#productInfoSegmentControls .segmentControl.active {
    background: #5F5F5F;
    color: #FFFFFF;
}

.productInfoSegmentContent {
    display: none;
    color: #FFFFFF;
    font-family: 'Univers LT Roman';
    padding: 0 150px 200px 150px;
}

.productInfoSegmentContent.active {
    display: block;
}

.productInfoSegmentContent p.gridHeading {
    font-family: 'Univers LT Roman';
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    margin-bottom: 70px;
}


.productInfoSegmentGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.productInfoSegmentGrid p {
    font-family: 'Univers LT Roman';
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: #FFFFFF;
}

.productInfoSegmentGrid p.heading {
    font-size: 30px;
    font-weight: 700;
    line-height: 28.72px;
    text-align: left;
    padding-bottom: 10px;
}

.productInfoSegmentGrid .top-left {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    grid-area: 1 / 1 / 2 / 2;
    max-width: 300px;
}

.productInfoSegmentGrid .top-right {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    grid-area: 1 / 3 / 2 / 4;
    max-width: 300px;
    justify-self: flex-end;
}

.productInfoSegmentGrid .bottom-left {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    grid-area: 3 / 1 / 4 / 2;
    max-width: 300px;
}

.productInfoSegmentGrid .bottom-right {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    grid-area: 3 / 3 / 4 / 4;
    max-width: 300px;
    justify-self: flex-end;
}

.productInfoSegmentGrid img {
    grid-area: 1 / 2 / 4 / 3;
    padding: 0 100px;
    margin: auto 0 auto 0;
    width: 100%;
    height: auto;
}

#videoContainer {
    position: relative;
    padding-bottom: 56.25%; /* 16x9 */
    margin-bottom: 80px;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

#video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.videoControls.desktop {
    visibility: visible;
    position: absolute;
    bottom: 100px;
    left: 50px;
    z-index: 200;
    background-color: #00000080;
    border-radius: 60px;
    padding: 5px 10px;
}
.videoControls.mobile {
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 60px;
    padding: 5px 10px;
}
.videoControls > .videoControlButton {
    cursor: pointer;
}

#sustainabilityContainer {
    padding-left: 150px;
    margin-bottom: 50px;
}

#sustainabilityTitle {
    font-family: Gza;
    font-size: 42px;
    font-weight: 600;
    line-height: 66px;
    text-align: left;
    color: #FFFFFF;
    margin: 0 0 30px 0px;
}

.swiper-slide {
    position: relative
}

.swiperTextContainer {
    position: absolute;
    top: 20%;
    left: 10%;
    width: 70%;
}

.swiperTextContainer.alt {
    top: 20%; 
    width: 80%
}

.swiperTextContainer.alt2 {
    top: 20%;
    width: 82%;
    left: 6%;
}

.veganCertified {
    position: absolute;
    bottom: 10%;
    left: 10%;
    height: 55px;
    width: 68px;
}

.swiperTitle {
    font-family: Extenda40;
    font-size: 110px;
    line-height: 90px;
    letter-spacing: 0.01em;
    text-align: left;
    color: #EDFF00;
    margin-bottom: 7px;
}

.swiperDescription {
    font-family: 'Univers LT Roman';
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #FFFFFF;
}

.sustainabilityIMG {
    max-width: 600px;
    width: 100%;
    height: 586px;
    object-fit: cover;
}

#sustainabilityContainer .swiper-slide {
    width: 100%;
    max-width: 600px;
    height: 586px;
    cursor: pointer;
}

#sustainabilityContainer .swiper-slide:hover {
    opacity: 0.75;
    transition: all 0.5s;
    transform: scale(1.02);
}

#ecoFriendlyContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 100px;
    margin-bottom: 120px;
}

#ecoFriendlyTitle {
    font-family: Extenda40;
    /* font-size: 120px; */
    font-size: calc(100vw / 9);
    font-weight: 400;
    line-height: calc(100vw / 10);
    text-align: center;
    margin: 20px 0 0 0;
    color: #EEFF00;
    letter-spacing: 4px;
    opacity: 0;
    width: calc(100vw - 35%);
    text-transform: uppercase;
}

#ecoFriendlyAuthor {
    font-family: 'Univers LT Roman';
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #FFFFFF;
    opacity: 0;
    margin: 0;
    margin-top: 40px;
}

#ecoFriendlyTitle span {
    color: #1A1A1A;
    text-stroke: #EEFF00 solid 1px;
    -webkit-text-stroke: #EEFF00 1px;
    /* display: block; */
}

#ecoFriendlyImageContainer {
    display: inline-block;
}

#ecoFriendlyTitle img {
    height: calc(100vw / 16.5);
    /* width: 239.58px;
    height: 80px; */
}

#productSelector {
    display: flex;
    justify-content: center;
    align-items: center;
}

#productSelectorName {
    font-family: Extenda60;
    font-size: 40px;
    line-height: 60px;
    letter-spacing: 0.05em;
    text-align: center;
    color: white;
}

#productSelectorName > span {
    font-family: Extenda40;
}

#productSwiper {
    position: relative;
}

#productSwiper .swiper-slide {
    display: flex;
    justify-content: center;
}

#productSwiper .swiper-wrapper {
    position: relative;
}

#productSwiper .swiper-pagination {
    display: none;
    height: 20px;
    width: 100%;
}

#productSwiper .swiper-pagination-bullet {
    background: #FFFFFF;
    opacity: 0.5;
    height: 3px;
    width: 20px;
    border-radius: 0;
}

#productSwiper .swiper-pagination-bullet-active {
    background: #FFFFFF;
    opacity: 1;
}

#productSwiperThumbsContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 0;
    margin-bottom: 150px;
}

#productSwiperThumbs {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    margin: 0 20px;
    width: 500px;
}

#productSwiperThumbsContainer .swiper-button-next {
    position: initial;
    margin-top: 20px;
    padding-left: 5px;
    background: url("../../assets/images/arrow-right-outline.svg") no-repeat;
}

#productSwiperThumbsContainer .swiper-button-next:after {
    content: "";
}

#productSwiperThumbsContainer .swiper-button-prev {
    position: initial;
    margin-top: 20px;
    padding-right: 5px;
    background: url("../../assets/images/arrow-left-outline.svg") no-repeat;
}

#productSwiperThumbsContainer .swiper-button-prev:after {
    content: "";
}

.productIMG {
    height: 600px;
    width: 732px;
    object-fit: contain;
}

.productIMG.padding {
    padding: 40px;
}

#productSwiperThumbs .swiper-wrapper {
    display: flex;
    justify-content: center;
    width: auto;
}

#productSwiperThumbs .swiper-slide {
    display: flex;
    height: 80px;
    width: 80px;
    justify-content: center;
    align-items: center;
    opacity: 1;
    cursor: pointer;
    /* background-size: contain;
    background-position: center;
    background-repeat: no-repeat; */
}

#productSwiperThumbs .thumbIMG {
    height: 50px;
    width: 50px;
    object-fit: contain;
}

#productSwiperThumbs .thumbIMGOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #2E2E2E;
    border-radius: 10px;
}

#productSwiperThumbs .swiper-slide-thumb-active .thumbIMGOverlay {
    background: rgba(0, 0, 0, 0.5) !important;
}

#productSwiperThumbs .swiper-slide-thumb-active {
    opacity: 1;
}

#countdownContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
    padding: 0 60px;
    gap: 40px;
}

.countdownTextContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    /* margin-bottom: 80px; */
}

.countdownUnitContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
}

.countdownPrimaryText {
    font-family: Gza;
    font-size: 50px;
    font-weight: 400;
    line-height: 50px;
    text-align: center;
    color: #FC4F00;
}

.countdownSecondaryText {
    font-family: 'Univers LT Roman';
    font-size: 10px;
    font-weight: 400;
    line-height: 11px;
    text-align: center;
    color: #FFFFFF;
}

#countdownFormContainer {
    position: relative;
    width: 40%;
}

#countdownFormInput {
    font-family: 'Univers LT Roman';
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    width: 80%;
    height: 40px;
    border-radius: 30px;
    padding-left: 12px;
    padding-right: 45px;
    border: none;
}

#countdownButton {
    position: absolute;
    right: 0;
    bottom: 0;
    font-family: 'Gza';
    font-size: 16px;
    font-weight: 600;
    line-height: 18.72px;
    text-align: center;
    padding: 10px 20px 10px 20px;
    border-radius: 30px;
    color: #FFFFFF;
    cursor: pointer;
    background: rgb(252, 79, 0);
    border: 1px solid rgb(252, 79, 0)
}

#countdownFormSuccess {
    font-family: 'Univers LT Roman';
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
    font-weight: 500;
    color: rgb(252, 79, 0);
}

.productInfoMobileTextContainer {
    font-family: 'Univers LT Roman';
    display: flex;
    padding-left: 20px;
    gap: 30px;
    overflow-x: scroll;
}

.productInfoMobileTextContainer::-webkit-scrollbar {
    display: none;
}

.productInfoMobileTextContainer .heading {
    font-family: 'Univers LT Roman';
    font-size: 30px;
    font-weight: 700;
    line-height: 33px;
    letter-spacing: 0.01em;
    text-align: left;
    margin-bottom: 10px;
}

.productInfoMobileTextContainer p {
    font-family: 'Univers LT Roman';
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
}

.productInfoMobileText {
    font-family: 'Univers LT Roman';
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #FFFFFF;
    width: 65%;
    flex-shrink: 0;
}

/* Mobile values */
@media screen and (max-width: 949px) {

    .ctaContainer.mobile {
        display: flex;
    }

    .ctaContainer.desktop {
        display: none;
    }
    
    .ctaButton.mobile {
        display: block;
    }

    .ctaContainer.desktop {
        display: none;
    }

    #titleContainer {
        margin: 115px 0px 40px 0px;

    }
    #title {
        font-family: Extenda60;
        font-weight: 300;
        font-size: 90px;
    }

    #productImage {
        top: 180px;
    }

    #productInfoContainer {
        padding: 0 20px;
        /* margin-top: 100px; */
        margin-bottom: 50px;
    }

    #productInfoTitle {
        font-size: 30px;
        line-height: 40px;
    }

    #productInfoSegmentContainer.mobile {
        display: block;
    }

    #productInfoSegmentControls {
        padding: 0 20px;
    }

    #productInfoSegmentControls .segmentControl {
        padding: 10px;
        text-align: center;
    }

    #productInfoSegmentContainer.desktop {
        display: none;
    }

    .productInfoSegmentContent {
        padding: 0px;
    }

    .productInfoSegmentContent.active {
        display: flex;
        flex-direction: column;
        /* align-items: center; */
    }

    .productInfoSegmentContent p.gridHeading {
        margin-bottom: 50px;
        padding: 0 20px;
    }

    .productInfoMobileIMG {
        padding: 20px;
        height: 100%;
        width: 410px;
        margin: 0 auto 50px auto;
    }

    .productInfoMobileIMG.vertical {
        width: 300px;
    }

    #videoContainer {
        margin: 50px 0px;
        position: relative;
        height: 80vh;
        width: 100%;
        background-color: #1A1A1A;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: unset;
    }

    #video {
        position: absolute;
        width: 320%;
        height: 100%;
        top: unset;
        left: unset;
    }
    .videoControls.desktop {
        visibility: hidden;
    }
    .videoControls.mobile {
        visibility: visible;
    }

    #sustainabilityContainer {
        padding-left: 20px;
    }

    #sustainabilityTitle {
        font-size: 30px;
        line-height: 40px;
    }

    .swiperTitle {
        font-family: Extenda40;
        font-size: 60px;
        line-height: 50px;
        letter-spacing: 0.01em;
        text-align: left;
        color: #EDFF00;
        margin-bottom: 7px;
    }

    .swiperTextContainer.alt {
        top: 10%; 
        width: 80%;
    }

    .swiperTextContainer.alt2 {
        top: 10%;
        width: 82%;
        left: 6%;
    }
    
    .swiperDescription {
        font-family: 'Univers LT Roman';
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        text-align: left;
        color: #FFFFFF;
    }

    .sustainabilityIMG {
        height: 316px;
        width: 100%;
        object-fit: fill;
    }

    #sustainabilityContainer .swiper-slide {
        width: 100%;
        max-width: 300px;
        height: 316px;
    }

    #ecoFriendlyContainer {
        padding: 0 20px;
        margin-bottom: 30px;
    }

    #ecoFriendlyTitle {
        width: initial;
        font-size: 59px;
        line-height: 59px;
        letter-spacing: 2px;
    }

    #ecoFriendlyImageContainer {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #ecoFriendlyTitle img {
        height: 64px;
    }

    #productSelector {
        margin-bottom: 50px;
	padding: 0 20px;
    }

    #productSwiper {
        margin-bottom: 50px;
        padding-bottom: 100px;
    }

    .productIMG {
        height: 200px;
        width: 350px;
    }

    .productIMG.padding {
        padding: 0px;
    }

    #productSwiperThumbsContainer {
        display: none;
    }

    #productSwiperThumbs {
        display: none;
    }

    #productSwiper .swiper-pagination {
        display: block;
    }

    #productSwiper .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
        transform: initial;
    }

    #productSwiper .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
        transform: initial;
    }

    #productSwiper .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
        transform: initial;
    }

    #productSwiper .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
        transform: initial;
    }

    #countdownContainer {
        flex-direction: column;
        padding: 0 20px;
        gap: 30px;
    }

    #countdownFormContainer {
        width: 100%;
    }

    .countdownTextContainer {
        gap: 0px;
    }

    .countdownPrimaryText {
        font-size: 30px;
    }
    .countdownSecondaryText {
        font-size: 9px;
    }
}

/* Tablet values */
@media screen and (min-width: 950px) and (max-width: 1200px) {
    #titleContainer {
        margin-bottom: 200px;
    }

    #title {
        font-size: 200px;
    }

    .productInfoSegmentContent {
        padding: 0 50px 200px 50px;
    }

    #productImage {
        top: 270px;
    }

    #productInfoContainer {
        padding: 0 50px;
    }

    .productInfoSegmentGrid img {
        padding: 0px;
    }

    #sustainabilityContainer {
        padding-left: 50px;
    }

    .swiperTitle {
        font-size: 80px;
    }

    .swiperDescription {
        font-size: 16px;
    }

    #ecoFriendlyContainer {
        margin-bottom: 50px;
    }

    #countdownContainer {
        flex-direction: column;
        padding: 0 20px;
    }

    #countdownFormContainer {
        width: 70%;
    }
}