main.css

@import url(./css/base.css);

/* utils */

.flex-col{
    flex-direction: column;
}
.center{
    justify-content: center;
    align-items: center;
}
a{
    text-decoration: none;
}

.nav-wrapper{
    display: flex;
    max-width: 100vw;  
}
.nav{
    display: flex;
    justify-content: space-between;
    width: 70rem;
    align-items: center;
    height: var(--space-24);
    margin: 0 auto;
}

.logo{
    font-size: xx-large;
    font-weight: var(--fontWeights-thin);
    letter-spacing: var(--letterSpacings-wider);
    text-decoration: none;
    color: var(--font-primary);
}

.navitems{
    display: flex;
    gap: var(--space-10);
    align-items: center;
}

.navitems>input{
    padding: var(--space-2);
    border-radius: var(--rounded-xl);
    transition: var(--transitions-default);
    border: var(--borderWeights-light) solid var(--colors-beige);
}

.navitems>input::placeholder{
    text-align: center;
    color: var(--colors-bronze);
}

.navitems>input:hover{
    border: var(--borderWeights-light) solid var(--colors-bronze);

}
.navitems>input:focus{
    border-radius: var(--rounded-sm);
    border: var(--borderWeights-light) solid var(--colors-bronze);

}

.navmenu-items{
    color: var(--colors-tan);
    font-weight: var(--fontWeights-medium);
    transition: var(--transitions-default);
}

.navmenu-items:hover{
    font-weight: var(--fontWeights-semibold);
    color: var(--colors-bronze);
    transform: scale(1.1);
}



.hero-img{
    height: 100vh;
    width: 100%;
    object-fit: cover;
}

.hero-content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    text-align: center;
}

.hero-text{
    position: absolute;
    font-size: 7rem;
    color: var(--colors-tan);
    font-family: var(--font-serif);
}

.subhero{
    max-width: min(calc(100%-2rem), 70rem);
    padding: 2rem;
    display: flex;
    position: relative;
    align-items: center;
    gap: 1rem;
    margin: var(--space-24) auto;
    
}

.subhero-img{
    
    width: 50rem;
    overflow: hidden;
    object-fit: cover;
    filter: grayscale(100%);
    transition: var(--transitions-default);
}

.subhero-img:hover{
    filter: grayscale(50%);
    transform: scale(1.01) rotate(2deg);
    
}

.hover {
    position: absolute;
    top: 65%;
    left: 45%;
    z-index: 2;
    transition: var(--transitions-default);
}


.subhero-content{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--space-10);
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.subhero-content>h2{
    font-size: 7rem;
    color: var(--colors-spice);
    letter-spacing: var(--letterSpacings-wider);
    font-family: var(--font-serif);
}

.primary-button{
    padding: 0 var(--space-14);
  height: var(--space-14);
  width: auto;
  outline: none;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--colors-silver);
  font-weight: var(--fontWeights-bold);
  transition: var(--transitions-default);
  background-color: var(--colors-bronze);
  box-shadow:  0 8px 30px var(--colors-bronze);
}

.primary-button:hover{
    background-color: var(--colors-tan);
    box-shadow:  0 8px 50px var(--colors-tan);
    transform: scale(1.1);
}

.primary-button:active{
    transform: scale(0.9);
}

.footer{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    margin: 5rem 0 auto;
    padding: var(--space-10);
    background-color: var(--font-gray900);
    color: var(--font-silver);
}
.footer-content{
    display: flex;
    width: min(calc(100%-3rem), 75rem);
    justify-content: space-between;
    align-items: center;
}

.footer-text{
    font-size: 7rem;
    font-family: var(--font-serif);
    text-align: left;
    color: var(--font-bronze);
}

.footer-nav{
    display: flex;
    font-size: large;
    gap: 2rem;
    
}

.footer-nav>a{
    transition: var(--transitions-default);
    color: var(--font-silver);
}

.footer-nav>a:hover{
    font-weight: var(--fontWeights-semibold);
    color: var(--colors-tan);
    transform: scale(1.1);
}


