.collection-empty{
    height: 455px;
    width: 100%;
    padding: 80px;
    background-color: var(--beige-01);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.product-path{
    width: 100%;
    margin-top: 32px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.previous-page-product{
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--quertanary);
    font-weight: var(--regular);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.current-page-product{
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: var(--regular);
    color: var(--primary-light);
    text-transform: uppercase;
    text-decoration: none;



}

.collection-empty-container{
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}


.collection-icon-container{
    width: 40px;
    height: 40px;
    border: solid 1px var(--border-secondary);
    border-radius: 50px;

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


.collection-title{
    margin-top: 28px;
    font-size: 40px;
    line-height: 32px;
    letter-spacing: 1px;
    font-weight: var(--regular);
    color: var(--primary-light);
}

.collection-secondary-title{
    margin-top: 24px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.5px;
    color: var(--tertirary);
    font-weight: var(--regular);
    text-align: center;


}


.go-back-btn{
    margin-top: 24px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 28px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: var(--medium);
    text-decoration: none;
}




@media (width < 500px) {

    .collection-empty{
        padding: 80px 24px;

    }
    
    .product-path{
        display: none;
    }
    
    .collection-empty-container{
        margin-top: 64px;
    }
    
    
    .collection-icon-container{
        width: 40px;
        height: 40px;
        border: solid 1px var(--border-secondary);
        border-radius: 50px;
    
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    
    .collection-title{
        margin-top: 28px;
        font-size: 32px;
        line-height: 32px;
        letter-spacing: 1px;
        font-weight: var(--regular);
        color: var(--primary-light);
        text-align: center;
    }
    
    .collection-secondary-title{
        margin-top: 24px;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.5px;
        color: var(--tertirary);
        font-weight: var(--regular);
    
    }
    
    
    .go-back-btn{
        margin-top: 24px;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        line-height: 28px;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-weight: var(--medium);
        text-decoration: none;
    }
    
    

}