@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&display=swap');

/* ROOT */

:root {
    /* PRIMARY COLORS */
    --primary-orange: hsl(26, 100%, 55%);
    --primary-pale-orange: hsl(25, 100%, 94%);

    /* NEUTRAL COLORS */
    --neutral-very-dark-blue: hsl(220, 13%, 13%);
    --neutral-dark-grayish-blue: hsl(219, 9%, 45%);
    --neutral-grayish-blue: hsl(220, 14%, 75%);
    --neutral-light-grayish-blue: hsl(223, 64%, 98%);
    --neutral-white: hsl(0, 0%, 100%);
    /* with 75% opacity for lightbox background */
    --neutral-black: hsla(0, 0%, 0%, 0.75);

    /* FONT */
    --ff: "Kumbh Sans", sans-serif;

    /* FONT WEIGHTS */
    --fw-regular: 400;
    --fw-bold: 700; 
}

/* RESET */

*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--ff);
    font-size: 16px;
}

img {
    width: 100%;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

/* GENERAL STYLES */

/* BODY */

@media screen and (min-width: 550px) and (max-width: 899px) {
    body {
        margin: 0 5em;
    }
    
}

@media screen and (min-width: 900px) and (max-width: 1149px) {
    body {
        margin: 0 14em;
    }
}

@media screen and (min-width: 1150px) {
    body {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 10.2em;
        
    }
}


/* HEADER */

header {
    padding: 0 1.4em 0.3em 1.4em;
    height: 4.25em;
    
    display: flex;
    align-items: center; 
    justify-content: space-between;   
}

@media screen and (min-width: 1150px) {
    header {
        padding: 3.5em 2em;
        height: 7em;
        border-bottom: 1px solid var(--neutral-light-grayish-blue);
        background-color: white;
    }
} 
    

.header__flex-left, .header__flex-right {
    display: flex;
    align-items: center;
    gap: 1.05em;
    /* border: 1px solid orangered; */
}

.header__flex-right {
    height: inherit;
    align-items: center;
    justify-content: end;
    gap: 1.3em;
}

@media screen and (min-width: 1150px) {
    .header__flex-left {
        flex-direction: row-reverse;
        gap: 3.5em;
    }

    .header__flex-right {
        gap: 2.8em;
    }
}


/*  HEADER NAVIGATION MENU */

header button {
    border: none;
    background: none;
    cursor: pointer;
}

.nav__menu {
    display: none;
}

.nav__close-menu {
    display: none;
}

.nav__open-menu {
    padding-top: 0.35em ;
    padding-left: 0.05em;
}

@media screen and (min-width: 1150px) {
    .nav__open-menu {
        display: none;
    }
}


.nav__menu {
    font-size: 0.93em;
    display: flex;
    gap: 2.25em;
} 

.nav__menu a {
    color: var(--neutral-dark-grayish-blue);

    &:hover {
        cursor: pointer;
        color: var(--neutral-very-dark-blue);
        padding-bottom: 3em;
        border-bottom: 0.3em solid var(--primary-orange);
    }
}


/* NAV IN MOBILE DESIGN */

@media screen and (max-width: 1149px) {
    .nav__layer {
        position: fixed;
        inset: 0;
        background-color: var(--neutral-black);
        z-index: 100;

        display: none;
    }

    .nav__menu {
        height: 100vh;
        /* fixed: positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. */
        position: fixed;
        background-color: var(--neutral-white);
        font-size: 1.125em;
        font-weight: var(--fw-bold);
        inset: 0 0 0 0em;
        padding: 5.1em 1.4em;
        z-index: 100;
        width: 67%;
        left: -100vw;
        
        flex-direction: column;
        gap: 1.25em;
        justify-content: start;
        align-items: start;
        transition: all 0.5s ease-in-out;
    }

    .nav__menu a {
        color: var(--neutral-very-dark-blue);

        &:hover {
            color: var(--primary-orange);
            border-bottom: none;
        }
    }

    .nav__close-menu {
        position: absolute;
        top: 1.8em;
        left: 1.9em;
        z-index: 100;
        /* left: 3%; */
    }
}

/* HEADER CART */

.header__cart-icon {
    width: 1.4em;
    position: relative;

    &:hover {
        cursor: pointer;
    }
}

@media screen and (min-width: 1150px) {
    .header__cart-icon {
        align-self: center;
    }
}


.header__shopping-cart-detail-container {
    position: fixed;
    width: 22.5em;
    top: 7.4%;
    left: 50%;
    transform: translateX(-50%);
   
    z-index: 99;
    background-color: var(--neutral-white);
    border-radius: 0.6em;
 
    display: none;
}

.header__shopping-cart-detail-container.active {
    display: block;

}

@media screen and (max-width: 374px) {
    .header__shopping-cart-detail-container {
        width: calc(100vw - 2em);
    }    
}

@media screen and (min-width: 1150px) {
    .header__shopping-cart-detail-container {
        left: 67%;
        transform: translateX(-0%);
        top: 5.9em;
        box-shadow: 0em 0.5em 0.8em var(--neutral-grayish-blue),
                    0.5em 0em 0.8em var(--neutral-grayish-blue),
                    -0.5em 0.5em 0.8em var(--neutral-grayish-blue);
    }
}


.header__shopping-cart-title {
    padding-top: 1.3em;
    padding-bottom: 1.45em;
    padding-left: 1em;
    border-bottom: 0.1em solid var(--neutral-light-grayish-blue);
}

.header__shopping-cart h3 {
    font-size: 1em;
    color: var(--neutral-very-dark-blue);
    padding-left: 1.5em;
}

.header__shopping-cart-content, .header__empty-shopping-cart-content {
    color: var(--neutral-dark-grayish-blue);
    font-weight: var(--fw-bold);
    text-align: center;
    padding: 5.2em 0;
}

.header__shopping-cart-content {
    padding: 1.5em 1em;
    display: flex;
    align-items: center;
    gap: 1em;
}

.header__shopping-cart-content-product-thumbnail {
    border-radius: 0.3em;
    width: 3em;
}

.header__shopping-cart-content-product-detail {
    font-weight: var(--fw-regular);
    flex: 70%;
    text-align: start;
    height: 3em;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.total {
    color: var(--neutral-black);
    font-weight: var(--fw-bold);
    margin-left: 0.5em;
}

.header__shopping-cart-content-delete {
    width: 1.05em;
    height: 2em;
    /* flex: 5%; */
}


.header__shopping-cart-detail-checkout-button {
    width: 100%;
}

.header__shopping-cart-detail-checkout {
    font-family: var(--ff);
    font-size: 1em;
    font-weight: var(--fw-bold);
    background-color: var(--primary-orange);
    border-radius: 0.5em;
    width: 19.5em;
    height: 3.5em;
    margin-inline: auto;
    margin-block: 0.25em 2em;
    display: none;
}

.header__shopping-cart-detail-checkout.active {
    display: block;
}

.header__shopping-cart-detail-checkout:hover {
    background-color: #fcac6f;
}

@media screen and (max-width: 374px) {
    .header__shopping-cart-detail-checkout {
        width: 90%;
    }    
}


/* SHOPPING CART COUNTER */

.header__shopping-cart-counter {
    background-color: var(--primary-orange);
    border-radius: 2.5em;
    padding: 0 0.6em;
    font-size: 0.7em;
    color: var(--neutral-white);
    font-weight: var(--fw-bold);
    position: absolute;
    left: 45%;
    top: -25%;

    display: none;
}

.header__shopping-cart-counter.active {
    display: block;
}


/* HEADER USER-AVATAR */
.header__user-avatar {
    width: 20%;
    align-self: center;

    &:hover {
        cursor: pointer;
    }

}

.header__user-avatar img {
    width: 100%;

    &:hover {
        border: 0.1em solid var(--primary-orange);
        border-radius: 50%;
    }
}

@media screen and (min-width: 1150px) {
    .header__user-avatar {
        height: 50%;
        align-self: center;
    }

    .header__user-avatar img {
        width: 3.3em;
    }
    
}



/* MAIN HERO SECTION */

.hero__desktop-image-gallery, .hero__thumbnail-list, .hero__lightbox {
    display: none;
}


.hero__mobile-image-gallery-container {
    height: 18.8em;
    overflow: hidden; 
    position: relative;   
}

.hero__mobile-image-gallery-container img {
    display: none;
}

.hero__mobile-image-gallery-slide img.active {
    display: block;
}

.hero__mobile-image-gallery-container button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 3.05em;
    height: 3.05em;
    background-color: var(--neutral-white);
    border: none;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__previous-icon {
   left: 4.5%;
}

.hero__next-icon {
    right: 3.8%;
}

.hero__previous-icon svg, .hero__next-icon svg {
    width: 0.6em;
}

.hero__previous-icon svg path, .hero__next-icon svg path {
    stroke-width: 0.38em;
}

@media screen and (min-width: 1150px) {
    .hero__mobile-image-gallery {
        display: none;
    }

    .hero__desktop-image-gallery {
        display: block;
    }

    .hero {
        margin-top: 5.6em;
        margin-inline: 3.05em; 
    
        display: flex;
        gap: 5em;
    }

    .hero__desktop-image-gallery, .hero__content {
        flex: 1;
    }

    .hero__desktop-image-gallery-container {
        /* height: 100%; */
        border-radius: 1.1em;
        overflow: hidden;
    }

    .hero__desktop-image-gallery-container img {
        display: none;
    }

    .hero__desktop-image-gallery-container img.active {
        display: block;
    }

    /* HERO THUMBNAIL LIST */

    .hero__thumbnail-list {
        margin-top: 2em;
        display: flex;
        justify-content: space-between;
    }

    .hero__thumbnail-list img {
        width: 5.5em;
        height: 100%;
        border-radius: 0.5em;
    }

    .hero__thumbnail-list div.active {
        border-radius: 0.5em;
        border : 0.15em solid var(--primary-orange);
    }
    .hero__thumbnail-list img.active {
        opacity: 30%;   
    }

    .hero__thumbnail-list img:hover {
        cursor: pointer;
        opacity: 50%;
    }

    /* HERO LIGHTBOX */
       
    .hero__lightbox {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100vw;
        z-index: 99;
        background-color: var(--neutral-black);
        display: none;
        /* align-items start instead of center to have
        the close icon to be seen in all screen sizes */
        align-items: start;
        justify-content: center;
    
        overflow-y: auto;
    }

    
    .hero__lightbox-container {
        width: 34.4em; 
    }

    .hero__lightbox-image-gallery-container  {
        width : 34.4em;
        height: 100%;
        /* to have the close icon to be seen in all screen sizes */
        margin-top: 5em; 
        
        position: relative;
    } 

    .hero__lightbox-image-gallery-container img{
        display: none;
    }

    .hero__lightbox-image-gallery-container img.active {
        display: block;
        border-radius: 1em;
    }

    .hero__lightbox-thumbnail-list {
        margin-top: 2em;
        display: flex;
        justify-content: space-between;

        position: relative;
    }

    .hero__lightbox-thumbnail-list img  {
        width: 5.5em;
        height: 100%;
        border-radius: 0.5em;
    }

    .hero__lightbox-thumbnail-list div.active {
        border-radius: 0.5em;
        border : 0.15em solid var(--primary-orange); 
        
        /* creates a white layer on the image with opacity set to the containing img */
        background-color: var(--neutral-white);
    }

    .hero__lightbox-thumbnail-list img.active {
        opacity: 30%;   
    }

    .hero__lightbox-thumbnail-list div:hover {
        border-radius: 0.5em;
        background-color: var(--neutral-white);
    }

    .hero__lightbox-thumbnail-list img:hover {
        cursor: pointer;
        opacity: 60%;
    }

    /* LIGHTBOX BUTTONS */

    .hero__lightbox button:hover {
        cursor: pointer;
    }
    
    .hero__lightbox-previous-icon, .hero__lightbox-next-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        width: 4.15em;
        height: 4.15em;
        background-color: var(--neutral-white);
        border: none;
        border-radius: 50%;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero__lightbox-previous-icon {
        left: -5%;
    }

    .hero__lightbox-next-icon {
        left: 95%;
    }

    .hero__lightbox-previous-icon:hover path, 
    .hero__lightbox-next-icon:hover path {
        stroke: var(--primary-orange);
    }

    .hero__lightbox-close-icon {
        background-color: hsla(0, 0%, 0%, 0.01);
        border: none;
        position: absolute;
        left: 96%;
        top: -10%;  
    }

    .hero__lightbox-close-icon path {
        fill: var(--neutral-white);
    }

    .hero__lightbox-close-icon:hover path {
        fill: var(--primary-orange);
    }
}


/* MAIN HERO CONTENT SECTION */

.hero__content {
    padding: 1.6em 1.5em;
}

.hero__company-name {
    text-transform: uppercase;
    font-size: 0.7em;
    font-weight: var(--fw-bold);
    letter-spacing: 0.204em;
    color: var(--neutral-dark-grayish-blue);
    
}

.hero__product-name {
    font-size: 1.73em;
    font-weight: var(--fw-bold);
    line-height: 1.17;
    color: var(--neutral-black);
    margin-top: 0.44em;
}

.hero__product-description {
    font-size: 0.93em;
    color: var(--neutral-dark-grayish-blue);
    line-height: 1.65;
    margin-top: 1.05em;
    padding: 0 0.5em 0 0;
}

.hero__price {
    padding: 0.1em;
    margin-top: 1.34em;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 300px)  {
    .hero__price {
        flex-direction: column;
        align-items: start;
    }
}

.hero__price-flex {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 200px) {
    .hero__price-flex {
        flex-direction: column;
        align-items: start;
    }    
}


.hero__current-price {
    color: var(--neutral-black);
    font-size: 1.8em;
    font-weight: var(--fw-bold);
}

.hero__discount {
    background-color: var(--neutral-black);
    color: var(--neutral-white);
    font-weight: var(--fw-bold);
    padding: 0.2em 0.62em;
    border-radius: 0.3em;
    margin-left: 1em;
}

@media screen and (max-width: 200px) {
    .hero__discount {
        margin-left: 0;
    }    
}


.hero__original-price {
    font-size: 1.05em;
    color: var(--neutral-dark-grayish-blue);
    font-weight: var(--fw-bold);
    text-decoration: line-through;
    margin-left: auto;
}

@media screen and (max-width: 300px)  {
    .hero__original-price {
        margin-left: 0em;
    }
}

@media screen and (min-width: 1150px) {
    /* MAIN HERO CONTENT SECTION */

    .hero__company-name {
        font-size: 0.76em;
    }

    .hero__product-name {
         font-size: 2.75em;
    }

    .hero__product-description {
        font-size: 0.99em;
        padding: 0;
    }

    .hero__price {
        flex-direction: column;
        align-items: start;
    }

    .hero__original-price {
        margin-left: 0;
        margin-top: 1em;
    }

}


/* HERO ITEM COUNTER */

.hero__purchase-item {
    display: flex;
    flex-direction: column;
}

.hero__item-counter {
    background-color: var(--neutral-light-grayish-blue);
    height: 3.4em;
    padding-inline: 1em;
    border-radius: 0.7em;
    margin-top: 1.5em;

    display: flex;
    align-items: center;
    justify-content: space-between;

}

.hero__item-counter-display {
    font-weight: var(--fw-bold);
}

.hero__item-counter-minus-icon, .hero__item-counter-plus-icon {
    background-color: var(--neutral-light-grayish-blue);
    border: none;
}

.hero__item-counter-minus-icon:hover, .hero__item-counter-plus-icon:hover {
    cursor: pointer;
}

.hero__item-counter-minus-icon {
    position: relative;
    top: -0.2em;
}

.hero__add-to-cart {
    background-color: var(--primary-orange);
    color: var(--neutral-black);
    height: 4.2em;
    border: none;
    border-radius: 0.7em;
    margin-top: 1.3em;
    box-shadow: 0 2.8em 0.9em -0.8em var(--primary-pale-orange);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.hero__add-to-cart:hover {
    background-color: #fcac6f;
    cursor: pointer;
}

.hero__add-to-cart svg {
    width: 1.4em;
}

.hero__add-to-cart svg path {
    fill: var(--neutral-black);
}

.hero__add-to-cart span {
    font-family: var(--ff);
    font-size: 1.2em;
    font-weight: var(--fw-bold);
}

@media screen and (min-width: 1150px) {
    /* HERO ITEM COUNTER */

    .hero__purchase-item {
        margin-top: 2em;
        flex-direction: row;
        align-items: center;
        gap: 1em;
    
    }

    .hero__item-counter, .hero__add-to-cart {
        margin-top: 0;
    }

    .hero__item-counter {
        flex: 37%;
    }

    .hero__add-to-cart {
         flex: 63%;
    }

}