/* Product page */

.container{
    display: flex;
    justify-content: center;
    gap: 2rem;
    width: calc(100% - 10rem);
    margin: var(--space-10) auto;
}

.sidebar{
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-10);
}

.filter-list>li{
    list-style: none;
    padding: var(--space-2);
}

.rating{
    color: var(--colors-gray500);
    font-size: x-large;
    cursor: pointer;
}

.rating:hover{
    color: var(--colors-gray300)
}

.checked{
    color: var(--colors-spice)
}
.rating-item:hover{
    color: var(--colors-spice);
}

.card-grid{
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(4, 1fr);
}

.product-card{
    position: relative;
    display: flex;
    flex-direction: column;
    height: fit-content;
    padding: var(--space-7);
    gap: 0.5rem;
    box-shadow: var(--shadows-sm);
    transition: var(--transitions-default);
}

.product-card:hover{
    box-shadow: var(--shadows-lg);
    transform: translateY(-1rem);
}

.product-img{
    height: 25rem;
    width: 100%;
    overflow: hidden;
    object-fit: cover;
}

.product-info{
    display: flex;
    justify-content: space-between;
}

.product-buy{
    padding: 0 var(--space-7);
    box-shadow:  none;
}
.product-buy:hover{
    background-color: var(--colors-tan);
    box-shadow:  0 3px 12px var(--colors-tan);
    transform: scale(1.01);
}

.product-buy:active{
    transform: scale(0.8);
}


/* cart */

.separator{
    border-bottom: 2px solid var(--colors-gray500);
}

.cart-details{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    width: 45rem;
}

.cart-header{
    display: flex;
    justify-content: space-evenly;
}

.cart-img{
    height: 5rem;
    width: 5rem;
    object-fit: cover;
}

.cart-items{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cart-product{
    display: flex;
    justify-content: space-between;
}

.subcart-details{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.subcart-price{
    display: flex;
    width: 20rem;
    justify-content: space-evenly;
}
.faded{
    color: var(--colors-gray400);
    font-weight: var(--fontWeights-light);
}

.payment-details{
    display: flex;
    flex-direction: column;
    padding: 2rem;
    width: 25rem;
    justify-content: space-between;
    background-color: var(--colors-gray100);
    gap: 2rem;
}

.payment-method{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.payment-method>input{
    padding: var(--space-2);
}

.payment-method>input:hover{
    border: 2px solid var(--colors-bronze);
}

.payment-method>label:focus{
    color: var(--font-spice);
}
.checkout-button{
    background-color: var(--colors-black);
    color: var(--font-white);
    padding: var(--space-10);
    cursor: pointer;
    border: none;
    font-size: large;
    letter-spacing: var(--letterSpacings-wider);
    transition: var(--transitions-default);
}

.checkout-button:hover{
    background-color: var(--colors-bronze);
    transform: scale(1.01);
    box-shadow: var(--shadows-xl);
}

.checkout-button:active{
    transform: scale(0.99);
}

/* Wishlist */

.fav-icon{
    position: absolute;
    cursor: pointer;
    fill:var(--colors-red600);
    color: var(--font-white);
    inset: 10;
    transition: var(--transitions-default);
}

.fav-icon:hover{
    transform: scale(1.2);
    fill: var(--colors-red400);
}

/* login page */

.login-details{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-details>input{
    padding: var(--space-2);
    font-size: var(--fontWeights-bold);
}

.login-button{
    padding: 1rem;
    width: 15rem;
    cursor: pointer;
    border: none;
    font-size: large;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: var(--letterSpacings-wider);
    background-color: var(--colors-black);
    color: var(--font-white);
    transition: var(--transitions-default);
}

.login-button:hover{
    background-color: var(--colors-bronze);
    box-shadow: var(--shadows-lg);
    transform: scale(1.01);
}

.login-button:active{
    transform: scale(0.99);
}


.button-google:hover{
    background-color: var(--colors-white);
    color: blue;
}

.button-apple:hover{
    background-color: var(--colors-white);
    color: var(--font-black);
}